小程序的生命周期

这里讲一下小程序的生命周期，看到这里做过安卓的人员可能就比较熟悉这个概念了。

小程序也有自己的生命周期，不过要比安卓中Activity的生命周期少的多，下面我们简单的看一下小程序的生命周期（这里还是对比安卓）。

---

App的生命周期:

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

初始化 onLaunch() ：这里是小程序的开始，相当于安卓的onCreate(),如果小程序没有被销 毁，则不会再调用此方法。

显示 onShow() : 这里是小程序开始显示，相当于安卓onstart——onresume，这时候小程序显示到界面上，并获取到焦点。当小程序从后台显示到前台是，会重新调用次方法。

隐藏 onHide： 小程序进入后台完全不可见时，调用此方法，相当于安卓中得pause-stop

当小程序进入后台，内存不足时，可能会被杀死。

---

page 作用是注册一个页面(Activity)接收一个参数，处理其中的初始化，生命周期，事件函数等、

官方文档：

data	Object	页面的初始数据
onLoad	Function	生命周期函数--监听页面加载
onReady	Function	生命周期函数--监听页面初次渲染完成
onShow	Function	生命周期函数--监听页面显示
onHide	Function	生命周期函数--监听页面隐藏
onUnload	Function	生命周期函数--监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数--监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
其他	Any	开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this可以访问

这里我们可以看到 ，除了我们常见的一下监听外，还增加了监听用户下拉和上拉的手势识别，相当于对安卓的onTouch事件做了进一步的封装，我们可以很方便的实现下拉刷新和上拉加载的操作。

1：初始化数据

page中的data为程序初始化的操作，可以将我们定义在WXML中的视图进行数据的绑定，格式：

String，int，boolean， object，list等

下面我们通过一个例子看一下是如何初始化的，首先我们在WXML中定义一个简单的text文本和一个按钮，文本不做任何赋值操作。这里的{{name}}，name可以理解为安卓中的id，代表了这个page下id为name的组件,但不同的是：小程序的"ID"并不是唯一的，如果我们定义多个组件为同一个ID，那么修改的则是所有相同ID的组件。

运行看效果：

我们发现 text并没有显示出来，下面我们通过page的data进行数据的初始化

这里通过name："xiaolu"，进行赋值，相比安卓省去了很多繁琐的findViewById的操作，运行结果如下：

---

2 生命周期

官方说法：

onLoad: 页面加载

一个页面只会调用一次。

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

onShow: 页面显示

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

onReady: 页面初次渲染完成

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

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

onHide: 页面隐藏

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

onUnload: 页面卸载

当redirectTo或navigateBack的时候调用。

页面相关事件处理函数

onPullDownRefresh: 下拉刷新

监听用户下拉刷新事件。

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

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

事件处理函数

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

官方图解：

以上的事件我们都可以很容易理解，下面我们通过一个例子去测试一下在小程序中如何实现事件的监听

，我们在上一个例子中点击按钮，改变text中的值,首先在WXML中定义按钮的监听事件也可以说是事件绑定，当我们点击时，会在当前page中执行定义的事件处理函数。

<button bindtap="clickChangeText">点击改变文字</button>

我们在js中定义事件的处理函数：

Page({

data:{

name:'xiaolu'

},

clickChangeText:function(){

this.setData({

name:"文字已经改变"

})

},

运行程序：

代码的第三行，初始化了text为“xiaolu”，当我们点击按钮是，调用this.setData(),来改变文本的值

注意：这里的Data为大写，如果不调用setData直接去 执行 name：”文字已经改变“，是不生效的。

下面是点击后的截图：