banner
jzman

jzman

Coding、思考、自觉。
github

Detailed explanation of WeChat Mini Program configuration

Today, let's take a look at the common configurations of mini programs. The main contents are as follows:

  1. Lifecycle
  2. Page navigation
  3. Parameter passing
  4. Mini program configuration

Lifecycle#

After the mini program is launched, it will sequentially call the onLaunch and onShow methods. When the mini program is in the background, the onHide method will be called. When there is an error, the onError method will be called. The following are the lifecycle methods of the mini program:

App({

  /**
   * This method is called when the mini program is initialized (only called once globally)
   */
  onLaunch: function () {
    console.log("---App-------onLaunch---");
  },

  /**
   * This method is called when the mini program starts or enters the foreground from the background
   */
  onShow: function (options) {
    console.log("---App-------onShow---");
  },

  /**
   * This method is called when the mini program enters the background from the foreground
   */
  onHide: function () {
    console.log("---App-------onHide---");
  },

  /**
   * This method 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, it will sequentially call the onLaunch, onShow, and onReady methods of the mini program pages. 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 method - Called when page load
   */
  onLoad: function (options) {
    console.log("---index-------onLaunch---");
  },

  /**
   * Lifecycle method - Called when page is ready
   */
  onReady: function () {
    console.log("---index-------onReady---");
  },

  /**
   * Lifecycle method - Called when page show
   */
  onShow: function () {
    console.log("---index-------onShow---");
  },

  /**
   * Lifecycle method - Called when page hide
   */
  onHide: function () {
    console.log("---index-------onHide---");
  },

  /**
   * Lifecycle method - Called when page is unloaded
   */
  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:

  1. Use the navigateTo and redirectTo APIs to navigate between pages;
// Page navigation
click:function(){
    // Page navigation: does not destroy the current page
    wx.navigateTo({
      url: '../detail/detail',
    })
    // Page navigation: destroys the current page and navigates to another page
    wx.redirectTo({
      url: '../detail/detail',
    })
}
  1. Use the navigator component in the wxml file to navigate between pages.

<!-- Corresponds to navigateTo navigation -->
<navigator url='../detail/detail'  >
    <view class='title'>Article Title 2...</view>
</navigator>

<!-- Corresponds to redirectTo navigation -->
<navigator url='../detail/detail' redirect >
    <view class='title'>Article Title 2...</view>
</navigator>
  1. In addition to the above, there are several other page navigation methods, as follows:
// Close the current page, return to the previous page or multiple pages
wx.navigateBack(Object object)
// Navigate 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 URLs. 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 parameters to the corresponding url of the target page
    wx.navigateTo({
      url: '../detail/detail/?param=1',
    })
}

Then, retrieve the parameters in the onLoad method of the target page as follows:

/**
* Lifecycle method - Called when page load
*/
onLoad: function (options) {
    // Get the page parameter
    var value = options.param;
    // Assign the obtained page parameter 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 the app.json file. 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 mode
  "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 a mini program can be overridden by the json configuration of a specific page, which allows for better customization of 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 configuration:

image

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.