Table of contents
1. The life cycle of the registered applet:
2. Registration page life cycle
Five, movable-area and movable-view
1. Life cycle
1. The life cycle of the registered applet:
app.js:
// app.js
App({
onLaunch() {
// Show local storage capability
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs' , logs)
// login
wx.login({
success: res => {
// send res.code to background to exchange for openId, sessionKey, unionId
}
})
},
onShow (options) {
// Do something when show.
console. log("display")
},
onHide () {
// Do something when hide.
console.log("hide")
},
onError (msg) {
console.log(msg)
},
globalData: {
userInfo: null
}
})
2. Registration page life cycle
index.js:
// index.js // Get the application instance const app = getApp() //var is a global variable //let is a local variable //const defines the constant Page({ data: { motto: 'Hello World', userInfo: { }, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), canIUseGetUserProfile: false, canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open -data.type.userNickName') // If you want to try to obtain user information, you can change it to false }, onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } }, onLoad: function( options) { // Page creation Execute when // Execute console.log("onLoad") }, onShow: function() { // Execute console.log("onShow") when the page appears in the foreground }, onReady: function() { // The first time the page Execute console.log("onReady") when rendering is complete }, onHide: function() { // Execute console.log("onHide") when the page changes from foreground to background }, onUnload: function() { // Destroy the page Execute console.log("onUnload") } })
Life cycle diagram:
2. Page routing
The routing of all pages in the mini program is managed by the framework.
1. Page stack
The framework maintains all current pages in the form of a stack. When a routing switch occurs, the page stack behaves as follows:
| routing method | page stack performance |
|---|---|
| initialization | push new page |
| Open new page | push new page |
| page redirect | The current page is popped out of the stack and the new page is pushed into the stack. |
| Page return | The page continues to pop off the stack until the target returns to the page |
| Tab switch | All pages are popped out of the stack, leaving only the new Tab page. |
| reload | All pages are popped out of the stack, leaving only new pages. |
Developers can use getCurrentPages() functions to obtain the current page stack.
2.Routing method
The routing triggering method and page life cycle functions are as follows:
| routing method | Trigger time | pre-routing page | Post-routing page |
|---|---|---|---|
| initialization | The first page opened by the applet | onLoad, onShow | |
| Open new page | Call API wx.navigateTo using component <navigator open-type="navigateTo"/> |
onHide | onLoad, onShow |
| page redirect | Call API wx.redirectTo using component <navigator open-type="redirectTo"/> |
onUnload | onLoad, onShow |
| Page return | Call API wx.navigateBack using component <navigator open-type="navigateBack"> User presses the back button in the upper left corner |
onUnload | onShow |
| Tab switch | Call the API wx.switchTab to use the component <navigator open-type="switchTab"/> to switch the Tab. |
Please refer to the table below | |
| Restart | Call API wx.reLaunch using component <navigator open-type="reLaunch"/> |
onUnload | onLoad, onShow |
index.wxml file:
<!--index.wxml-->
<view class="container">
<!-- view is equivalent to div-->
<!-- text is an inline view-->
<text>{
{motto} }</text>
<navigator url="/pages/logs/logs" open-type="redirect">Click me to go to the homepage</navigator>
</view>
3. wxml
1. List rendering
Defined in index.js:
Traverse in the index.wxml file: In the map, i is the key, e is the value, wx:key="*this" is the identifier, if not added, an error will be reported
<!--index.wxml-->
<view class="container">
<!-- view is equivalent to div-->
<!-- text is an inline view-->
<text>{
{motto} }</text>
<navigator url="/pages/logs/logs" open-type="redirect">Click me to go to the homepage</navigator>
<view wx:for="{
{cities}}" wx:for- item="e" wx:for-index="i" wx:key="*this">
{
{e}}-{
{i}}
</view>
</view>
2. Conditional rendering
index.wxml file:
<view wx:if="false">Hello</view>
It will be considered true here, because false is just a literal. All text in js except empty characters is true
The correct expression is:
<view wx:if="{ {false}}">Hello</view>
4.image tag
Create a new directory to store pictures:
index.wxml file:
<image src="/asset/1.png"></image>
Five, movable-area and movable-view
index.wxml file:
<movable-area style="width:300px;height:300px;background:yellow">
<movable-view direction="all">
<image src="/asset/1.png" style="width:100px;height:100px"></image>
</movable-view>
</movable-area>
00. A small program page consists of four files, namely:
xxx
xxx.js page logic
xxx.json page configuration
xxx.wxml page structure
xxx.wxss page style
01. Small program framework is composed
of small programs, register a small program through App(), and register a page through Page()
1. Logic layer
1. Register small program
2. Register page
3. Page life cycle
4. Page Routing
5. Modularity
6. API
2. View layer
1.
wxml 2. wxss
3. wxs
wxs is the scripting language of the WeChat applet itself, used for filtering and calculation. wxs can be defined through file or module tags. The file requires .wxs suffix. File
wxs is specially used for wxml pages. If you need to use js scripts in the page, you can use it, but wxs cannot be referenced by other js files
. Development should choose to use js or wxs according to the situation, but most of my development is done in js