Today, let's take a look at the common configurations of mini-programs, the main content is as follows:
- Lifecycle
- Page navigation
- Parameter passing
- Mini-program configuration
Lifecycle#
After the mini-program is launched, the onLaunch and onShow methods will be called in order. When the mini-program is in the background, the onHide method will be called. When an error occurs, the onError method will be called. The following are the lifecycle methods of the mini-program:
App({
/**
* This function is called when the mini-program is initialized, only called once globally
*/
onLaunch: function () {
console.log("---App-------onLaunch---");
},
/**
* This function is called when the mini-program starts or enters the foreground from the background
*/
onShow: function (options) {
console.log("---App-------onShow---");
},
/**
* This function is called when the mini-program enters the background from the foreground
*/
onHide: function () {
console.log("---App-------onHide---");
},
/**
* This function is called when a script error occurs or an API call fails, and it includes the error message
*/
onError: function (msg) {
console.log("---App-------onError---");
}
})
The above is the lifecycle of the mini-program. In addition to this, there is also the lifecycle of the mini-program pages. After the mini-program is launched, the onLaunch, onShow, and onReady methods of the mini-program pages will be called in order. When navigating from this page to another page, the onHide method of this page will be called. The following are the lifecycle methods of the mini-program pages:
Page({
/**
* Lifecycle function--Called when page load
*/
onLoad: function (options) {
console.log("---index-------onLaunch---");
},
/**
* Lifecycle function--Called when page is ready
*/
onReady: function () {
console.log("---index-------onReady---");
},
/**
* Lifecycle function--Called when page show
*/
onShow: function () {
console.log("---index-------onShow---");
},
/**
* Lifecycle function--Called when page hide
*/
onHide: function () {
console.log("---index-------onHide---");
},
/**
* Lifecycle function--Called when page unload
*/
onUnload: function () {
console.log("---index-------onUnload---");
}
// Other event listeners, such as page pull-up, pull-down, sharing, etc.
// ...
})
Page Navigation#
The commonly used page navigation methods provided by WeChat mini-programs are as follows:
- Use the API navigateTo and redirectTo to navigate between pages;
//Page navigation
click:function(){
//Page navigation: does not destroy the current page
wx.navigateTo({
url: '../detail/detail',
})
//Page navigation: destroy the current page and navigate to another page
wx.redirectTo({
url: '../detail/detail',
})
}
- Use the navigator component in the wxml file to navigate between pages.
<!--Corresponding to navigateTo navigation-->
<navigator url='../detail/detail' >
<view class='title'>Article Title 2...</view>
</navigator>
<!--Corresponding to redirectTo navigation-->
<navigator url='../detail/detail' redirect >
<view class='title'>Article Title 2...</view>
</navigator>
- In addition to the above, there are several other methods related to page navigation, as follows:
//Close the current page, return to the previous page or multiple levels of pages
wx.navigateBack(Object object)
//Jump to a tabBar page and close all other non-tabBar pages
wx.switchTab(Object object)
//Close all pages and open a specific page in the application
wx.reLaunch(Object object)
Note: It is not possible to navigate from a non-tabBar page to a tabBar page using navigateTo and redirectTo. At first, I didn't read the documentation carefully and didn't know that there is a switchTab method.
Parameter Passing#
The parameter passing between pages in WeChat mini-programs is similar to web URL. Simply concatenate the parameters using "?" and "&" to the page path, and then retrieve the passed parameters from the options in the onLoad method of the target page. Here is an example of parameter passing between pages using navigateTo:
//Page navigation
click:function(){
//Concatenate the parameters to the url of the target page
wx.navigateTo({
url: '../detail/detail/?param=1',
})
}
Then, retrieve the parameters in the onLoad method of the target page:
/**
* Lifecycle function--Called when page load
*/
onLoad: function (options) {
//Get the page parameters
var value = options.param;
//Assign the obtained page parameters to the variable "param"
this.setData({param:value});
},
This way, you can easily get the parameters passed by the page. Of course, the same applies to passing parameters between pages using other page navigation methods.
Mini-program Configuration#
Most of the configurations of a mini-program are in app.json, the commonly used configurations are as follows:
{
//App page configuration, the first page in the "pages" array is the home page
"pages":[
"pages/index/index",
"pages/logs/logs"
],
//Window configuration
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
//tabBar configuration
"tabBar": {
"color": "#999999",
"selectedColor": "#000000",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/home.png",
"selectedIconPath": "images/homeH.png",
"text": "Home"
},
{
"pagePath": "pages/logs/logs",
"iconPath": "images/log.png",
"selectedIconPath": "images/logH.png",
"text": "Logs"
}
]
},
//Network timeout configuration
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
//Enable Debug
"debug": true
//For more configurations and details, please refer to the official website: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
}
In addition, the configurations in the app.json file of the mini-program can be overridden by the json configuration of a specific page, which allows for better customization of the mini-program pages. The configuration of the style file of an individual page will also override the configuration in app.wxss.
Finally, here is an example of a page with a bottom navigation bar: