小程序配置、注册及生命周期说明

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。详情可查看小程序全局配置

{
  "pages": [ //页面路径列表
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": { //全局的默认窗口表现
    "navigationBarTitleText": "我的小程序" //导航栏标题文字内容
  },
  "tabBar": { //底部 tab 栏
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": { //各类网络请求的超时时间，单位均为毫秒
    "request": 10000, //wx.request 的超时时间
    "downloadFile": 10000 //wx.downloadFile 的超时时间
  }
}

单页面配置，查看更多配置

页面中配置项会覆盖 app.json 的 window 中相同的配置项

{
  "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色
  "navigationBarTextStyle": "black", //导航栏标题颜色，仅支持 black / white
  "navigationBarTitleText": "微信接口功能演示", //导航栏标题文字内容
  "backgroundColor": "#eeeeee", //窗口的背景色
  "backgroundTextStyle": "light" //下拉 loading 的样式，仅支持 dark / light
}

注册小程序

// app.js
App({ //注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等
  onLaunch (options) { //小程序初始化完成时触发，全局只触发一次
    // Do something initial when launch.
  },
  onShow (options) { //小程序启动，或从后台进入前台显示时触发
    // Do something when show.
  },
  onHide () { //小程序从前台进入后台时触发
    // Do something when hide.
  },
  onError (msg) { //小程序发生脚本错误或 API 调用报错时触发
    console.log(msg)
  },
  globalData: { // 全局变量
     userInfo: '',
     apiUrl: ''
  }
})

其他页面使用全局变量

const app = getApp()
const baseUrl = app.globalData.apiUrl

注册页面及生命周期介绍

1.简单的页面可以使用 Page() 进行构造

2.但对于复杂的页面， Page 构造器可能并不好用。可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面

一、使用Page 构造器注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

二、使用Component 构造器构造页面

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})