Uniapp 实现app自动检测更新/自动更新功能

实现步骤

• 配置 manifest.json
  
  
  
  • 在 manifest.json 中设置应用的基本信息，包罗 versionName 和 versionCode。
    
  
  

           一般默认0.0.1，1. 

• 服务器端接口开辟
  
  
  
  • 提供一个 API 接口，返回应用的最新版本信息，版本号、下载链接。
    
  
  
• 客户端检测更新
  
  
  
  • 利用 uni.request 发送请求到服务器端接口，获取最新版本信息。
    
  • 对比本地版本与服务器版本，判断是否需要更新。
    
  
  
• 展示更新提示
  
  
  
  • 如果需要更新，利用 uni.showModal 方法展示更新提示。
    
  
  
• 处理用户选择
  
  
  
  • 用户选择更新后，调用plus.downloader.createDownload 方法下载新版本。
    
  • 监听下载进度，并在下载完成后调用 plus.runtime.install 安装新版本。
    
  
  
• 异常处理
  
  
  
  • 对可能出现的错误举行捕获和处理，确保精良的用户体验。
    
  
  

我是参考的一个插件把过程简化了一些
插件地址：https://ext.dcloud.net.cn/plugin?id=9660

 
我简化了作者的index.js文件。其他的没变，以下是我的完备方法。
一共三个JS文件，注意引入路径。
 index.vue

1. import appDialog from '@/uni_modules/app-upgrade/js_sdk/dialog';
2. onLoad(){
3.     // 检查更新
4.     this.checkForUpdate()
5. },
6. methods: {
7.     async checkForUpdate() {
8.         //模拟接口返回数据
9.         let Response = {
10.             status: 1,// 0 无新版本 | 1 有新版本
11.             latestVersionCode: 200,//接口返回的最新版本号，用于对比
12.             changelog: "1. 优化了界面显示\n2. 修复了已知问题",//更新内容
13.             path: "xxx.apk"//下载地址
14.         };
15.         //获取当前安装包版本号
16.         const currentVersionCode = await this.getCurrentVersionCode();
17.         console.log("当前版本号:", currentVersionCode);
18.         console.log("最新版本号:", Response);
19.         // 对比版本号
20.         if (Response.latestVersionCode > currentVersionCode) {
21.             // 显示更新对话框
22.             appDialog.show(Response.path, Response.changelog);
23.         } else {
24.             uni.showToast({
25.                 title: '当前已是最新版',
26.                 icon: 'none'
27.             });
28.         }
29.     },
30.     getCurrentVersionCode() {
31.         return new Promise((resolve) => {
32.             //获取当前安装包版本号
33.             plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
34.                 resolve(parseInt(wgtinfo.versionCode));
35.             });
36.         });
37.     }
38. },

复制代码

 js_sdk/dialog.js

