这里讲一下小程序的生命周期,看到这里做过安卓的人员可能就比较熟悉这个概念了。
小程序也有自己的生命周期,不过要比安卓中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:”文字已经改变“,是不生效的。
下面是点击后的截图: