Article directory
Register applet
App function introduction
Each applet needs to call the App function in app.js Register the applet instance
When registering, you can bind the corresponding life cycle function;
In the life cycle function, execute the corresponding code;
What can be put in the App function can check the documentation, link: https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
Let's think: what do we generally do when registering an app?
1. Determine the entry scene of the applet
2. Monitor the life cycle function and execute the corresponding business logic in the life cycle, such as logging in or requesting network data in a life cycle function;
3. Because there is only one App() instance and it is globally shared (singleton object), we can put some shared data here;
The parameters of the App function are as follows
App function role
Function 1: Judging the opening scene
There are many opening scenarios for the applet :
Common opening scenarios: opening in a group chat session, opening in the applet list, opening a WeChat scan, opening another applet, etc.
There are a lot of opening scenarios for Mini Programs, which are listed in the official documentation: https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html
We determine the scene through the life cycle function
onLaunch: Monitor the initialization of the applet, it will be executed when the applet is initialized, and it will only be executed once globally
onShow: When the applet starts or switches to the foreground, an onShow will be executed (so this life cycle is generally used to determine the scene the applet enters)
onHide: OnHide will be executed when leaving the applet and switching to the backgroundIn the onLaunch and onShow lifecycle callback functions, there will be options parameters, options is an object, the object has a scene value, and the scene value is the corresponding scene ID;
App({
onLaunch(options) {
console.log(options);
},
onShow(options) {
console.log(options);
},
onHide() {
console.log("onHide");
}
})
Function 2: Define global data
There is no state management tool like Vuex and Pinia in the applet, so we can define some important global data in the App function
Define the data of the global App in Object. Generally, we name the variable that this data saves as globalData
However, the data defined in the App is not responsive, and usually stores some fixed data
App({
// 定义全局的App数据
globalData: {
token: "chenyqtoken",
userInfo: {
nickName: "why",
level: 99
}
}
})
The defined data can be accessed in any other page :
Page({
// 页面的onLoad生命周期, 表示页面已加载
onLoad() {
// 在onLoad获取共享的数据: App实例中的数据
// 1.获取App对象实例
const app = getApp()
// 2.从app实例对象获取数据
const token = app.globalData.token
const info = app.globalData.userInfo
console.log(token, info);
}
})
In other pages, if you want to display the data on the page, you need to store the acquired data in the data before it can be displayed on the page
Page({
data: {
token: "",
userInfo: {
}
},
onLoad() {
const app = getApp()
const token = app.globalData.token
const userInfo = app.globalData.userInfo
console.log(token, userInfo);
// 将获取到的数据存放到data中
this.setData({
token,
userInfo
})
}
})
Function 3: Lifecycle function
In the life cycle function, complete the initialization operation after the application starts
For example, the login operation (which will be explained in detail later) is generally performed in onLaunch;
For example, read local data (similar to token, and then save it globally for easy use)
For example, to send a network request, the request here is generally the data required by the entire application;
demo code
App({
globalData: {
token: "",
userInfo: {
}
},
onLaunch(options) {
// 0.读取本地的数据
const token = wx.getStorageSync("token")
const userInfo = wx.getStorageSync("userInfo")
console.log(token);
console.log(userInfo);
// 1.进行登录操作(逻辑判断), 当本地没有数据时, 表示用户没有登录
if (!token || !userInfo) {
console.log("登录的一堆操作");
// 登录成功后将数据保存到本地
wx.setStorageSync("token", "chenyatoken")
wx.setStorageSync("userInfo", {
nickName: "chenyq", level: 99})
}
// 2.将获取到的数据保存到globalData中
this.globalData.token = token
this.globalData.userInfo = userInfo
// 3.发送网络请求
wx.request({
url: 'url' })
}
})
registration page
Basic operations in the Page function
Each page in the applet has a corresponding js file, in which the Page function is called to register the page example
When registering a page, you can bind initialization data, lifecycle callbacks, event handlers, etc.
Official documentation of parameters: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
Let's think about it: What do we generally need to do when registering a Page page?
1. Send network requests in the life cycle function to obtain data from the server, usually in the onLoad life cycle;
Page({
// 作用一: 发送网络请求, 请求数据
onLoad() {
// 一般在onLoad钩子函数中发送网络请求
wx.request({
url: 'url', })
}
})
2. Initialize some local data so that it can be easily referenced and displayed by wxml;
Page({
data: {
// 初始化一些本地的固定数据
conter: 100
}
})
3. Monitor the events in wxml and bind the corresponding event functions;
Page({
// 绑定wxml中产生事件后的回调函数
onBtnClick() {
console.log("监听事件点击");
}
})
4. Other monitoring (such as page scrolling, pull-down refresh, pull-up loading more, etc.);
Page({
// 监听下拉刷新
onPullDownRefresh() {
console.log("onPullDownRefresh");
},
// 监听上拉加载
onReachBottom() {
console.log("onReachBottom");
},
// 监听页面滚动
onPageScroll() {
console.log("onPageScroll");
}
})
Page life cycle
You don't need to fully understand the following content right away, but it will help later.
The following diagram illustrates the life cycle of a page Pageinstance .
The execution order of the page page life cycle is as follows
Page({
onLoad() {
console.log("onLoad");
},
onShow() {
console.log("onShow");
},
onReady() {
console.log("onReady");
},
onHide() {
console.log("onHide");
},
onUnload() {
console.log("onUnload");
}
})