1. /**
2. * @Descripttion: app升级弹框
3. * @Version: 1.0.0
4. * @Author: leefine
5. */
7. import config from '@/upgrade-config.js'
8. import upgrade from './upgrade'
10. const {
11.         title = '发现新版本',
12.                 confirmText = '立即更新',
13.                 cancelTtext = '稍后再说',
14.                 confirmBgColor = '#409eff',
15.                 showCancel = true,
16.                 titleAlign = 'left',
17.                 descriAlign = 'left',
18.                 icon
19. } = config.upgrade;
21. class AppDialog {
22.         constructor() {
23.                 this.maskEl = {}
24.                 this.popupEl = {}
25.                 this.screenHeight = 600;
26.                 this.popupHeight = 230;
27.                 this.popupWidth = 300;
28.                 this.viewWidth = 260;
29.                 this.descrTop = 130;
30.                 this.viewPadding = 20;
31.                 this.iconSize = 80;
32.                 this.titleHeight = 30;
33.                 this.textHeight = 18;
34.                 this.textSpace = 10;
35.                 this.popupContent = []
36.                 this.apkUrl = '';
37.         }
39.         // 显示
40.         show(apkUrl, changelog) {
41.                 this.drawView(changelog)
42.                 this.maskEl.show()
43.                 this.popupEl.show()
44.                 this.apkUrl = apkUrl;
45.         }
47.         // 隐藏
48.         hide() {
49.                 this.maskEl.hide()
50.                 this.popupEl.hide()
51.         }
53.         // 绘制
54.         drawView(changelog) {
55.                 this.screenHeight = plus.screen.resolutionHeight;
56.                 this.popupWidth = plus.screen.resolutionWidth * 0.8;
57.                 this.popupHeight = this.viewPadding * 3 + this.iconSize + 100;
58.                 this.viewWidth = this.popupWidth - this.viewPadding * 2;
59.                 this.descrTop = this.viewPadding + this.iconSize + this.titleHeight;
60.                 this.popupContent = [];
62.                 if (icon) {
63.                         this.popupContent.push({
64.                                 id: 'logo',
65.                                 tag: 'img',
66.                                 src: icon,
67.                                 position: {
68.                                         top: '0px',
69.                                         left: (this.popupWidth - this.iconSize) / 2 + 'px',
70.                                         width: this.iconSize + 'px',
71.                                         height: this.iconSize + 'px'
72.                                 }
73.                         });
74.                 } else {
75.                         this.popupContent.push({
76.                                 id: 'logo',
77.                                 tag: 'img',
78.                                 src: '_pic/upgrade.png',
79.                                 position: {
80.                                         top: '0px',
81.                                         left: (this.popupWidth - this.iconSize) / 2 + 'px',
82.                                         width: this.iconSize + 'px',
83.                                         height: this.iconSize + 'px'
84.                                 }
85.                         });
86.                 }
88.                 // 标题
89.                 if (title) {
90.                         this.popupContent.push({
91.                                 id: 'title',
92.                                 tag: 'font',
93.                                 text: title,
94.                                 textStyles: {
95.                                         size: '18px',
96.                                         color: '#333',
97.                                         weight: 'bold',
98.                                         align: titleAlign
99.                                 },
100.                                 position: {
101.                                         top: this.descrTop - this.titleHeight - this.textSpace + 'px',
102.                                         left: this.viewPadding + 'px',
103.                                         width: this.viewWidth + 'px',
104.                                         height: this.titleHeight + 'px'
105.                                 }
106.                         })
107.                 } else {
108.                         this.descrTop -= this.titleHeight;
109.                 }
111.                 this.drawText(changelog)
113.                 // 取消
114.                 if (showCancel) {
115.                         const width = (this.viewWidth - this.viewPadding) / 2;
116.                         const confirmLeft = width + this.viewPadding * 2;
117.                         this.drawBtn('cancel', width, cancelTtext)
118.                         this.drawBtn('confirm', width, confirmText, confirmLeft)
119.                 } else {
120.                         this.drawBtn('confirmBox', this.viewWidth, confirmText)
121.                 }
123.                 this.drawBox(showCancel)
124.         }
126.         // 描述内容
127.         drawText(changelog) {
128.                 if (!changelog) return [];
129.                 const textArr = changelog.split('')
130.                 const len = textArr.length;
131.                 let prevNode = 0;
132.                 let nodeWidth = 0;
133.                 let letterWidth = 0;
134.                 const chineseWidth = 14;
135.                 const otherWidth = 7;
136.                 let rowText = [];
138.                 for (let i = 0; i < len; i++) {
139.                         // 包含中文
140.                         if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
141.                                 // 包含字母
142.                                 let textWidth = ''
143.                                 if (letterWidth > 0) {
144.                                         textWidth = nodeWidth + chineseWidth + letterWidth * otherWidth;
145.                                         letterWidth = 0;
146.                                 } else {
147.                                         // 不含字母
148.                                         textWidth = nodeWidth + chineseWidth;
149.                                 }
151.                                 if (textWidth > this.viewWidth) {
152.                                         rowArrText(i, chineseWidth)
153.                                 } else {
154.                                         nodeWidth = textWidth;
155.                                 }
156.                         } else {
157.                                 // 不含中文
158.                                 // 包含换行符
159.                                 if (/\n/g.test(textArr[i])) {
160.                                         rowArrText(i, 0, 1)
161.                                         letterWidth = 0;
162.                                 } else if (textArr[i] == '\\' && textArr[i + 1] == 'n') {
163.                                         rowArrText(i, 0, 2)
164.                                         letterWidth = 0;
165.                                 } else if (/[a-zA-Z0-9]/g.test(textArr[i])) {
166.                                         // 包含字母数字
167.                                         letterWidth += 1;
168.                                         const textWidth = nodeWidth + letterWidth * otherWidth;
169.                                         if (textWidth > this.viewWidth) {
170.                                                 const preNode = i + 1 - letterWidth;
171.                                                 rowArrText(preNode, letterWidth * otherWidth)
172.                                                 letterWidth = 0;
173.                                         }
174.                                 } else {
175.                                         if (nodeWidth + otherWidth > this.viewWidth) {
176.                                                 rowArrText(i, otherWidth)
177.                                         } else {
178.                                                 nodeWidth += otherWidth;
179.                                         }
180.                                 }
181.                         }
182.                 }
184.                 if (prevNode < len) {
185.                         rowArrText(len, -1)
186.                 }
187.                 this.drawDesc(rowText)
189.                 function rowArrText(i, nWidth = 0, type = 0) {
190.                         const typeVal = type > 0 ? 'break' : 'text';
192.                         rowText.push({
193.                                 type: typeVal,
194.                                 content: changelog.substring(prevNode, i)
195.                         })
197.                         if (nWidth >= 0) {
198.                                 prevNode = i + type;
199.                                 nodeWidth = nWidth;
200.                         }
201.                 }
202.         }
204.         // 描述
205.         drawDesc(rowText) {
206.                 rowText.forEach((item, index) => {
207.                         if (index > 0) {
208.                                 this.descrTop += this.textHeight;
209.                                 this.popupHeight += this.textHeight;
210.                         }
212.                         this.popupContent.push({
213.                                 id: 'content' + index + 1,
214.                                 tag: 'font',
215.                                 text: item.content,
216.                                 textStyles: {
217.                                         size: '14px',
218.                                         color: '#666',
219.                                         align: descriAlign
220.                                 },
221.                                 position: {
222.                                         top: this.descrTop + 'px',
223.                                         left: this.viewPadding + 'px',
224.                                         width: this.viewWidth + 'px',
225.                                         height: this.textHeight + 'px'
226.                                 }
227.                         })
229.                         if (item.type == 'break') {
230.                                 this.descrTop += this.textSpace;
231.                                 this.popupHeight += this.textSpace;
232.                         }
233.                 })
234.         }
236.         // 按钮
237.         drawBtn(id, width, text, left = this.viewPadding) {
238.                 let boxColor = confirmBgColor,
239.                         textColor = '#ffffff';
240.                 if (id == 'cancel') {
241.                         boxColor = '#f0f0f0';
242.                         textColor = '#666666';
243.                 }
245.                 this.popupContent.push({
246.                         id: id + 'Box',
247.                         tag: 'rect',
248.                         rectStyles: {
249.                                 radius: '6px',
250.                                 color: boxColor
251.                         },
252.                         position: {
253.                                 bottom: this.viewPadding + 'px',
254.                                 left: left + 'px',
255.                                 width: width + 'px',
256.                                 height: '40px'
257.                         }
258.                 })
260.                 this.popupContent.push({
261.                         id: id + 'Text',
262.                         tag: 'font',
263.                         text: text,
264.                         textStyles: {
265.                                 size: '14px',
266.                                 color: textColor
267.                         },
268.                         position: {
269.                                 bottom: this.viewPadding + 'px',
270.                                 left: left + 'px',
271.                                 width: width + 'px',
272.                                 height: '40px'
273.                         }
274.                 })
275.         }
277.         // 内容框
278.         drawBox(showCancel) {
279.                 this.maskEl = new plus.nativeObj.View('maskEl', {
280.                         top: '0px',
281.                         left: '0px',
282.                         width: '100%',
283.                         height: '100%',
284.                         backgroundColor: 'rgba(0,0,0,0.5)'
285.                 });
287.                 this.popupEl = new plus.nativeObj.View('popupEl', {
288.                         tag: 'rect',
289.                         top: (this.screenHeight - this.popupHeight) / 2 + 'px',
290.                         left: '10%',
291.                         height: this.popupHeight + 'px',
292.                         width: '80%'
293.                 });
295.                 // 白色背景
296.                 this.popupEl.drawRect({
297.                         color: '#ffffff',
298.                         radius: '8px'
299.                 }, {
300.                         top: this.iconSize / 2 + 'px',
301.                         height: this.popupHeight - this.iconSize / 2 + 'px'
302.                 });
304.                 this.popupEl.draw(this.popupContent);
306.                 this.popupEl.addEventListener('click', e => {
307.                         const maxTop = this.popupHeight - this.viewPadding;
308.                         const maxLeft = this.popupWidth - this.viewPadding;
309.                         const buttonWidth = (this.viewWidth - this.viewPadding) / 2;
310.                         if (e.clientY > maxTop - 40 && e.clientY < maxTop) {
311.                                 if (showCancel) {
312.                                         // 取消
313.                                         // if(e.clientX>this.viewPadding && e.clientX<maxLeft-buttonWidth-this.viewPadding){}
314.                                         // 确定
315.                                         if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
316.                                                 upgrade.checkOs(this.apkUrl)
317.                                         }
318.                                 } else {
319.                                         if (e.clientX > this.viewPadding && e.clientX < maxLeft) {
320.                                                 upgrade.checkOs(this.apkUrl)
321.                                         }
322.                                 }
323.                                 this.hide()
324.                         }
325.                 });
326.         }
327. }
329. export default new AppDialog()

