1. Life cycle

- what is life cycle

Life Cycle (Life Cycle) refers to the entire stage of an object from creation -> operation -> destruction, emphasizing a period of time.

For example:

．The birth of Zhang San means the beginning of this person's life cycle.

．Zhang San passed away, which means the end of this person's life cycle

．The life of Zhang San in the middle is the life cycle of Zhang San

We can summarize the running process of each applet as a life cycle:

．The start of the applet indicates the beginning of the life cycle

．The closing of the applet means the end of the life cycle

．The process of running the intermediate applet is the life cycle of the applet

2. Classification of life cycle

In the applet, the life cycle is divided into two categories, namely:

a. Application life cycle

．Specifically refers to the process of the applet from starting->running->destroying

b. Page life cycle

．Specifically refers to the process of loading->rendering->destruction of each page in the applet

Among them, the scope of the life cycle of the page is small, and the scope of the life cycle of the application is large, as shown in the figure

3. What is a lifecycle function

Life cycle function : It is a built-in function provided by the applet framework, which will be automatically executed in order along with the life cycle.

The role of the life cycle function : to allow the programmer to perform certain operations at a specific point in time . For example, when the page is just loaded, the data of the page can be initialized in the onLoad lifecycle function.

Note: The life cycle emphasizes the time period, and the life cycle function emphasizes the point in time.

4. Classification of lifecycle functions

There are two types of life cycle functions in applets, namely:

1. Application lifecycle functions

．Specifically refers to those functions that the applet calls in sequence from startup->run->destruction

2. Page life cycle function

．Specifically refers to the functions that are called sequentially during each page from loading -> rendering -> destruction in the applet

5. Application lifecycle functions

The application life cycle function of the applet needs to be declared in app.js, the sample code is as follows:

6. Page lifecycle functions

The page life cycle function of the applet needs to be declared in the page.js file. The sample code is as follows:

onLoad(Object query)

Fired when the page loads. A page will only be called once, and the parameters in the path to open the current page can be obtained from the parameters of onLoad.

onShow()

Triggered when the page is displayed/cut to the foreground.

onReady()

Fired when the page's initial rendering is complete. A page will only be called once, which means that the page is ready to interact with the view layer.

Note: APIs for setting interface content such as wx.setNavigationBarTitle should be performed after onReady . See life cycle for details

onHide()

Triggered when the page hides/cuts to the background. Such as wx.navigateTo or the bottom tab to switch to other pages, and the applet to switch to the background, etc.

onUnload()

Fired when the page is unloaded. Such as wx.redirectTo or wx.navigateBack to other pages.

2. WXS script - overview

- what is wxs

wxs (WeiXin Script) is a set of scripting languages unique to Mini Programs. Combined with WXML, the structure of the page can be constructed

2. WXS application scenarios

Functions defined in js of the page cannot be called in wxml, but functions defined in Wxs can be called in wxml. Therefore, the typical application scenario of Wxs in applets is "filter".

3. The relationship between wxs and JavaScript*

Although the syntax of wxs is similar to JavaScript, wxs and JavaScript are two completely different languages:

① wxs has its own data type

. number numeric type, string string type, boolean Boolean type, object object type,

. function function type, array array type,

② wxs does not support syntax forms similar to ES6 and above

date date type, regexp regular

．Not supported: let , const , destructuring assignment, spread operator, arrow functions, object property shorthand, etc …

. Support: var defines variables, common function functions and other syntax similar to ES5

③ wxs follows the CommonjS specification

.module object

.require() function

.module.exports object

3. WXS script - basic syntax

1. Embedded wxs script

Wxs code can be written in cwxs > tag in wxmi file, just like Javascript code can be written in < script > tag in html file.

Each <wxs></wxs> tag in the wxml file must provide a module attribute, which is used to specify the block name of the current woxs, so that it is convenient to access the members of the module in wxml:

2. Define the external wxs script

wxs code can also be written in . Wxs suffix, just like javascript code can be written in js suffix file. The sample code is as follows:

3. Using external wxs scripts

When introducing an external Wxs script in wxml, you must add module and src attributes to the <Wxs> tag,

in:

.module is used to specify the name of the module

.src is used to specify the path of the script to be imported, and must be a relative path

The sample code is as follows:

Four. WXS script - WXS features

- different from javaScript

In order to reduce the learning cost of wxs (WeiXin Script), the wxs language borrows a lot of JavaScript syntax during design. But in essence, wxs and JavaScript are two completely different languages!

2. It cannot be used as an event callback of a component

wxs典型的应用场景就是“过滤器”，经常配合Musttanch语法进行使用，例如：

但是在wxs中定义的函数不能作为组件的事件回调函数，例如，下面的用法是错误的：

3.隔离性

隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：

① wxs 不能调用 js 中定义的函数

② wXs 不能调用小程序提供的 API

WeChat applet——life cycle, life cycle classification, page life cycle, classification of life cycle functions, application life cycle functions, page life cycle functions, wxs script overview