微信小程序之配置詳解

今天來看一下小程序的常用配置，主要內容如下：

生命週期
頁面跳轉
參數傳遞
小程序配置

生命週期#

小程序啟動後會依次調用 onLaunch、onShow 方法，當小程序處於後台的時候會調用 onHide 方法，出錯的時候會調用 OnError 方法，下面是小程序生命週期方法：

App({

  /**
   * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
   */
  onLaunch: function () {
    console.log("---App-------onLaunch---");
  },

  /**
   * 當小程序啟動，或從後台進入前台顯示，會觸發 onShow
   */
  onShow: function (options) {
    console.log("---App-------onShow---");
  },

  /**
   * 當小程序從前台進入後台，會觸發 onHide
   */
  onHide: function () {
    console.log("---App-------onHide---");
  },

  /**
   * 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
   */
  onError: function (msg) {
    console.log("---App-------onError---");
  }
})

上面是小程序的生命週期，除此之外還有小程序頁面的生命週期，小程序啟動完畢之後，會依次調用小程序頁面的 onLaunch、onShow、onReady 方法，當從本頁面跳轉到其他頁面的時候會調用本頁面的 onHide 方法，下面是小程序頁面的聲明週期方法：

Page({

  /**
   * 生命週期函數--頁面加載
   */
  onLoad: function (options) {
    console.log("---index-------onLaunch---");
  },

  /**
   * 生命週期函數--頁面初次渲染完成
   */
  onReady: function () {
    console.log("---index-------onReady---");
  },

  /**
   * 生命週期函數--頁面顯示
   */
  onShow: function () {
    console.log("---index-------onShow---");
  },

  /**
   * 生命週期函數--頁面隱藏
   */
  onHide: function () {
    console.log("---index-------onHide---");
  },

  /**
   * 生命週期函數--頁面卸載
   */
  onUnload: function () {
    console.log("---index-------onUnload---");
  }
    
  // 其他監聽事件，如頁面上拉、下拉、分享等
  // ...
})

頁面跳轉#

微信小程序提供的頁面跳轉方式常用的介紹如下：

透過 API navigateTo 和 redirectTo 實現頁面之間的跳轉；

//頁面跳轉
click:function(){
    //頁面跳轉：不銷毀當前頁面
    wx.navigateTo({
      url: '../detail/detail',
    })
    //頁面跳轉：銷毀當前頁面跳轉到另一個頁面
    wx.redirectTo({
      url: '../detail/detail',
    })
}

在 wxml 文件中使用 navigator 組件實現頁面之間的跳轉。


<!--對應navigateTo跳轉-->
<navigator url='../detail/detail'  >
    <view class='title'>文章標題2...</view>
</navigator>

<!--對應redirectTo跳轉-->
<navigator url='../detail/detail' redirect >
    <view class='title'>文章標題2...</view>
</navigator>

除此之外，還有幾種頁面跳轉相關的方法，參考如下：

//關閉當前頁面、返回上級頁面或多級頁面
wx.navigateBack(Object object)
//跳轉到tabBar頁面，並關閉其他所有非tabBar頁面
wx.switchTab(Object object)
//關閉所有頁面，打開應用中的某個頁面
wx.reLaunch(Object object)

備註：從非 tabBar 頁面跳轉到 tabBar 頁面使用 navigateTo 和 redirectTo 是不能跳轉的，剛開始沒仔細看文檔，不知道還有 switchTab 這個方法。

參數傳遞#

微信小程序頁面跳轉之間的參數傳遞類似於 web url ，直接將參數使用？和 & 拼接到頁面路徑上即可，然後在目標頁面的 onLoad 方法中從 options 中獲取頁面傳遞的參數，這裡使用 navigateTo 來說明頁面之間參數的傳遞，具體參考如下：

//頁面跳轉
click:function(){
    //在目標頁面對應的url上拼接參數
    wx.navigateTo({
      url: '../detail/detail/?param=1',
    })
}

然後，在目標頁面的 onLoad 方法中獲取參數如下：

/**
* 生命週期函數--頁面加載
*/
onLoad: function (options) {
    //獲取頁面參數
    var value = options.param;
    //將獲取到的頁面參數賦值到變量param上
    this.setData({param:value});
},

這樣就輕鬆獲取到了頁面傳遞的參數了，當然其他頁面跳轉方式傳遞參數也是如此。

小程序配置#

小程序的配置基本都在 app.json 中，常用配置如下：

{
  //App頁面配置，pages數組中第一個為首頁
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  
  //窗口配置
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
 
  //tabBar配置
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/homeH.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/log.png",
        "selectedIconPath": "images/logH.png",
        "text": "日誌"
      }
    ]
  },

  //網絡超時配置
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },

  //開啟Debug
  "debug": true
  
  //更多配置及細節參考官網：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
}

此外，在小程序中配置文件 app.json 中的配置可有某個頁面的自己的 json 配置覆蓋，這也使得小程序頁面更好的客製化，還有單個頁面的樣式文件的配置也會覆蓋 app.wxss 中的配置。

最後，來一張配置好底部導航欄的頁面效果圖如下：