1. Introduction
- Objective of this section: Through the explanation in the previous section , I believe that everyone has a certain understanding of the directory structure and configuration of the applet framework MINA. Next, the view layer, logic layer and the interaction between them will be explained.
- Target users: Students who have no programming experience but are interested in WeChat mini-programs.
- Learning objectives: Understand the view layer (View), logic layer (App Service), and the interaction between them in the MINA framework.
- Case study: helloworld applet.
- code download
- Portal:
Contents: WeChat Mini Program Tutorial-Introduction-Soon WeChat Mini Program Community
Previous: [helloworld]-WeChat Mini Program Tutorial-Introduction [3] Next: Unopened.
- Note: Students who have programming experience or have seen the simple tutorial on WeChat official website, please skip this chapter as appropriate.
2. MINA structure basis
To a certain extent, we can simplify the structure of MINA as shown below:
view module: responsible for UI display. It consists of wxml written by developers, wxss and related components provided by WeChat.
service module: responsible for the background logic of the application, it consists of the js code of the applet and the related auxiliary modules provided by WeChat.
The view module is driven by the view thread, and the service module is driven by the AppService Thread. When we say the interaction between the view module and the service module, we actually refer to the interaction between threads.
An applet has only one service process, which runs in the background during the program life cycle. When the applet enters the background for a certain period of time, or the system resource usage is too high, it will be really destroyed.
3. Case presentation
The picture above shows the two pages of the project. Left: main page. Right: the logs page.
The following will be divided into three parts to explain helloworld: startup process, main page, logs page.
4. Start the process
- Logical entry: app.js
The code of app.js is as follows:
//app.js
//1. The App() function is used to register an applet. Accepts an object parameter, which specifies the life cycle function of the applet, etc.
App({
//2. Life cycle function--listen to the initialization of the applet, when the initialization of the applet is completed, onLaunch will be triggered (only triggered once globally)
onLaunch: function () {
//Call API to get data from local cache
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
//3. Member method: Get user data.
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//call the login interface
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
//4. Global data
globalData:{
userInfo:null
}
})
//Note: App() must be registered in app.js, and more than one cannot be registered.
// Don't call getApp() in a function defined in App(), use this to get the app instance.
// Don't call getCurrentPage() when onLaunch, when the page has not been generated yet.
The above code file illustrates the purpose of the app.js file: register App(). There are two parts here.
One: the definition of the life cycle function (onLaunch/onShow/onHide) .
The second: custom functions, usually used to operate global data or business logic data such as users provided by WeChat.
global data.
- Main page after startup: app.json
The main page after startup is determined according to the part in [pages] in app.json. For preparation, whoever is on it is who the main page is. In this project, the code is as follows:
"pages":[
"pages/index/index",
"pages/logs/logs"
],
If we change the position of index and logs, the main page will be replaced from the left image in the above figure to the right image. code show as below:
"pages":[
"pages/logs/logs",
"pages/index/index"
],
5. The picture on the main 
page
- file layer
Find the files with the suffix of .json, .js, .wxml, .wxss in the path ["pages/index/index"], and integrate them.
- code layer
For the main page after routing, call onLoad, onShow. The sub-items in this project are as follows:
//index.js
//1. Get the application instance
var app = getApp ()
//2. The Page() function is used to register a page. Accepts an object parameter, which specifies the initial data of the page, life cycle functions, event handlers, etc.
Page({
//3. The initial data of the page
data: {
motto: 'Hello World',
userInfo: {}
},
//4. Event handler, when the user clicks the component, the event handler is called. Jump to the logs page.
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
//5. When the page is loaded, a page will only be called once.
onLoad: function () {
console.log('onLoad')
var that = this
//Call the method of the application instance to get the global data
app.getUserInfo(function(userInfo){
//update data
that.setData({
userInfo:userInfo
})
})
}
})
The interaction between the view layer and the logic layer is realized through the event mechanism. The above code [4] shows the processing logic of the logic layer. The event code in the view layer looks like this:
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
As shown above, from the coding level, the event mechanism consists of two parts. One is in the page-related wxml file. Second, in the .js file, define the corresponding processing function, and identify it by the function name.
6. logs page
- logs page analysis
The code of logs.js is as follows:
//logs.js
//1. Load the module
var util = require ('../../ utils / util.js')
Page({
//2. The Page() function is used to register a page. Accepts an object parameter, which specifies the initial data of the page, life cycle functions, event handlers, etc.
data: {
logs: []
},
//3. When the page is loaded, a page will only be called once.
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
logs.wxml is as follows:
<!--logs.wxml-->
<view class="container log-list">
<!-- wx:for Use the wx:for control property on a component to bind an array to repeatedly render the component with the data of each item in the array. -->
<!-- block wx:for renders a block with multiple nodes. -->
<!-- Use wx:for-item to specify the variable name of the current element of the array. -->
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
- Jump between main page and logs page
7. Summary
knowledge points: Understand the view layer (View), logic layer (App Service), and the interaction between them in the MINA framework.
Learn the basics of how events are used.
Learn how to jump between interfaces and stack space.
8.
Know and use the debugging function of WeChat development tools in advance.