Uni-app 之小程序版本更新检查——uni.getUpdateManager()
<p style="margin-left: 30px">在开发小程序的时候，版本更新在所难免。所以，我们希望每次打开的小程序的时候，都可以进行版本检测。如果有新版本，那么，就更新，并且让用户能够重启，并应用新版本。</p><h1>实现</h1>
<p style="margin-left: 30px">开门见山，uni-app官方网站给了我们实现方法。以下是代码示例。</p>
<div class="cnblogs_code">
<pre>const updateManager =<span style="color: rgba(0, 0, 0, 1)"> uni.getUpdateManager();
updateManager.onCheckForUpdate(</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (res) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 请求完新版本信息的回调</span>
<span style="color: rgba(0, 0, 0, 1)">console.log(res.hasUpdate);
});
updateManager.onUpdateReady(</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (res) {
uni.showModal({
title: </span>'更新提示'<span style="color: rgba(0, 0, 0, 1)">,
content: </span>'新版本已经准备好，是否重启应用？'<span style="color: rgba(0, 0, 0, 1)">,
success(res) {
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (res.confirm) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 新的版本已经下载好，调用 applyUpdate 应用新版本并重启</span>
<span style="color: rgba(0, 0, 0, 1)"> updateManager.applyUpdate();
}
}
});
});
updateManager.onUpdateFailed(</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (res) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 新的版本下载失败</span>
});</pre>
</div>
<p style="margin-left: 30px">根据实例，我把代码封装在一个方法里。</p>
<p style="margin-left: 30px"><img src="https://img2020.cnblogs.com/blog/1602649/202107/1602649-20210728175552101-1102540533.png"></p>
<p style="margin-left: 30px"> 然后，根据场景，每次打开小程序 = 当小程序启动，或者小程序从后台进入前台 = 生命周期 <span style="color: rgba(255, 0, 0, 1); background-color: rgba(255, 204, 0, 1)">onShow <span style="color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1)">。所以，在App.vue 的onShow函数下添加方法。当然，如果对更新要求不那么实时，也可以选在在<span style="background-color: rgba(255, 204, 0, 1); color: rgba(255, 0, 0, 1)">onLaunch</span>生命周期下执行。后文会详述其区别。</span></span></p>
<p style="margin-left: 30px"><span style="color: rgba(255, 0, 0, 1); background-color: rgba(255, 204, 0, 1)"><span style="color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1)"><img src="https://img2020.cnblogs.com/blog/1602649/202107/1602649-20210728175905080-1992699907.png"></span></span></p>
<h1>uni.getUpdateManger()说明</h1>
<p style="margin-left: 30px">官方给的示例代码中中用到了uni.getUpdateManger() 是什么鬼？</p>
<p style="margin-left: 30px">这个API返回的是全局唯一的版本更新管理器对象： updateManage ， 用于管理小程序更新。</p>
<h2>平台差异</h2>
<table border="0">
<tbody>
<tr style="background-color: rgba(204, 204, 204, 1)">
<td style="text-align: center"><strong>APP</strong></td>
<td style="text-align: center"><strong>H5</strong></td>
<td style="text-align: center"><strong>微信小程序</strong></td>
<td style="text-align: center"><strong>支付宝小程序</strong></td>
<td style="text-align: center"><strong>百度小程序</strong></td>
<td style="text-align: center"><strong>字节跳动小程序</strong></td>
<td style="text-align: center"><strong>QQ小程序</strong></td>
</tr>
<tr>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
</tr>
</tbody>
</table>
<h2>updateManager对象的方法列表</h2>
<table border="0">
<tbody>
<tr style="background-color: rgba(204, 204, 204, 1)">
<td><strong>方法</strong></td>
<td><strong>参数</strong></td>
<td><strong>说明</strong></td>
</tr>
<tr>
<td>onCheckForUpdate</td>
<td>callback</td>
<td>当向小程序后台请求完新版本信息，会进行回调</td>
</tr>
<tr>
<td>onUpdateReady</td>
<td>callback</td>
<td>当新版本下载完成，会进行回调</td>
</tr>
<tr>
<td>onUpdateFailed</td>
<td>callback</td>
<td>当新版本下载失败，会进行回调</td>
</tr>
<tr>
<td>applyUpdate</td>
<td> </td>
<td>当新版本下载完成，调用该方法会强制当前小程序应用上新版本并重启</td>
</tr>
</tbody>
</table>
<h2><strong>onCheckForUpdate(callback) 回调结果说明<br></strong></h2>
<table border="0">
<tbody>
<tr style="background-color: rgba(204, 204, 204, 1)">
<td><strong>属性</strong></td>
<td><strong>类型</strong></td>
<td><strong>说明</strong></td>
</tr>
<tr>
<td>hasUpdate</td>
<td>Boolean</td>
<td>是否有新的版本</td>
</tr>
</tbody>
</table>
<h1>知识点</h1>
<h3>知识点1</h3>
<p style="margin-left: 30px">当用户离开小程序时，小程序并没有直接销毁，而是进入了后台，当用户再次进入小程序时，又会从后台进入前台。</p>
<p style="margin-left: 30px">只有当小程序进入后台一定时间后者系统资源占用过高，才会被真正的销毁。</p>
<h3>知识点2</h3>
<p style="margin-left: 30px">小程序启动分为“热启动”和“冷启动”。</p>
<ul>
<li>热启动指的是小程序打开后，在一段时间内（目前：5分钟）再次被打卡，此时将后台小程序切换到前台。对应方法<span style="color: rgba(255, 0, 0, 1); background-color: rgba(255, 204, 0, 1)">onShow</span>。</li>
<li>冷启动指的是小程序首次打开或销毁后再次被打卡，对应函数<span style="color: rgba(255, 0, 0, 1); background-color: rgba(255, 204, 0, 1)">onLaunch</span>。</li>
</ul>
<h3>知识点3</h3>
<ul>
<li>冷启动时，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。</li>
<li>如果希望冷启动后马上使用最新版本，在App 的onLaunch生命周期中，调用用版本资源管理器uni.getUpdateManger()方法。</li>
<li>同理，希望每次打开小程序，都检测更新，就使用onShow。</li>
</ul>
<p style="margin-left: 30px">这样看来，用代码小程序中更新的方法不是必须的，就看你对版本更新的时效要求了。</p>
<h3>知识点4</h3>
<p style="margin-left: 30px">OnLaunch时间触发在Onshow之前。</p>
<h3>知识点5</h3>
<p style="margin-left: 30px">在开发版和体验版无法检查版本更新。需要在开发者工具里，编译时选择“模拟更新编译”。</p>
<p style="margin-left: 30px">打开方法。1)点击菜单栏的添加编译模式。2.勾选下次编译时模拟更新。</p>
<p style="margin-left: 30px"><img src="https://img2020.cnblogs.com/blog/1602649/202107/1602649-20210729104923714-1294335406.png"></p>
<h1>参考网址</h1>
<p>https://uniapp.dcloud.io/api/other/update?id=getupdatemanager</p>
<p>https://www.jianshu.com/p/ff711136544a</p>
</div>
<div id="MySignature" role="contentinfo">
有志者，事竟成，破釜沉舟，百二秦关终属楚； 苦心人，天不负，卧薪尝胆，三千越甲可吞吴。<br><br>
来源：https://www.cnblogs.com/luyj00436/p/15071552.html
頁:
[1]