学习小程序,小程序的生命周期
一、微信小程序中的四种类型的文件
js-------javascript文件
json-------项目配置文件,负责窗口颜色等等
wxml--------类似HTML文件
wxss--------类似CSS文件
在根目录下用app来命名的这四种类型的文件,就是程序入口文件
app.json
必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个做为配置文件入口,你只需要创建这个文件,里面写个大括号就行,以后我们会在这里进行整个对象的全局配置
记录了页面组成,配置了小程序的窗口 背景色,配置导航条样式,配置默认标题
app.js
必须要有这个文件,没有也会报错。但是这个文件创建一下就行,什么都不需要写,以后我们可以在这个文件中监听并处理小程序的生命周期函数,声明全局变量
app.wxss
这个文件不是必须的。它是全局css样式文件
app.wxml
这个文件也不是必须的,而且这个并不是主界面,小程序的主页面是靠在JSON文件中配置来决定的
二、小程序的生命周期
1、小程序分为应用和页面两个部分,小程序的应用周期涉及到三个部分,分别是:应用的生命周期,页面的生命周期,应用的生命周期对页面生命周期的影响
2、应用的生命周期
App()函数用来注册一个小程序,接受一个object参数,其指定小程序的生命周期函数等
app.js管理整个文件的生命周期,在里面添加代码
注:前、后台定义:当用户点击左上角关闭,或者按了Home键离开微信,小程序并没有直接销毁,而是进入了后台,当再次进入微信或再次打开小程序,又会从后台进入前台。只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正销毁
用户首次打开小程序,触发onLunch(全局只触发一次)
小程序初始化完成后,触发onShow方法,监听小程序显示
小程序从前台进入后台,触发onHide方法
小程序从后台进入前台显示,触发onShow方法
小程序后台运行一定时间,或系统资源占用过高,会被销毁
3、页面的生命周期
Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据,生命周期函数,事件处理函数等。
小程序注册完成后加载页面,触发onLoad方法
页面载入后触发onShow方法,显示页面
首次显示页面会触发onReady方法,渲染元素页面和样式
当小程序后台运行或跳转到其他页面时,触发onHide方法
当小程序由后台进入到前台运行,或者重新进入页面时,触发onShow方法
当使用重定向方法wx.redirectTo(OBJECT),或关闭当前页返回上一页时wx.navigateBack(),触发onUnload方法
总结:onLoad页面加载,一个页面只会调用一次;onShow页面显示,每次打开页面都会调用一次;onReady页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互;onHide页面隐藏
由上图可知:小程序由两大线程组成:负责界面的视图线程(view thread)和负责数据、服务处理的服务线程,两者协同工作,完成小程序页面生命周期的调用
视图线程的四大状态:
初始化状态:初始化视图线程所需要的工作,初始化完成后向“服务线程”发送初始化完成信号,然后进入等待状态,等待服务线程提供初始化数据
首次渲染状态:当收到服务线程提供的初始化数据后(json和js中的data数据),渲染小程序界面,渲染完毕后,发送“首次渲染完成信号”给服务线程,并将页面展示给用户
持续渲染状态:此时界面线程继续一直等待“服务线程”通过this.setdata()函数发送来的界面数据,只要收到就重新布局渲染,也因此只要更新数据并发送信号,界面就自动更新
结束状态:页面被回收或者销毁、应用被系统回收、销毁时触发
服务线程的五大状态:
初始化状态:此阶段仅启动服务线程所需的基本的功能,系统的初始化工作完毕,就调用自定义的onLoad和onShow,然后等待视图线程的“视图线程初始化完成”号。onLoad是只会首次渲染的时候执行一次,onShow是每次界面切换都会执行
等待激活状态:接收到视图线程的“视图线程初始化完成”信号后,将初始化数据发送给“视图线程”,等待试图线程完成初次渲染
激活状态:收到视图线程发送来的“首次渲染完成”信号后,就进入激活状态既程序的正常运行状态,并调用自定义的onReady()函数,此状态下就可以通过this.setData()函数发送界面数据给界面线程进行局部渲染,更新页面
后台运行状态:如果界面进入后台,服务线程就进入后台运行状态
结束状态:页面被回收或者销毁、应用被系统回收、销毁时触发
3、应用的生命周期对页面的生命周期的影响
三、事件机制
我们先来看一下小程序的官方文档对事件的定义:
事件是视图层到逻辑层的通信方式
事件可以将用户的行为反馈到逻辑层进行处理
时间可以绑定到组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
事件对象可以携带额外信息
可以看出官方文档主要将事件用于小程序中针对用户交互行为的处理,即视图层到逻辑层的通信,逻辑层收到这些用户行为事件后,可以进行业务处理,然后根据情况反馈或不反馈给用户
总体上来说,小程序的事件机制在工作原理上来讲和HTML DOM的事件机制是一样的,在html中,我们可以通过在html元素上设置如onclick=“clickHandler(event)”的属性来绑定用户的页面点击事件处理函数,而在WXML中,我们为一个组件绑定一个事件处理函数
四、视图层
1、wxml是框架设计的一套标签语言,可以构建出页面的结构
wxml中的动态数据均来自对应Page的data
数据绑定
列表渲染
条件渲染
模板
定义模板:使用name属性作为模板的名字