微信小程序的双线程模型,生命周期和事件(捕获和冒泡)
1 在渲染层将wxml文件与wxss文件转成js对象,也就是虚拟的dom
2 逻辑层生成数据,把数据与虚拟的dom相结合,得到真实的dmo,然后在交给渲染层渲染
3 当有数据变化的时候,逻辑层负责更新数据,js对象发生改变,这种改变方式采用的是diff算法进行比较,只改变变化的部分
4 将更新的数据,进行反馈,再次得到虚拟的dmo中,从而
更新页面。
diff算法:
Diff算法的作用是用来计算出 **Virtual DOM** 中被改变的部分,然后针对该部分进行原生DOM操作,而不用重新渲染整个页面。
小程序的启动流程:
注意:app.json文件中只会产生一个全局的app对象,先执行app中的生命周期函数,然后加载自定义组件,然后开始加载页面的json配置文件,产生对象,通过双线程模型来渲染页面,并且开始执行页面的生命周期
小程序中app.js中的生命周期
//app.js,小程序全局只有一个App对象
// 下文中所说的后台是指:用户将小程序切换到手机的后台运行。这种操作我们叫做从前台切换到后台。和我们平时开发中的后台没有关系
//下文中所说的前台是指:用户将小程序重手机后台运行,调用到用户手机的显示界面,我们叫做从后台切换到前台。
App({
/*
当小程序初始话完成,会触发onlaunch(全局只触发一次),onlaunch在手机后台到前台切换是不会执行的。如果
要要他再次执行,除非在手机中关闭(关闭不是切换到后台,而是直接删除小程序的后台运行)小程序,然后重新打开,才能执行,
*/
onLaunch: function () {
console.log("小程序的初始话:onlaunch")
},
/**
* 当小程序启动,或者是从后台进入到前台的时候,会执行onshow,
* 那我们可以通过这个option中的scene值来判断不同进入场景
{path: "pages/test/test", query: {…}, scene: 1001, shareTicket: undefined, referrerInfo: {…}}
path: "pages/test/test"
query: {}
referrerInfo: {}
scene: 1001
shareTicket: undefined
__proto__: Object
*/
onShow:function(option){
console.log("小程序onshow,:onShow",option)
},
/*小程序重前台进入到后台的时候,会触发:onHide*/
onHide:function(){
console.log("小程序重前台进入到后台的时候,会触发:onHide")
},
/**可以在全局使用 */
globalData: {
userInfo: null
}
})
执行App.js生命周期的时候以及在整个App对象我们可以做什么?
1 在注册app时候,我们可以通过onshow来判断用户进入小程序的场景
2 我们可以在生命周期函数中,做一些数据请求。
3 我们可以在app中设置一个全局的对象,让所有的页面都可以使用,比如上面的globalData
小程序的页面的生命周期
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:'own is sb',
name:"tank",
num :12,
num1:1,
flag:false,
name_list:[{"name":"jason",love:"piao"},{name:"tank",love:"own"},{name:"egon",love:"洗脚"}],
tank:{name:"tank",love:"own"},
color:"blue"
},
/**
* 生命周期函数--监听页面加载,页面如果不关闭,这个onload只执行一次
*/
onLoad: function (options) {
console.log("onLoad")
},
/**
* 生命周期函数--监听页面显示,页面从底下切到上面的时候也会执行
*/
onShow: function () {
console.log("onShow")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("onHide")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log("onHide")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("onPullDownRefresh")
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("onReachBottom")
},
})// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:'own is sb',
},
/**
* 生命周期函数--监听页面加载,页面如果不关闭,这个onload只执行一次
*/
onLoad: function (options) {
console.log("onLoad")
},
/**
* 生命周期函数--监听页面显示,页面从底下切到上面的时候也会执行
*/
onShow: function () {
console.log("onShow")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("onHide")
},
/**
* 生命周期函数--监听页面卸载
*/