⼩程序发布新版本时⾃动提⽰⽤户更新的⽅法
如图,当⼩程序发布新的版本后,⽤户如果之前访问过该⼩程序,通过已打开的⼩程序进⼊(未⼿动删除),则会弹出这个提⽰,提醒⽤户更新新的版本。⽤户点击确定就可以⾃动重启更新,点击取消则关闭弹窗,不再更新。
const updateManager = wx.getUpdateManager()
// 请求完新版本信息的回调
console.log(res.hasUpdate)
})
wx.showModal({
title: '更新提⽰',
content: '新版本已经准备好,是否重启应⽤?',
success(res) {
if (firm) {
// 新的版本已经下载好,调⽤ applyUpdate 应⽤新版本并重启
updateManager.applyUpdate()
}
}
})
})
// 新版本下载失败
})
官⽅提供的demo中,只有最基本的更新提⽰,并未做异常处理。⽽且官⽅也说了这个功能基础库 1.9.90 开始⽀持,低版本需做兼容处理,那么就需要对着端代码进⾏改进了。
另⼀⽅⾯,如果当前版本更新有重⼤调整,⼀定需要⽤户更新,那么可以在⽤户点击取消的回调中给出提⽰,并重新进⼊版本提⽰流程。如下图,在上边的更新提⽰中,⽤户点击取消,则弹出下⾯提⽰弹窗,⽤户点击确定,则更新版本,点击取消,则重新调⽤上边的更新提⽰。总之,⽤户只有更新了,才能正常访问⼩程序(如⾮必须,建议慎⽤)。
//app.js
App({
onLaunch: function(options) {
this.autoUpdate()
},
autoUpdate:function(){
console.log(new Date())
var self=this
// 获取⼩程序更新机制兼容
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
//1. 检查⼩程序是否有新版本发布
// 请求完新版本信息的回调
if (res.hasUpdate) {
//2. ⼩程序有新版本,则静默下载新版本,做好更新准备
console.log(new Date())
wx.showModal({
title: '更新提⽰',
content: '新版本已经准备好,是否重启应⽤?',
success: function (res) {
if (firm) {
//3. 新的版本已经下载好,调⽤ applyUpdate 应⽤新版本并重启
updateManager.applyUpdate()
} else if (res.cancel) {
//如果需要强制更新,则给出⼆次弹窗,如果不需要,则这⾥的代码都可以删掉了
wx.showModal({
title: '温馨提⽰~',
content: '本次版本更新涉及到新的功能添加,旧版本⽆法正常访问的哦~',
success: function (res) {
self.autoUpdate()
return;
//第⼆次提⽰后,强制更新
if (firm) {
// 新的版本已经下载好,调⽤ applyUpdate 应⽤新版本并重启
updateManager.applyUpdate()
} else if (res.cancel) {
//重新回到版本更新提⽰
self.autoUpdate()
})
}
}
})
})
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您删除当前⼩程序,重新搜索打开哟~',
})
})
}
})
} else {
// 如果希望⽤户在最新版本的客户端上体验您的⼩程序,可以这样⼦提⽰
wx.showModal({
title: '提⽰',
content: '当前版本过低,⽆法使⽤该功能,请升级到最新版本后重试。'
})
}
}
})
更新版本的模拟测试:
1. 开发者⼯具上可以通过「编译模式」下的「下次编译模拟更新」开关来调试;
2. ⼩程序开发版/体验版没有「版本」概念,所以⽆法在开发版/体验版上测试更版本更新情况;
对于开发者⼯具,可以这样验证测试:
点击编译模式设置下拉列表,然后点击“添加编译模式”,在⾃定义编译条件弹窗界⾯,点击下次编译时模拟更新,然后点击确定,重新编译就OK了。
需要注意的是,这种⽅式模拟更新⼀次之后就失效了,后边再测试仍需要对这种编译模式进⾏重新设置才可以。
更新提⽰有延迟?
在开发者⼯具上测试验证的时候,更新提⽰弹窗在⼩程序界⾯加载出来五六秒之后才弹出来,这是由于
⼩程序在检测到有新版本之后,调⽤进⾏版本更新监听,此时客户端主动触发下载(⽆需开发者触发),下载成功后回调。也就是说我们上边的更新提⽰弹窗是在⼩程序检测到新版本并完成新版本下载之后弹出的,所以就有了这⼏秒的时间差。这样的话就很有必要进⾏再次改善了,⾄少应该在⼩程序编译时检测到有新版本就应该先给出更新提⽰,⾄于新版本下载的准备⼯作,可以在⽤户点击确认按钮之后进⾏,代码改造如下:
App({
onLaunch: function(options) {
this.autoUpdate()
},
autoUpdate: function() {
var self = this
// 获取⼩程序更新机制兼容
if (wx.canIUse('getUpdateManager')) {
自动弹窗代码const updateManager = wx.getUpdateManager()
//1. 检查⼩程序是否有新版本发布
// 请求完新版本信息的回调
if (res.hasUpdate) {
//检测到新版本,需要更新,给出提⽰
wx.showModal({
title: '更新提⽰',
content: '检测到新版本,是否下载新版本并重启⼩程序?',
success: function(res) {
if (firm) {
/
/2. ⽤户确定下载更新⼩程序,⼩程序下载及更新静默进⾏
self.downLoadAndUpdate(updateManager)
} else if (res.cancel) {
//⽤户点击取消按钮的处理,如果需要强制更新,则给出⼆次弹窗,如果不需要,则这⾥的代码都可以删掉了
wx.showModal({
title: '温馨提⽰~',
content: '本次版本更新涉及到新的功能添加,旧版本⽆法正常访问的哦~',
showCancel:false,//隐藏取消按钮
confirmText:"确定更新",//只保留确定更新按钮
success: function(res) {
if (firm) {
//下载新版本,并重新应⽤
self.downLoadAndUpdate(updateManager)
}
}
}
})
}
})
} else {
// 如果希望⽤户在最新版本的客户端上体验您的⼩程序,可以这样⼦提⽰
wx.showModal({
title: '提⽰',
content: '当前版本过低,⽆法使⽤该功能,请升级到最新版本后重试。'
})
}
},
/**
* 下载⼩程序新版本并重启应⽤
*/
downLoadAndUpdate: function (updateManager){
var self=this
wx.showLoading();
/
/静默下载更新⼩程序新版本
wx.hideLoading()
//新的版本已经下载好,调⽤ applyUpdate 应⽤新版本并重启
updateManager.applyUpdate()
})
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您删除当前⼩程序,重新搜索打开哟~',
})
})
}
})
如上,在检测到⼩程序有新版本之后,就给出弹窗提⽰⽤户下载新版并重启⼩程序,⽤户点击确定按钮后进⾏⼩程序新版本的下载和更新。也为了调⽤⽅便,将新版本下载及⼩程序的重启应⽤单独封装起来。
这样,从⼩程序加载到弹出版本更新弹窗只需要耗费调⽤新版本检测API并返回结果的时间(开发者⼯具测试有2~3秒),虽说还是有⼀点延迟,但⽬前也只能这样了。
总结:
综上,⽆论如何,使⽤⼩程序版本更新检测功能都是需要⼀定时间的(⼀两秒的时间已经不算短了哈),如果在检测这⼀两秒中内⽤户进⾏了操作,那么更新提⽰弹窗则会打断⽤户的操作。但毕竟不是频繁更新版本,所以这⽅⾯还是可以接受的。
另外,下载新的版本包的时候建议loading,这样⽤户就知道是在下载,然后下载完成⾃动重启,这样整个流程就顺畅多了。
梳理了下,整了份思维导图,可以辅助理解:
其他注意事项:
基础库最低版本设置:
如果不想做API⽀持判断,那么可以给⼩程序设置最低版本⽀持。
打开⼩程序管理后台-设置-基础库最低版本设置,根据现有⼩程序的访问情况或者⼩程序官⽅提供的数据,设置⼀个⽐较⼤众化的基础库版本就好了,这样就能进了尽量减少API兼容性判断,也能促使⽤户更新版本,以⽀持⼩程序正常运⾏,体验⼩程序⼀些⾼级功能。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论