微信小程序学习 - 程序、页面注册及生命周期

文章转载来自：http://blog.csdn.net/hedong_77/article/details/54667827

=============================================

程序注册

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

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

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

App({
  onLaunch: function() { 
    // 做一些初始化操作
  },
  onShow: function() {
      // 当页面显示的时候可以做一些操作
  },
  onHide: function() {
      // 当页面隐藏的时候可以做一些操作
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

那怎么获取APP实例呢，在相应的Page里面通过getApp()获取，如下：

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

注意：

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

页面注册

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

object 参数说明： 

示例代码：

// pages/index/main.js

var app = getApp();

Page({
  data: {

    getData: app.data

  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  onPullDownRefresh:function(){
    //下拉操作

  },
   onReachBottom: function() {
    //上拉操作
  },
  onShareAppMessage: function () {
   // 右上角分享.
  }

})

初始化数据 
初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。

渲染层可以通过 WXML 对数据进行绑定。

示例代码：

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

接下来看看Page的周期函数，Page总共有五个生命周期函数：

1.onLoad: 页面加载

• 一个页面只会调用一次。
• 接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

2.onShow: 页面显示

• 每次打开页面都会调用一次。

3.onReady: 页面初次渲染完成

• 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

4.onHide: 页面隐藏

• 当navigateTo或底部tab切换时调用。

5.onUnload: 页面卸载

• 当redirectTo或navigateBack的时候调用。

可参考下图： 

页面的路由

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

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）： 

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

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

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