uni-app 实现热更新 - Powered by Discuz! Archiver

首页 › uni-app论坛 › uni-app 实现热更新

醉南桥 發表於 2019-11-21 13:57:00

uni-app 实现热更新

<p>　　前端打包 app 即把写好的静态资源文件套壳打包成 app ，而热更新即下载并替换 app 内部的静态资源文件，实现 app 的版本升级。</p>
<p>　　在uni-app 中，我们是如何实现热更新的呢？下面来看代码</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 检测升级
            </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> #ifdef APP-PLUS
            </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> var ver = plus.runtime.version;</span>
            <span style="color: rgba(0, 0, 255, 1)">var</span> aid =<span style="color: rgba(0, 0, 0, 1)"> plus.runtime.appid;
            uni.request({
               url: </span><span style="color: rgba(0, 0, 255, 1)">this</span>.BaseUrl + <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">/api/update/version?version=</span><span style="color: rgba(128, 0, 0, 1)">'</span> + <span style="color: rgba(0, 0, 255, 1)">this</span>.localVersion + <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">&appid=</span><span style="color: rgba(128, 0, 0, 1)">'</span> + aid + <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">&_t=</span><span style="color: rgba(128, 0, 0, 1)">'</span> + <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date().getTime(),
               method: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">GET</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
               success: result </span>=><span style="color: rgba(0, 0, 0, 1)"> {
                     </span><span style="color: rgba(0, 0, 255, 1)">var</span> data =<span style="color: rgba(0, 0, 0, 1)"> result.data;
                     </span><span style="color: rgba(0, 0, 255, 1)">if</span> (data.update &&<span style="color: rgba(0, 0, 0, 1)"> data.wgtUrl) {
                        </span><span style="color: rgba(0, 0, 255, 1)">this</span>.wgtUrl =<span style="color: rgba(0, 0, 0, 1)"> data.wgtUrl;//保存下载地址</span><span style="color: rgba(0, 0, 0, 1)">
                           uni.showModal({
                                 title: </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">发现新版本</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
                                 content: </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">确认下载更新</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
                                 success: (res) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
                                    </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, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.doUpData();
                                    } </span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (res.cancel) {
                                       </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log('用户点击取消');</span>
<span style="color: rgba(0, 0, 0, 1)">                                     }
                                 }
                           })
                     }
               },
               complete: () </span>=><span style="color: rgba(0, 0, 0, 1)"> {
                     that.total </span>+= <span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">;
               }
            });
            </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> #endif</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">doUpData() {</span><span style="color: rgba(0, 0, 0, 1)">
            uni.showLoading({
               title: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">更新中……</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">
            })
            uni.downloadFile({//执行下载
               url: </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.wgtUrl,
               success: downloadResult </span>=><span style="color: rgba(0, 0, 0, 1)"> {//下载成功
                     </span><span style="color: rgba(0, 0, 255, 1)">if</span> (downloadResult.statusCode === <span style="color: rgba(128, 0, 128, 1)">200</span><span style="color: rgba(0, 0, 0, 1)">) {
                        uni.showModal({
                           title: </span><span style="color: rgba(128, 0, 0, 1)">''</span><span style="color: rgba(0, 0, 0, 1)">,
                           content: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">更新成功，确定现在重启吗？</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
                           confirmText: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">重启</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
                           confirmColor: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">#EE8F57</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
                           success: function(res) {
                                 </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (res.confirm) {
                                    plus.runtime.install(//安装
                                       downloadResult.tempFilePath, {
                                             force: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
                                       },
                                       function() {
                                             </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> utils.showToast('更新成功，重启中');</span>
<span style="color: rgba(0, 0, 0, 1)">                                              plus.runtime.restart();
                                       },
                                       function(e) {
                                             </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> utils.showToast('更新失败');</span>
<span style="color: rgba(0, 0, 0, 1)">                                        }
                                    );
                                 }
                           }
                        });
                     }
               },
               complete: () </span>=><span style="color: rgba(0, 0, 0, 1)"> {
                     uni.hideLoading();
               }
            });
         }</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/gitByLegend/p/11905194.html

頁: [1]

查看完整版本: uni-app 实现热更新