前言:

上一篇文章我们介绍了.wxml和.wxss文件，这篇文章对js文件进行详细的讲解，首先贴上一个简单的js文件：

示例代码：

//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.

},

onShareAppMessage:function(){

// return custom share data when user share.

},

// Event handler.

viewTap:function(){

this.setData({

text:'Set some data for updating view.'

})

},

customData: {

hi:'MINA'

}

})

在之前解析的app.js文件中，里面又一个App()函数 而在每个界面的js文件中有一个Page()函数。

Page

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

object 参数说明：

属性类型描述

dataObject页面的初始数据

onLoadFunction生命周期函数--监听页面加载

onReadyFunction生命周期函数--监听页面初次渲染完成

onShowFunction生命周期函数--监听页面显示

onHideFunction生命周期函数--监听页面隐藏

onUnloadFunction生命周期函数--监听页面卸载

onPullDownRefreshFunction页面相关事件处理函数--监听用户下拉动作

onReachBottomFunction页面上拉触底事件的处理函数

onShareAppMessageFunction用户点击右上角分享

其他Any开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用this可以访问

初始化数据 data

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

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

示例代码： 使用双大括号包裹起来

{{text}}{{array[0].msg}}

Page({

data: {

//data里面的数据类型只有这5中 最后一种object最常用 一般的json格式就是这样的。 所以在获取服务器数据的时候直接赋值给 object（但是记得定义哦。）

text:'init data', //字符串

array: [{msg:'1'}, {msg:'2'}],//数组

age：18,  //数字

hidden: false,  //布尔

object: {

name: 'yuanxiao',

names: [

{ id: 1, age: 2 },

{ id: 2, age: 12 }]

//对象 注意这里面包含 其他任何的类型使用的时候只需要使用 {{ object.names }}

}

})

生命周期函数

onLoad: 页面加载

一个页面只会调用一次。

接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 页面显示

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

onReady: 页面初次渲染完成

一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

onHide: 页面隐藏

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

onUnload: 页面卸载

当redirectTo或navigateBack的时候调用。

页面相关事件处理函数

onPullDownRefresh: 下拉刷新

监听用户下拉刷新事件。

需要在config的window选项中开启enablePullDownRefresh。

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onShareAppMessage: 用户分享

只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮

用户点击分享按钮的时候会调用

此事件需要 return 一个 Object，用于自定义分享内容

自定义分享字段

字段说明默认值

title分享标题当前小程序名称

path分享路径当前页面 path ，必须是以 / 开头的完整路径

示例代码

Page({

onShareAppMessage:function(){

return{

title:'自定义分享标题',

path:'/page/user?id=123'

}

}

})

事件处理函数

除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。

示例代码：

click me

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 中预先定义。

示例代码：

{{text}}Change normal data{{array[0].text}}Change Array data{{object.text}}Change Object data{{newField.text}}Add new data

//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'

})

}

})

最后还是提醒一个关于setData的细节，一般的都是：this.setData({  text:"cyx"  })

但是这里有个问题就是this的作用域：

this的作用域在Page()函数内部 可以来看看下面的这个demo：

wxml文件：

{{text}}

修改text信息

js文件：

bind:function(){

wx.getSystemInfo({

success: function(res) {

this.setData({

text:res.model

})

}

})

}

这个看起来其实是没有问题的，但是当我们点击这个button的时候，报错了：

但是为什么会说 this.setData没有定义呢？

首先这是在wx.getSystemInfo内部的回调方法 那么这个this就会代表这个回调方法，但是这个回掉方法中并没有setData这个方法，

所以就出现了上面的方法未定义：

正确的写法是：

我们首先把this赋值给that，在wx.getSystemInfo内部，我们使用that 那么就不会出现超出this的作用域范围了。

页面栈

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

路由方式页面栈表现

初始化新页面入栈

打开新页面新页面入栈

页面重定向当前页面出栈，新页面入栈

页面返回页面不断出栈，直到目标返回页，新页面入栈

Tab 切换页面全部出栈，只留下新的 Tab 页面

页面的路由

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

路由方式触发时机路由后页面路由前页面

初始化小程序打开的第一个页面onLoad，onShow

打开新页面调用 APIwx.navigateTo或使用组件onLoad，onShowonHide

页面重定向调用 APIwx.redirectTo或使用组件onLoad，onShowonUnload

页面返回调用 APIwx.navigateBack或用户按左上角返回按钮onShowonUnload（多层页面返回每个页面都会按顺序触发onUnload）

Tab 切换调用 APIwx.switchTab或使用组件或用户切换 Tab

各种情况请参考下表

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

当前页面路由后页面触发的生命周期（按顺序）

A               A                                     Nothing happend

A               B                                     A.onHide(), B.onLoad(), B.onShow()

A                B（再次打开）               A.onHide(), B.onShow()

C                 A                                   C.onUnload(), A.onShow()

C                 B                                    C.onUnload(), B.onLoad(), B.onShow()

D                  B                                    D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()

D（从分享进入）A                             D.onUnload(), A.onLoad(), A.onShow()

D（从分享进入）B                                D.onUnload(), B.onLoad(), B.onShow()