Les modèles à double filetage
1.在渲染层将wxml文件与wxss文件转成js对象,也就是虚拟的dom
2.逻辑层生成数据,把数据与虚拟的dom相结合,得到真实的dom,然后再交给渲染层渲染
3.当有数据变化的时候,逻辑层负责更新数据,js对象发生改变,这种改变方式采用diff算法进行比较,只改变变化的部分
4.将更新的数据,进行反馈,再次到虚拟的dom中,从而更新页面
L'image montre:
Applet app.js dans le cycle de vie
// 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
}
})
Lors de son exécution cycle de vie app.js et ce que nous pouvons faire à travers les objets app?
1. application enregistré, nous pouvons déterminer l'utilisateur entre l'applet scène par onshow
2. Nous pouvons fonctionner dans le cycle de vie, faire une demande de données
3. Nous pouvons définir un objectif global dans l'application, il peut être utilisé à l'échelle mondiale, comme GlobalData
Page du cycle de vie de l'applet
graphique:
// 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 () {
}
})
déroulante page de configuration globale:
configuration déroulant partielle page:
Page d'objets dans la page où les choses peuvent se faire?
1. Dans le cycle de vie de la fonction, la demande de données à partir du serveur
2. Initialiser les données dans les données, utilisées pour wxml
3. wxml événement de contrôle, se lient l'événement correspondant
4. La page Listener pull-up, pull-down, etc.