デュアルスレッドモデル
1.在渲染层将wxml文件与wxss文件转成js对象,也就是虚拟的dom
2.逻辑层生成数据,把数据与虚拟的dom相结合,得到真实的dom,然后再交给渲染层渲染
3.当有数据变化的时候,逻辑层负责更新数据,js对象发生改变,这种改变方式采用diff算法进行比较,只改变变化的部分
4.将更新的数据,进行反馈,再次到虚拟的dom中,从而更新页面
画像ショー:
アプレットは、ライフサイクルにapp.js
// 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
}
})
ときApp.jsのライフサイクルを実行し、我々は、Appオブジェクト全体で何ができるのでしょうか?
1.登録アプリ、我々は、ユーザーがonshowによってシーンアプレットに入り、決定することができます
2.私たちは、いくつかのデータ要求を行い、ライフサイクルで機能することができます
3.当社は、グローバルデータとして、それが世界的に使用することができ、アプリでグローバルな目標を設定することができます
ページのアプレットのライフサイクル
グラフィック:
// 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 () {
}
})
グローバルドロップダウン設定ページ:
部分ページのプルダウン構成:
物事を行うことが可能なページ内のオブジェクトのページ?
サーバーからデータを要求する機能のライフサイクルにおいては、
2.初期化wxmlに使用されるデータのデータ、
3.モニターwxmlイベント、バインド対応するイベント
4.リスナーページのプルアップ、プルダウンなど