Dual-thread models
1.在渲染层将wxml文件与wxss文件转成js对象，也就是虚拟的dom
2.逻辑层生成数据，把数据与虚拟的dom相结合，得到真实的dom，然后再交给渲染层渲染
3.当有数据变化的时候，逻辑层负责更新数据，js对象发生改变，这种改变方式采用diff算法进行比较，只改变变化的部分
4.将更新的数据，进行反馈，再次到虚拟的dom中，从而更新页面The image shows:
Applet app.js in the life cycle
// app.js，小程序全局只有一个App对象
// 下文所说的后台指的是：用户将小程序切换到手机的后台运行，称之为从前台切换带后台运行，与平时开发所说的后台不同
// 下文所说的前台是指：用户将小程序从手机后台运行，调用到用户手机的显示界面，称之为从后台切换到前台运行
//app.js
App({
// 当小程序初始化完成，会触发onlauch，只执行一次 在手机后台到前台切换是不会执行的，如果要再次执行，除非在手机中直接将这个程序关闭
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
console.log("onlaunch")
},
// 当小程序启动或者是从后台进行到前台的时候，会执行onshow,我们可以通过这个option中的scene值来判断不同的进去场景
onShow:function(option){
console.log("onshow",option)
},
// 当小程序从前台进去后台的时候，会触发onhide
onHide:function(){
console.log("onhide")
},
// 可以在全局使用
globalData: {
userInfo: null
}
})
When executed App.js life cycle and what we can do throughout the app objects?
1. Registered app, we can determine the user enters the scene applet by onshow
2. We can function in the life cycle, do some data request
3. We can set a global target in the app, it can be used globally, such as globalData
Page applet lifecycle
Graphic:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载,页面如果不关闭，这个onload只执行一次
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成,这个是真实的dom要渲染的时候，就会执行
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示，页面从底下切换带上面的时候执行
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作，如果你要监听这个动作，然后触发底下函数，必须"enablePullDownRefresh"：true 配置成可以刷新
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数.，如果要触发，必须页面不够一页显示
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
Global drop-down configuration page:
Partial-page pull-down configuration:
Object page in the page in which things can be done?
1. In the life cycle of the function, requesting data from the server
2. Initialize the data in data, used to wxml
3. monitor wxml event, bind the corresponding event
4. The Listener page pull-up, pull-down, etc.