微信小程序之配置详解

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

生命周期
页面跳转
参数传递
小程序配置

生命周期#

小程序启动后会依次调用 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 中的配置。

最后，来一张配置好底部导航栏的页面效果图如下：