复制代码

js_sdk/upgrade.js

1. /**
2. * @Descripttion: app下载更新
3. * @Version: 1.0.0
4. * @Author: leefine
5. */
7. import config from '@/upgrade-config.js'
8. const { upType=0 }=config.upgrade;
10. class Upgrade{
11.        
12.         // 检测平台
13.         checkOs(apkUrl){
14.                 uni.getSystemInfo({
15.                         success:(res) => {
16.                                 if(res.osName=="android"){
17.                                         if(upType==1 && packageName){
18.                                                 plus.runtime.openURL('market://details?id='+packageName)
19.                                         }else{
20.                                                 this.downloadInstallApp(apkUrl)
21.                                         }
22.                                 }else if(res.osName=='ios' && appleId){
23.                                         // apple id 在 app conection 上传的位置可以看到 https://appstoreconnect.apple.com
24.                                         plus.runtime.launchApplication({
25.                                                 action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
26.                                         }, function(err) {
27.                                                 uni.showToast({
28.                                                         title:err.message,
29.                                                         icon:'none'
30.                                                 })
31.                                         })
32.                                 }
33.                         }  
34.                 })
35.         }
36.        
37.         // 下载更新
38.         downloadInstallApp(apkUrl){
39.                 const dtask = plus.downloader.createDownload(apkUrl, {}, function (d,status){
40.                         // 下载完成  
41.                         if (status == 200){
42.                                 plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename),{},{},function(error){  
43.                                         uni.showToast({  
44.                                                 title: '安装失败',
45.                                                 icon:'none'
46.                                         });  
47.                                 })
48.                         }else{
49.                                 uni.showToast({
50.                                         title: '更新失败',
51.                                         icon:'none'
52.                                 });
53.                         }
54.                 });
55.                 this.downloadProgress(dtask);
56.         }
57.        
58.         // 下载进度
59.         downloadProgress(dtask){
60.                 try{
61.                         dtask.start(); //开启下载任务
62.                         let prg=0;
63.                         let showLoading=plus.nativeUI.showWaiting('正在下载');
64.                         dtask.addEventListener('statechanged',function(task,status){
65.                                 // 给下载任务设置监听
66.                                 switch(task.state){
67.                                         case 1:
68.                                                 showLoading.setTitle('正在下载');
69.                                                 break;
70.                                         case 2:
71.                                                 showLoading.setTitle('已连接到服务器');
72.                                                 break;
73.                                         case 3:
74.                                                 prg=parseInt((parseFloat(task.downloadedSize)/parseFloat(task.totalSize))*100);
75.                                                 showLoading.setTitle('正在下载'+prg+'%');
76.                                                 break;
77.                                         case 4:
78.                                                 // 下载完成
79.                                                 plus.nativeUI.closeWaiting();
80.                                                 break;
81.                                 }
82.                         })
83.                 }catch(e){
84.                         plus.nativeUI.closeWaiting();
85.                         uni.showToast({
86.                                 title: '更新失败',
87.                                 icon:'none'
88.                         })
89.                 }
90.         }
91.        
92. }
94. export default new Upgrade()

