Shulou(Shulou.com)06/01 Report--

This article mainly explains "the case analysis of view layer and logic layer of MINA framework". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn the "MINA framework of the view layer and logic layer case analysis" bar!

1. Introduction to the beginning

Target users: students who have no programming experience but are interested in WeChat Mini Programs.

Learning goal: to understand the view layer (View), logic layer (App Service) of the MINA framework, and the interaction between them.

Case study: helloworld Mini Program.

2. Structural basis of MINA

View module: responsible for UI display. It consists of wxml,wxss written by developers and related components provided by Wechat.

Service module: responsible for the background logic of the application, it consists of the js code of Mini Program and related auxiliary modules provided by Wechat.

The view module is driven by view thread, and the service module is driven by AppService Thread. When we talk about the interaction between the view module and the service module, we actually mean the interaction between threads.

A Mini Program has only one service process, which runs in the background during the program life cycle. When Mini Program enters the background for a certain period of time, or the system resources are occupied too high, it will be really destroyed.

3. Case presentation

The image above shows two pages of the project. Left: main page. On the right: the logs page.

The following will be divided into three parts to explain helloworld: the startup process, the main page, and the logs page.

4. Start the process

Logical entry: app.js

The code for app.js is as follows:

/ / app.js

/ / 1. The App () function is used to register a Mini Program. Accept an object parameter that specifies the life cycle function of Mini Program, and so on.

App ({

/ / 2. Lifecycle function-listens to Mini Program initialization. When Mini Program initialization is completed, onLaunch will be triggered (only once globally)

OnLaunch: function () {

/ / call API to get data from the 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 login API

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 cannot register more than one.

/ / instead of calling getApp () in the function defined in App (), you can get the app instance by using this.

/ / do not call getCurrentPage () when onLaunch, when the page has not been generated.

Copy the code

If we change the location of index and logs, the main page will be changed from the left image in the above image to the right image. The code is as follows:

"pages": [

"pages/logs/logs"

"pages/index/index"

]

Copy the code

The interaction between the view layer and the logic layer is realized through the event mechanism, and the above code [4] shows the processing logic of the logic layer. The event code is shown in the view layer as follows:

{{userInfo.nickName}}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.