Micro-trust program front-end source logic and workflow _javascript skills

Do not say much nonsense, directly analyze the front-end code.

File basic structure:

First look at the portal App.js,app (obj) register a small program. Accepts an object parameter that specifies the life cycle function of the applet, and so on. Other files can get the app instance through the global Method Getapp (), and call its properties or methods directly, for example (Getapp (). GlobalData)

App.js
App ({
onlaunch:function () {
//Call API Fetch data from local cache
var logs = Wx.getstoragesync (' logs ') | | []
Logs.unshift (Date.now ())
Wx.setstoragesync (' logs ', logs)
},
getuserinfo:function (CB) {
var that = this
if (this.globalData.userInfo) {
typeof cb = = "function" && CB (This.globalData.userInfo
}else{
//calls the login interface
wx.login ({
success:function () {
wx.getuserinfo ({
success: Function (res) {
that.globalData.userInfo = res.userinfo
typeof cb = = "function" && CB ( That.globalData.userInfo)}}})}}
,
globaldata:{
userinfo:null
}
})

I understand that app.js initialization files for the portal, but also provides a place for global API expansion. Several methods and properties of self-band under analysis of Bottom

The Onlaunch hook function is executed automatically once the applet is initialized, and then in the applet lifecycle if you do not actively invoke Onlaunch, it is not executed.

var logs = Wx.getstoragesync (' logs ') | | [] Gets the logs property in the local cache, and if the value is null, then setting logs=[] is similar to the localstorage effect in HTML5 logs.unshift (Date.now ()) The current logon time is added to the array wx.setstoragesync (' logs ', logs) stores the data in the local cache because WX is global, so you can call Wx.getstoragesync (' logs ') directly in other files to get the local cache data

GetUserInfo function, as the name implies is to obtain login user information, the equivalent of this function provides access to user information interface, other pages do not invoke nature will not execute. Other pages pass Getapp (). GetUserInfo (function (userinfo) {console.log (userinfo);}) This method is called to get the user information.

Getuserinfo:function (CB) {//parameter is CB, type is function
var that = ' This
if (this.globalData.userInfo) {//user information is not empty
typeof CB = = "function" && CB (THIS.GLOBALDATA.USERINFO)//If the parameter CB type is the function, then executes the CB, obtains the user information;
}else{//If the user information is empty, This means that the first call to GetUserInfo invokes the user login interface.
Wx.login ({
success:function () {
wx.getuserinfo ({
success:function (res) {
Console.log (res
That.globalData.userInfo = res.userinfo//The user information to the GlobalData, if you call the GetUserInfo function again, do not need to call the login interface
typeof CB = = "function" && CB (THAT.GLOBALDATA.USERINFO)//If parameter CB type is function, execute CB, get user Information}}}
)
}
}

The GlobalData object is used to store global data and is invoked elsewhere

Then a brief analysis of the App.json file, the role of the file is to the micro-mail program for global configuration, determine the path of the page file, window performance, set the network timeout time, set the tab, etc.

The most important is the pages attribute, required, array, the element within the arrays is a string file path, specifies which pages the applet consists of, and the first item must be a small program initial page.

{"
pages": [
"Pages/index/index",
"Pages/logs/logs"
],
"window": {
"Backgroundtextstyle" : "Light",
"Navigationbarbackgroundcolor": "#fff",
"Navigationbartitletext": "WeChat",
" Navigationbartextstyle ": Black"
}
}

Then look at the project index and the logs folder. The initial project of the micro-letter program to each page related to the JS, WXSS, Wxml placed in their respective files, so that seems to be a clear structure.

First look at the index folder, which is the small program initial page. The index folder is Index.js, Index.wxml, INDEX.WXSS three small files. Small program to JS, CSS, HTML code separate, placed in the file alone, their respective roles. JS and style sheet file names must be consistent with the Wxml file name of the current folder to ensure that the effects of JS and style sheets can appear on the page. I appreciate this design concept, uniform, clear responsibility, reduce the complexity of code design.

Index.wxml, this is the common template file, data driven, have the front-end MVC, MVVM project development of this will not be unfamiliar, after all, this is based on the react development.

<!--index.wxml-->
<view class= "container" >//view container
<view bindtap= "Bindviewtap" UserInfo ">//bindtap the container to bind the touch event, triggering the Bindviewtap event handler function when the touch leaves, Bindviewtap adding index.js class through the <image page () setting
= "Userinfo-avatar" src= "{{userinfo.avatarurl}}" background-size= "Cover" ></image>// Large double bracket variables from the Index.js data object are parsed into the corresponding values, and are real-time
<text class= "Userinfo-nickname" >{{userinfo.nickname}}</ text>
</view>
<view class= "Usermotto" >
<text class= "User-motto" >{{motto}}</ Text>
</view>

Index.js, and reaact usage few different, in the same. Pages () to register a page. Accepts an OBJECT parameter that specifies the page's initial data, lifecycle functions, event handler functions, and so on.

var app = Getapp ()//Get entry file app's application instance
Page ({
data: {
motto: ' Hello World ',
userInfo: {}
},
// Custom event handler function, click. userinfo easily triggers this function
bindviewtap:function () {
Wx.navigateto ({//Global object WX's jump page method
URL: ' ... /logs/logs '
}
},
onload:function () {//When page load occurs, automatically triggers the lifecycle function
console.log (' onLoad ')
var
That's = this//call to apply the instance method to get global data
app.getuserinfo (function (userInfo) {
//Update data, page auto render
That.setdata ({
userinfo:userinfo
})
}
})

The Index.wxss file renders only the currently owned page, overwriting the global APP.WXSS the same style.

Analysis of the next logs log folder, logs folder for Logs.wxml, Logs.js, LOGS.WXSS, Logs.json, the same guarantee the same name, to complete the effect rendering.

Logs.wxml file

<!--logs.wxml-->
<view class= "Container log-list" >
<block wx:for= "{{logs}}}" wx:for-item= Log ">//block container function, no other practical meaning. wx:for function: Traverse logs array, traverse how many times, block blocks will replicate how many times, For-item equivalent to for <br> traversal element for a variable name, easy to reference. <br>
<text class= "Log-item" >{{index + 1}}. {{log}}</text>
</block>

Logs.js file

Logs.js
var util = require ('.. /.. /utils/util.js ')//util.js is equivalent to a function library where we can customize extensions and encapsulate some of the commonly used functions and methods
Page ({
data: {
logs: []
},
onload:function () {
this.setdata ({
logs): (Wx.getstoragesync (' logs ') | | []). Map (function (log) {//Wx.getstoragesync gets the locally cached logs log data return
util.formattime (new date log)/date format
})
})
}
})

Logs.json file

{
"Navigationbartitletext": "View Startup Log"//current page configuration file, set window current page top navigation bar title, etc. related content
}

Basic page structure and logic is so simple, exposing us to nothing inexplicable.

The

Applet also provides a lot of official components and APIs waiting for us to dig deep, come on, boy! Small program Official document address