The framework provided by the WeChat team for Mini Programs is named MINA Application Framework. By encapsulating basic functions such as file system, network communication, task management, and data security provided by the WeChat client, the MINA framework provides a complete set of JavaScript APIs for the upper layer, allowing developers to easily use the various basic functions provided by the WeChat client. ability to quickly build an application.
Through the frame diagram, we can see two parts: in the page view layer, wxml is a set of html tag-like language provided by MINA and a series of basic components. Developers use the wxml file to build the basic view structure of the page, and use the wxss file to control the display style of the page. The AppService application logic layer is the service center of MINA, which is independently loaded and run by the WeChat client to enable asynchronous threads. The data required for page rendering and page interaction processing logic are implemented in AppService. AppService in the MINA framework uses JavaScript to write interactive logic, network requests, and data processing, but cannot use DOM operations in JavaScript. Each page in the applet can implement data management, network communication, application life cycle management and page routing through AppService.
The MINA framework provides event monitoring-related properties such as bindtap and bindtouchstart for page components, which are bound to the event handling functions in the AppService, and the implementation also synchronizes user interaction data for the AppService layer. The MINA framework also provides many methods to unidirectionally bind the data in the AppService to the page. When the data in the AppService changes, it will actively trigger the re-rendering of the corresponding page components. MINA uses virtualdom technology to speed up the rendering efficiency of the page.
At the heart of the framework is a responsive data binding system that makes it very simple to keep data and views in sync. When data is modified, only the data needs to be modified in the logic layer, and the view layer will be updated accordingly. Let's look at the following example:
<!--demo.wxml-->
<view> Hello {{name}}</view>
<button bindtap="changeName">Click Me</button>
// demo.js
var helloData = {
name: 'WeChat'
}
Page({
/**
* Initial data of the page
*/
data: helloData,
changeName: function (e) {
this.setData({
name: 'MINA'
})
}
})
♦ The developer binds the name in the logic layer database to the name in the view layer through the framework, so Hello WeChat will be displayed when the page is opened
♦ When the button is clicked, the view layer will send the changeName event to the logic layer, and the logic layer will find the corresponding event handler.
♦ The logic layer executes the setData operation, changing the name from WeChat to MINA, because the data and the view layer have been bound, so the view layer will automatically change to Hello MINA.
The WeChat applet not only optimizes the operating mechanism of the underlying architecture, but also uses components close to native for heavy functions (such as page switching, tab switching, multimedia, network connection, etc.). Therefore, the WeChat applet MINA has a running speed close to that of a native app. It has done a lot of framework-level optimization design, made a highly consistent presentation on Android and iOS, and prepared complete development and debugging tools.
logic layer
The logic layer is where transaction logic is handled. For WeChat Mini Programs, the logic layer is the collection of all .js script files. The WeChat applet processes data at the logic layer and sends it to the view layer, and accepts event feedback from the view layer.
The logic layer of the WeChat applet development framework is written in JavaScript. On the basis of JavaScript, the WeChat team has made some appropriate modifications to improve the efficiency of developing small programs. Major modifications include:
♦ Add app and page methods to register programs and pages
♦ Provide rich API, such as scanning, payment and other WeChat-specific capabilities
♦ Each page has an independent scope and provides modularity.
The implementation of the logic layer is to write .js script files for each page. However, since the applet does not run in the browser, some capabilities of JavaScript in the Web, such as document and window, cannot be used.
All the code we develop and write will eventually be packaged into a piece of JavaScript and run when the applet is started until the applet is destroyed.
view layer
The view layer of the framework is written by WXML and WXSS and displayed by components. For WeChat Mini Programs, the view layer is the collection of all .wxml files and .wxss files:
♦ .wxml files are used to describe the structure of the page.
♦ The .wxss file is used to describe the style of the page.
The WeChat applet processes data at the logic layer and sends it to the view layer for display, and receives event feedback from the view layer.
The view layer presents data in a given style and feeds back time to the logic layer, and data presentation is performed by components. Components are the basic building blocks of views.
data layer
The data layer includes temporary data or cache, file storage, network storage and calls.
1. Page temporary data or cache
In Page(), we need to use the setData function to send data from the logic layer to the view layer, while changing the corresponding value of this.data.
Notice: Modifying this.data directly is invalid, cannot change the state of the page, and will cause data inconsistency. The data set at one time cannot exceed 1024KB. Please try to avoid setting too much data at one time.
The parameter of the setData() function receives an object. In the form of key and value, the value corresponding to the key in this.data is changed to value. The key can be very flexible, including given in the form of data path, such as array[2].message, abcd, and does not need to be pre-defined in this.data.
2. File storage (local storage)
Use the data API interface as follows:
♦ wx.getStorage: Get the local data cache.
♦ wx.setStorage: set the local data cache.
♦ wx.clearStorage: Clears the local data cache.
3. Network storage or call
Upload or download file API interface, as follows:
♦ wx.request: initiate a network request.
♦ wx.uploadFile: upload file.
♦ wx.downloadFile: Download file.
The API interface for calling the URL is as follows:
♦ wx.navigateTo: New window opens the page.
♦ wx.redirectTo: The original window opens the page.