发表日期:2019-10 文章编辑:小灯 浏览次数:841
以小程序为切入点,深入理解总结方方面面的知识点,做成系列文章,希望能得到大神的指点和帮助新人入门,承上启下才是好程序猿
由于是系列第一篇文章,紧跟着的是一大段废话,只关心技术的可以跳过
以上应该一眼就能看明白,以下主要讲讲前台、后台定义和运行机制等
1 . 前台、后台定义
2 . 运行机制
3 . 更新机制
//注意,小程序的更新的api需要基础库在1.9.90以上
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调,省略回调会报错,如下图
console.log(res.hasUpdate)
})
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: '更新提示',
content: '新版本下载失败',
showCancel:false
})
})
3 . 再次打开逻辑
引用一张不错的图片来让你一目了然,图片来源于网络
基础库 1.9.90 开始支持,低版本需做兼容处理。
App({
onPageNotFound(res) {
// 可以封装一个小程序跳转函数,智能解决tabbar页面跳转的问题
wx.redirectTo({
url: 'pages/...'
})
}
})
生命周期执行顺序
分别了解了App和Page的生命周期函数,那他们之间有何关联
吐槽一句,好多文章说什么app的生命周期函数onLauch可能会在page的onLoad之后触发,搞得我一脸懵逼,说话这么不严谨,真的好吗???
App({
onLaunch() {
console.log('app---onLaunch');
},
onShow() {
console.log('app---onShow');
},
onHide() {
console.log('app---onHide');
}
})
Page({
onLoad(options) {
console.log('page---onLoad');
},
onReady() {
console.log('page---onReady');
},
onShow() {
console.log('page---onShow');
},
onHide() {
console.log('page---onHide');
},
onUnload() {
console.log('page---onUnload');
}
})
App({
onLaunch() {
console.log('app---onLaunch');
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
console.log('app---onLaunch---success');
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
}
})
Page({
onLoad(options) {
console.log('page---onLoad');
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
}
})
解决方案
例子中已经给出了callback的方案,现在也可以使用promise来解决
1 . callback
以上例子是官方对于授权之后的操作流程示例,实际使用替换自己的初始化函数和业务逻辑
注意事项
app.onLaunch全局只触发一次,也就是打开的第一个页面会有异步问题,打开第二个页面肯定是可以拿到初始化数据的,但是小程序可以从不同场景进入,可能打开的并非是首页,这时就需要给每一个可能被第一次就打开的页面,写回调函数,暂时没想到类似vue那种设置全局路由回调的方案
2 . promise
先来看一张很熟悉的图
官方原话(以下内容你不需要立马完全弄明白,不过以后它会有帮助)
然后等待界面线程的“界面线程初始化完成”信号。
onload是只会首次渲染的时候执行一次,onshow是每次界面切换都会执行,简单理解,这就是唯一差别
此状态下就可以通过 this.setData 函数发送界面数据给界面线程进行局部渲染,更新页面
注意:Tabbar页面初始化之后不会被销毁,也就是只会执行一次 onLoad 函数
http://www.wxapp-union.com/ar...
http://www.wxapp-union.com/ar...
https://developers.weixin.qq....
日期:2019-11 浏览次数:4801
日期:2019-11 浏览次数:11224
日期:2019-11 浏览次数:3665
日期:2019-11 浏览次数:4572
日期:2019-11 浏览次数:4675
日期:2019-11 浏览次数:6345
日期:2019-11 浏览次数:4595
日期:2019-11 浏览次数:15040
日期:2019-11 浏览次数:3938
日期:2019-11 浏览次数:5717
日期:2019-11 浏览次数:4553
日期:2019-11 浏览次数:3880
日期:2019-11 浏览次数:9650
日期:2019-11 浏览次数:7555
日期:2019-11 浏览次数:4242
日期:2019-11 浏览次数:3637
日期:2019-11 浏览次数:8184
日期:2019-11 浏览次数:3889
日期:2019-11 浏览次数:4064
日期:2019-11 浏览次数:4131
日期:2019-11 浏览次数:3701
日期:2019-11 浏览次数:4282
日期:2019-11 浏览次数:9467
日期:2019-11 浏览次数:4483
日期:2019-11 浏览次数:4483
日期:2019-11 浏览次数:4061
日期:2019-11 浏览次数:11381
日期:2019-11 浏览次数:6673
日期:2019-11 浏览次数:6940
日期:2019-11 浏览次数:4286
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.