小程序的生命周期

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

程序设计中的函数(方法)的生命周期

程序设计中的函数(方法)的生命周期 在笔者看来,函数是人类学术史上最重要的发明之一。回想一下,从小学到大学,所学过的数学是不是就是各种函数及各种函数的变化和各种变化的函数?其实,在很多领域中,函数都...

IOS应用程序生命周期&启动周期函数

—程序的生命周期         a.程序的生命周期是指应用程序启动到应用程序结束整个阶段的全过程         b.每一个IOS应用程序都包含一个UIApplication对象,IOS系统通过...

android_Activity的生命周期函数

mark

微信小程序把玩(五)页面生命周期

这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写。以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只...

教你理解微信小程序的生命周期和运行原理

写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决。小助君公众号带你学习小程序的生命周期和运行原理。小程序由两大线程组成:负责界面的线程(view thread)和服务线程...
  • tsr106
  • tsr106
  • 2016年11月06日 10:29
  • 6375

for循环的简介及break和continue的区别

1.for循环 for循环是更加简洁的循环语句,大部分情况下,for循环可以代替while循环、do-while循环。 for循环的格式为: for( 初始语句  ; 执行条件  ; 增...

java组件和容器

Java的图形用户界面的最基本组成部分是组件(Component),组件是一个可以以图形化的方式显示在屏幕上并能与用户进行交互的对象,例如一个按钮,一个标签等。组件不能独立地显示出来,必须将组件放在一...

小程序-待发

微信小程序开发实战准备课程概要 微信小程序基本介绍 开发环境及工具的安装配置 微信小程序的设计规范 微信小程序基本结构分析 WXML和WXSS语法规范 微信小程序API使用 微信小程序访问网络资源 完...

break与continue的用法区别

一般说来,程序进入循环体后在下次循环判断之前执行循环体里的所有语句,break和continue语句可以终止循环或忽略某些循环。 break: 此语句导致程序终止包含它的循环,并进行程序的下一阶段(...

微信小程序的生命周期实例演示 —— 微信小程序教程系列(2)

上篇教程 微信小程序的文件结构 —— 微信小程序教程系列(1) 微信小程序的生命周期函数有2个 一个是App的生命周期 另一个是Page的生命周期 App的生命周期 示例:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:小程序的生命周期
举报原因:
原因补充:

(最多只允许输入30个字)