[applet practice series] Introduction to the registration life cycle of the applet framework page

author ： Half body wind and snow
Previous section ： What is wechat applet

---

---

One 、MINA frame

The running environment of small programs is divided into Render layer and logic layer , They are 2 Thread management ： The rendering layer interface uses WebView Thread rendering ; Logic layer adopts JsCore Thread running JS Script . A small program has multiple interfaces , So there are multiple render layers WebView Threads , The communication between these two threads will be via wechat client （ We will also use Native Wechat client ） Make a transfer . The communication model of the applet is shown in the figure below ：

Applet MINA The framework is close to the original App Running speed of . In fact, what he actually uses is the present IT The most respected in the world MVVM Pattern .view Layer corresponding render layer ,model Layer corresponds to logical layer ,viewmodel Layer correspondence native layer .

native The layer mainly does two things ： Data binding and event listening . The logic layer sends network requests through Native forward .

1-1、 Render layer （ View layer View）

WXML Templates and WXSS Styles work in the render layer ,.wxml Used to describe the page structure , and .wxss Used to describe page styles .

The view layer presents data in a given style and feeds back events to the logic layer , And data presentation is done by components . Components （Component） It's the basic component of a view .

1-2、 Logic layer (APP Service)

JS Working at the logical level . Data is processed at the logical layer and sent to the view layer , At the same time, accept the event request sent back by the view layer .

Wechat team is right JavaScript Some optimizations have been made , In order to develop small programs more efficiently , These optimizations include ：

1. increase app Method to register a program , increase page Method to register the page .
2. Provide a wealth of API Interface .
3. The scope of the page is relatively independent , And has the ability of modularization .

But here's the thing , The logic layer of the applet consists of js To write , But it's not running in a browser , therefore JavaScript stay Web Some of the abilities in cannot be used , such as Dom、Window etc. .

1-3、setData function

On the page page() in , We use setData Function to send data from the logical layer to the view layer , At the same time change the corresponding this.data Value . There is a size limit for single set data , No more than 1024KB, Avoid setting too much data at once .

1-4、 Example

take home.wxml The contents of the file are modified to the following code ：

<view bindtap="clickOn">{ {content}}</view>

there bindtap Is a click event ,content It is the content to be displayed .

stay home.js File add definition content data , And click on the corresponding event ：

Page({
    

  data:{
    
​    content: "Hello Word"
  },
  
  clickOn(){
    
​    console.log(" Click event ");
​    this.setData({
    
​      content: "hello"
​    })
  }
})

Now run the project , The initial normalized data will be displayed ：

Then click on the text content area , The text will become what we modified Hello：

About the framework of the applet , I'll introduce it here first , More about , Let's go into Applet framework Study , The official documents explain things in detail .

Two 、 Interface rendering

2-1、 How the interface is rendered ？

First , We need to know ,wxml Equivalent to a tree DOM Trees , You can also use a JS Object to simulate （ fictitious DOM）

2-2、 If the data changes , How is it rendered ？

1. Will create a new JS object
2. At this point, you can compare the two JS The object gets the changed part
3. Then apply this difference to the original Dom on the tree
4. To update UI Purpose , This is it. " Data driven " Principle

3、 ... and 、 Programs and pages

The applet contains a description of the overall program app And a number of page.

How the wechat client starts the applet ？

Wechat client before opening the applet , Will download the entire applet code package to the local . Then through the entrance app.json Of pages You know all the page paths of the current applet . Then it will load the code of the home page , Through the underlying mechanism of the applet , You can render this home page .

Four 、 Register applet

• Every applet needs to be in app.js Call in App Method to register an applet instance , Bind lifecycle callback function 、 Error listening, no listening function on the page, etc .
• There is only one... In the whole applet App example , It's all page sharing . adopt getApp Method to get this instance .

What do you usually do when registering an applet ？

1. Determine the entry scenario of the applet , Scene value .
2. Get user information .
3. Set global data — globalData.

5、 ... and 、 Registration page

• For each page in the applet , All need to be mapped on the page js Register in the file , Specify the initial data for the page 、 Lifecycle Callback 、 Event handling functions, etc .
• Simple page usage Page Constructor to construct .
• Complex pages use Component Constructor to construct .

How to write a page of a small program ？

• I've already introduced , A page may include 4 Documents , Wechat client will first according to page json Configuration generates an interface , The top color and text you can see in this page json It's defined in the file . Then the client will load the page WXML The structure and WXSS style . Finally, the client will load JS.
• then Page This constructor will generate a page . When generating a page , The applet framework will put data Data and .wxml Render the final structure together .

What do you usually do when registering a page ？

1. Send network request in lifecycle function , Get data from server .
2. Initialize some data , To facilitate being wxml Quote show .
3. monitor wxml In the event , Bind the corresponding event function .
4. Some other monitors （ For example, page scrolling 、 Pull up to refresh 、 Pull down to load more, etc ）.

6、 ... and 、 Page lifecycle

You don't need to figure it out immediately , But it will help in the future .

The following figure illustrates the page Page The life cycle of the instance .