微信小程序注册程序和页面与模块化


// 官方开发文档
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html?t=20161122

* 注册程序

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等

  • onLaunch 生命周期函数 -- 监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  • onShow 生命周期函数 -- 监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
  • onHide 生命周期函数 -- 监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
  • 其它 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问
App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  globalData: 'I am global data'
})

前台、后台定义:
    当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;
    当再次进入微信或再次打开小程序,又会从后台进入前台。

只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。


获取到小程序实例
我们提供了全局的 getApp() 函数,可以获取到小程序实例。

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意:
  • App() 必须在 app.js 中注册,且不能注册多个。
  • 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
  • 不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成。
  • 通过 getApp() 获取实例之后,不要私自调用生命周期函数。

* 注册页面

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

  • data 类型(Object) 页面的初始数据
  • onLoad 类型(Function) 生命周期函数--监听页面加载
  • onReady 类型(Function) 生命周期函数--监听页面初次渲染完成
  • onShow 类型(Function) 生命周期函数--监听页面显示
  • onHide 类型(Function) 生命周期函数--监听页面隐藏
  • onUnload 类型(Function) 生命周期函数--监听页面卸载
  • onPullDownRefresh 类型(Function) 页面相关事件处理函数--监听用户下拉动作
  • onReachBottom 类型(Function) 页面上拉触底事件的处理函数
  • 其他 类型(Any) 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问
//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

* 初始化数据

初始化数据将作为页面的第一次渲染。

data 将会以 JSON 的形式由逻辑层传至渲染层, 所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。
渲染层可以通过 WXML 对数据进行绑定。
<view></view>
<view></view>
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

* 生命周期函数

  • onLoad: 页面加载
    • 一个页面只会调用一次。
    • 接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
  • onShow: 页面显示
    • 每次打开页面都会调用一次。
  • onReady: 页面初次渲染完成
    • 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
    • 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
  • onHide: 页面隐藏
    • 当navigateTo或底部tab切换时调用。
  • onUnload: 页面卸载
    • 当redirectTo或navigateBack的时候调用。

* 页面相关事件处理函数

  • onPullDownRefresh: 下拉刷新
    • 监听用户下拉刷新事件。
    • 需要在config的window选项中开启enablePullDownRefresh。
    • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

* 事件处理函数(事件绑定)

除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。
在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。
<view bindtap="viewTap"> click me </view>
Page({
  viewTap: function() {
    console.log('view tap')
  }
})

* Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。

注意:

* 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
* 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
setData() 参数格式:

接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活,以数据路径的形式给出
如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。
<!--index.wxml-->
<view></view>
<button bindtap="changeText"> Change normal data </button>
<view></view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view></view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view></view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

* getCurrentPages()

函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意:不要尝试修改页面栈,会导致路由以及页面状态错误。

页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:

  • 初始化 新页面入栈
  • 打开新页面 新页面入栈
  • 页面重定向 当前页面出栈,新页面入栈
  • 页面返回 页面不断出栈,直到目标返回页,新页面入栈
  • Tab 切换 当前页面出栈,新页面入栈

* 页面的路由

在小程序中所有页面的路由全部由框架进行管理,对于路由的触发方式以及页面生命周期函数如下:

  • 初始化 小程序打开的第一个页面 onLoad,onShow
  • 打开新页面 调用 API wx.navigateTo 或使用组件 onLoad,onShow onHide
  • 页面重定向 调用 API wx.redirectTo 或使用组件 onLoad,onShow onUnload
  • 页面返回 调用 API wx.navigateBack或用户按左上角返回按钮 onShow onUnload
  • (多层页面返回每个页面都会按顺序触发onUnload)
  • Tab切换 多 Tab 模式下用户切换 Tab 第一次打开 onLoad,onshow;否则 onShow onHide

* 文件作用域

在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置,如:

// app.js
App({
  globalData: 1
})
// a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)

* 模块化

我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

需要注意的是:

exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。
所以我们更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。
// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中,使用 require(path) 将公共代码引入

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})