文章转载来自: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() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
注意:不要尝试修改页面栈,会导致路由以及页面状态错误。