复制代码

upgrade-config.js

1. export default {
2.     upgrade:{
3.         packageName:'',
4.         appleId:'',
5.         upType:0,
6.         timer:24,
7.         icon:'/static/logo.png',
8.         title:'发现新版本',
9.         confirmText:'立即更新',
10.         cancelTtext:'稍后再说',
11.         confirmBgColor:'#409eff',
12.         showCancel:true,
13.         titleAlign:'left',
14.         descriAlign:'left'
15.     }
16. }

复制代码

结果图：

upgrade.js 中downloadInstallApp函数下载更新代码剖析，来自AI：
代码剖析

1. plus.downloader.createDownload

这个方法用于创建一个下载使命。它接受三个参数：

• url: 要下载的文件的 URL 地址。
  
• headers: 下载请求的头部信息，通常是一个对象，这里传入的是一个空对象 {}。
  
• callback: 下载完成后的回调函数，它有两个参数：
  
  
  
  • d: 下载使命对象。
    
  • status: 下载的状态码，200 表示成功。
    
  
  

2. 回调函数

在下载完成后，回调函数会被调用。根据 status 的值来判断下载是否成功：

• status == 200: 下载成功，调用 plus.runtime.install 方法安装 APK 文件。
  
• status != 200: 下载失败，显示一个更新失败的提示。
  

3. plus.runtime.install

这个方法用于安装下载好的 APK 文件。它接受四个参数：

• path: 安装包的路径，这里利用 plus.io.convertLocalFileSystemURL(d.filename) 将下载使命的文件路径转换为本地文件系统路径。
  
• options: 安装选项，这里传入的是一个空对象 {}。
  
• successCallback: 安装成功的回调函数，这里没有具体实现。
  
• errorCallback: 安装失败的回调函数，显示一个安装失败的提示。
  

4. this.downloadProgress(dtask)

这是一个自定义的方法，用于监听下载进度。dtask 是下载使命对象，可以通过这个对象来获取下载的进度信息。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。