background

Json is used to configure the page. Page.wxml defines the page structure, page.wxss defines the page style, and page.js defines the way to interact with users. This article will describe the running environment of wechat mini program.

The host environment

Different from Android applications and iOS applications running directly on Android system and iOS system, wechat applet runs in the host environment provided by wechat. Because wechat has smoothen the differences between different platforms for us, wechat applet can achieve cross-platform and many functions that ordinary web pages cannot achieve. We will take the previously established Test project as an example to introduce the operation process of wechat applet.

Let’s take a brief look at the running environment of the small program. The running environment of small programs is divided into the rendering layer and the logical layer, in which WXML templates and WXSS styles work in the rendering layer, and JS scripts work in the logical layer. The rendering layer and logic layer of the small program are managed by two threads respectively: the interface of the rendering layer uses WebView to render; The logic layer uses JsCore thread to run JS script. A small program has multiple interfaces, so there are multiple WebView threads in the rendering layer. The communication of the two threads will be transferred through the wechat client (Native will also be used to refer to the wechat client below), and the network requests sent by the logical layer will also be forwarded through Native. The communication model of the small program is shown in the following figure.

The startup process of a small program

Before opening the mini program, the wechat client will download the code package of the entire mini program to the local. The pages field of the test project contains two pages: index and logs. The entryPagePath does not specify the startup page. So the first page of the Pages field, the Index page, is the launch page by default.

 "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
Copy the code

So the wechat client will load the code of the home page in, through some mechanisms at the bottom of the small program, you can render the home page. After the applet is launched, the onLaunch callback of the app instance defined in app.js will be executed. The entire applet has only one app instance, which is shared by all pages. Each applet needs to register the applet instance by calling the APP method in app.js. Bind lifecycle callbacks, error listeners, and page nonexistent listeners, which contain the following listeners:

// app.js app ({onLaunch (options) {// Lifecycle callback -- listens for applets initialization. }, onShow (options) {// Lifecycle callback -- listen for applets to start or cut foreground. }, onHide () {// Lifecycle callback -- listen for applets to cut background. }, onError (MSG) {// error listener function. console.log(msg) }, globalData: 'I am global data' })Copy the code

Applet page rendering

The general process is as follows. It can be observed that pages/logs/logs actually contains four kinds of files. Wechat client will first generate an interface according to logs. The client then loads the WXML structure and WXSS style of the page. Finally, the client loads log.js.

Page({data: {// render data logs: []}, onLoad() {// render data after this.setData({logs: (wx.getStorageSync('logs') || []).map(log => { return { date: util.formatTime(new Date(log)), timeStamp: log } }) }) } })Copy the code

Page is a Page constructor that generates a Page. When the page is generated, the applet framework renders the data and index. WXML together to render the final structure, and you get what the applet looks like. After rendering the interface, the page instance will receive an onLoad callback from which you can process your logic.

For each page in the small program, you need to register in the corresponding JS file of the page, specifying the initial data of the page, life cycle callbacks, event handlers, etc.

//index.js Page({data: {text: "This is Page data."}, onLoad: function(options) {// Page creation}, onShow: Function () {// when the page appears in foreground}, onReady: function() {// when the page is rendered for the first time}, onHide: function() {// when the page changes from foreground to background}, onUnload: Function () {// execute when the page is destroyed}, onPullDownRefresh: function() {// execute when the pull-down refresh is triggered}, onReachBottom: OnPageScroll: function() {onPageScroll: function() {onPageScroll: Function () {// when the page is scrolling}, onResize: Function () {// when the page size changes}, OnTabItemTap (item) {console.log(item.index) console.log(item.pagepath) console.log(item.text)}})Copy the code

Behavior

Pages can cite behaviors. Behaviors can be used to make multiple pages have the same data fields and methods.

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})
Copy the code
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})
Copy the code

Component

The Page constructor is suitable for simple pages. But for complex pages, the Page constructor might not be useful. At this point, you can use the Component constructor to construct the page. The main difference in the Component constructor is that methods need to be inside methods: {}.

Component({ data: { text: "This is page data." }, methods: { onLoad: Function (options) {// execute when page is created}, onPullDownRefresh: function() {// execute when pull-down refresh}, // event response function viewTap: function() {//... }}})Copy the code

The last

If you are interested, you can follow the public account QStack, which will share some articles and free learning resources regularly.