devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp校验app版本并更新

作者：繁依Fanyi0 | 2024-02-21 08:42:25

赞

踩

uniapp校验app版本并更新

最近用uniapp写了一个安卓壳子做app，遇到一个需求，校验app版本并更新

通过对比线上版本号和app自己的版本号的差异，唤起更新弹窗

相关代码

App.vue

  1. <script>
  2.  
  3. 	export default {
  4. 		onLaunch: function() {
  5. 			this.checkVersion()
  6. 		},
  7. 		onShow: function() {
  8. 			console.log('App Show')
  9. 		},
  10. 		onHide: function() {
  11. 			console.log('App Hide')
  12. 		},
  13. 		methods: {
  14. 			checkVersion() {
  15. //https://www.xxxx.com.cn/api/App/GetAppVersion   用来获取app信息的接口
  16. 				uni.request({
  17. 					url: 'https://www.xxxx.com.cn/api/App/GetAppVersion',
  18. 					method: 'get',
  19. 					data: {},
  20. 					header: {
  21. 						'Content-Type': 'application/json', // 设置请求头
  22. 					},
  23. 					success: (res) => {
  24. 						console.log('success', res)
  25. 						if (res.data.Flag == 1) {
  26. 							let {
  27. 								Data
  28. 							} = res.data
  29. 							if (Data.VersionCode) {
  30. 								plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
  31. 									const newVersionCode = Data.VersionCode; //线上最新版本号
  32. 									const selfVersionCode = wgtinfo.versionCode //当前APP应用版本
  33. 									console.log('newVersionCode:',newVersionCode)
  34. 									console.log('selfVersionCode:',selfVersionCode)
  35. 									//线上版本号和当前不一样，进行在线升级
  36. 									if (selfVersionCode != newVersionCode) {
  37. 										let platform = uni.getSystemInfoSync().platform //手机平台
  38. 										//安卓手机弹窗升级
  39. 										if (platform === 'android') {
  40. 											uni.navigateTo({
  41. 												url: '/pages/upgrade/index'
  42. 											})
  43. 										}
  44. 									}
  45. 								});
  46. 							}
  47. 						}
  48. 					},
  49. 					fail: (err) => {
  50. 						console.log('err', err)
  51. 					},
  52. 				});
  53. 			}
  54. 		}
  55. 	}
  56. </script>
  57.  
  58. <style>
  59. 	/*每个页面公共css */
  60. </style>

pages下的upgrade    index.vue

  1. <template>
  2.   <view class="upgrade-popup">
  3. <!--    <image class="header-bg" src="../../static/upgrade_bg.png" mode="widthFix"></image>-->
  4.     <view class="upgrade-main">
  5.       <view class="version">发现新版本</view>
  6.       <view class="upgrade-content">
  7.         <text class="title">更新内容</text>
  8.         <view class="desc" v-html="versionDesc"></view>
  9.       </view>
  10.       <!--下载状态-进度条显示 -->
  11.       <view class="footer" v-if="isStartDownload">
  12.         <view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp">
  13.           <!-- 进度条 -->
  14.           <view v-if="hasProgress" style="height: 100%;">
  15.             <view class="txt">{{percentText}}</view>
  16.             <view class="progress" :style="setProStyle"></view>
  17.           </view>
  18.           <view v-else>
  19.             <view class="btn upgrade force">{{ isDownloadFinish  ? '立即安装' :'下载中...'}}</view>
  20.           </view>
  21.         </view>
  22.       </view>
  23.       <!-- 强制更新 -->
  24.       <view class="footer" v-else-if="isForceUpdate">
  25.         <view class="btn upgrade force" @click="handleUpgrade">立即更新</view>
  26.       </view>
  27.       <!-- 可选择更新 -->
  28.       <view class="footer" v-else>
  29.         <view class="btn close" @click="handleClose">以后再说</view>
  30.         <view class="btn upgrade" @click="handleUpgrade">立即更新</view>
  31.       </view>
  32.     </view>
  33.   </view>
  34. </template>
  35.  
  36. <script>
  37. import {
  38.   downloadApp,
  39.   installApp
  40. } from './upgrade.js'
  41. export default {
  42.   data() {
  43.     return {
  44.       isForceUpdate: false, //是否强制更新
  45.       versionName: '', //版本名称
  46.       versionDesc: '', //更新说明
  47.       downloadUrl: '', //APP下载链接
  48.       isDownloadFinish: false, //是否下载完成
  49.       hasProgress: false, //是否能显示进度条
  50.       currentPercent: 0, //当前下载百分比
  51.       isStartDownload: false, //是否开始下载
  52.       fileName: '', //下载后app本地路径名称
  53.     }
  54.   },
  55.   computed: {
  56.     //设置进度条样式，实时更新进度位置
  57.     setProStyle() {
  58.       return {
  59.         width: (290 * this.currentPercent / 100) + 'px' //510：按钮进度条宽度
  60.       }
  61.     },
  62.     //百分比文字
  63.     percentText() {
  64.       let percent = this.currentPercent;
  65.       if (typeof percent !== 'number' || isNaN(percent)) return '下载中...'
  66.       if (percent < 100) return `下载中${percent}%`
  67.       return '立即安装'
  68.  
  69.     }
  70.   },
  71.   onLoad() {
  72.     this.init()
  73.   },
  74.   onBackPress(options) {
  75.     // 禁用返回
  76.     if (options.from == 'backbutton') {
  77.       return true;
  78.     }
  79.  
  80.   },
  81.   methods: {
  82.     //初始化获取最新APP版本信息
  83.     init() {
  84. 	  uni.request({
  85. 	  	url: 'https://www.xxxx.com.cn/api/App/GetAppVersion',
  86. 	  	method: 'get',
  87. 	  	data: {},
  88. 	  	header: {
  89. 	  		'Content-Type': 'application/json', // 设置请求头
  90. 	  	},
  91. 	  	success: (res) => {
  92. 	  		console.log('success', res)
  93. 	  		if (res.data.Flag == 1) {
  94. 	  			let {
  95. 	  				Data
  96. 	  			} = res.data
  97. 	  			if (Data.VersionCode) {
  98. 					this.versionName = Data.VersionCode; //版本名称
  99. 					this.versionDesc = Data.Describe; //更新说明
  100. 					this.downloadUrl = Data.Url; //下载链接
  101. 					this.isForceUpdate = false; //是否强制更新
  102. 	  			}
  103. 	  		}
  104. 	  	},
  105. 	  	fail: (err) => {
  106. 	  		console.log('err', err)
  107. 	  	},
  108. 	  });
  109. 	  
  110.     },
  111.     //更新
  112.     handleUpgrade() {
  113.       if (this.downloadUrl) {
  114.         this.isStartDownload = true
  115.         //开始下载App
  116.         downloadApp(this.downloadUrl, current => {
  117.           //下载进度监听
  118.           this.hasProgress = true
  119.           this.currentPercent = current
  120.  
  121.         }).then(fileName => {
  122.           //下载完成
  123.           this.isDownloadFinish = true
  124.           this.fileName = fileName
  125.           if (fileName) {
  126.             //自动安装App
  127.             this.handleInstallApp()
  128.           }
  129.         }).catch(e => {
  130.           console.log(e, 'e')
  131.         })
  132.       } else {
  133.         uni.showToast({
  134.           title: '下载链接不存在',
  135.           icon: 'none'
  136.         })
  137.       }
  138.  
  139.     },
  140.     //安装app
  141.     handleInstallApp() {
  142.       //下载完成才能安装，防止下载过程中点击
  143.       if (this.isDownloadFinish && this.fileName) {
  144.         installApp(this.fileName, () => {
  145.           //安装成功,关闭升级弹窗
  146.           uni.navigateBack()
  147.         })
  148.       }
  149.     },
  150.     //关闭返回
  151.     handleClose() {
  152.       uni.navigateBack()
  153. 	  // uni.navigateTo({
  154. 	  //   url: '/pages/login/index'
  155. 	  // })
  156.     },
  157.   }
  158. }
  159. </script>
  160.  
  161. <style>
  162. page {
  163.   background: rgba(0, 0, 0, 0.5);/**设置窗口背景半透明*/
  164. }
  165. </style>
  166. <style lang="scss" scoped>
  167. .upgrade-popup {
  168.   width: 290px;
  169.   height: auto;
  170.   position: fixed;
  171.   top: 50%;
  172.   left: 50%;
  173.   transform: translate(-50%, -50%);
  174.   background: #fff;
  175.   border-radius: 10px;
  176.   box-sizing: border-box;
  177.   border: 1px solid #eee;
  178. }
  179.  
  180. .header-bg {
  181.   width: 100%;
  182.   margin-top: -112rpx;
  183. }
  184.  
  185. .upgrade-main {
  186.   padding: 5px 15px 15px;
  187.   box-sizing: border-box;
  188.   .version {
  189.     font-size: 18px;
  190.     color: #026DF7;
  191.     font-weight: 700;
  192.     width: 100%;
  193.     text-align: center;
  194.     overflow: hidden;
  195.     text-overflow: ellipsis;
  196.     white-space: nowrap;
  197.     letter-spacing: 1px;
  198.   }
  199.  
  200.   .upgrade-content {
  201.     margin-top: 30px;
  202.  
  203.     .title {
  204.       font-size: 14px;
  205.       font-weight: 700;
  206.       color: #000000;
  207.     }
  208.  
  209.     .desc {
  210.       box-sizing: border-box;
  211.       margin-top: 10px;
  212.       font-size: 14px;
  213.       color: #6A6A6A;
  214.       max-height: 80vh;
  215.       overflow-y: auto;
  216.     }
  217.   }
  218.  
  219.   .footer {
  220.     width: 100%;
  221.     display: flex;
  222.     justify-content: center;
  223.     align-items: center;
  224.     position: relative;
  225.     flex-shrink: 0;
  226.     margin-top: 50px;
  227.  
  228.     .btn {
  229.       width: 123px;
  230.       display: flex;
  231.       justify-content: center;
  232.       align-items: center;
  233.       position: relative;
  234.       z-index: 999;
  235.       height: 48px;
  236.       box-sizing: border-box;
  237.       font-size: 16px;
  238.       border-radius: 5px;
  239.       letter-spacing: 1px;
  240.  
  241.       &.force {
  242.         width: 250px;
  243.       }
  244.  
  245.       &.close {
  246.         border: 1px solid #E0E0E0;
  247.         margin-right: 12px;
  248.         color: #000;
  249.       }
  250.  
  251.       &.upgrade {
  252.         background-color: #026DF7;
  253.         color: white;
  254.       }
  255.     }
  256.  
  257.     .progress-view {
  258.       width: 255px;
  259.       height: 24px;
  260.       display: flex;
  261.       position: relative;
  262.       align-items: center;
  263.       border-radius: 3px;
  264.       background-color: #dcdcdc;
  265.       display: flex;
  266.       justify-content: flex-start;
  267.       padding: 0px;
  268.       box-sizing: border-box;
  269.       border: none;
  270.       overflow: hidden;
  271.  
  272.       &.active {
  273.         background-color: #026DF7;
  274.       }
  275.  
  276.       .progress {
  277.         height: 100%;
  278.         background-color: #026DF7;
  279.         padding: 0px;
  280.         box-sizing: border-box;
  281.         border: none;
  282.         border-top-left-radius: 5px;
  283.         border-bottom-left-radius: 5px;
  284.  
  285.       }
  286.  
  287.       .txt {
  288.         font-size: 14px;
  289.         position: absolute;
  290.         top: 50%;
  291.         left: 50%;
  292.         transform: translate(-50%, -50%);
  293.         color: #fff;
  294.       }
  295.     }
  296.   }
  297. }
  298. </style>

pages下的upgrade    upgrade.js

  1. export const downloadApp = (downloadUrl, progressCallBack = () => {}, ) => {
  2.     return new Promise((resolve, reject) => {
  3.         //创建下载任务
  4.         const downloadTask = plus.downloader.createDownload(downloadUrl, {
  5.             method: "GET"
  6.         }, (task, status) => {
  7.             console.log(status,'status')
  8.             if (status == 200) { //下载成功
  9.                 resolve(task.filename)
  10.  
  11.             } else {
  12.                 reject('fail')
  13.                 uni.showToast({
  14.                     title: '下载失败',
  15.                     duration: 1500,
  16.                     icon: "none"
  17.                 });
  18.             }
  19.         })
  20.         //监听下载过程
  21.         downloadTask.addEventListener("statechanged", (task, status) => {
  22.             switch (task.state) {
  23.                 case 1: // 开始
  24.                     break;
  25.                 case 2: //已连接到服务器
  26.                     break;
  27.                 case 3: // 已接收到数据
  28.                     let hasProgress = task.totalSize && task.totalSize > 0 //是否能获取到App大小
  29.                     if (hasProgress) {
  30.                         let current = parseInt(100 * task.downloadedSize / task.totalSize); //获取下载进度百分比
  31.                         progressCallBack(current)
  32.                     }
  33.                     break;
  34.                 case 4: // 下载完成
  35.                     break;
  36.             }
  37.         });
  38.         //开始执行下载
  39.         downloadTask.start();
  40.     })
  41. }
  42. /**
  43.  * @description H5+安装APP
  44.  * @param fileName:app文件名
  45.  * @param callBack:安装成功回调
  46.  */
  47. export const installApp = (fileName, callBack = () => {}) => {
  48.     //注册广播监听app安装情况
  49.     onInstallListening(callBack);
  50.     //开始安装
  51.     plus.runtime.install(plus.io.convertLocalFileSystemURL(fileName), {}, () => {
  52.         //成功跳转到安装界面
  53.     }, function(error) {
  54.         uni.showToast({
  55.             title: '安装失败',
  56.             duration: 1500,
  57.             icon: "none"
  58.         });
  59.     })
  60.  
  61. }
  62. /**
  63.  * @description 注册广播监听APP是否安装成功
  64.  * @param callBack:安装成功回调函数
  65.  */
  66. const onInstallListening = (callBack = () => {}) => {
  67.  
  68.     let mainActivity = plus.android.runtimeMainActivity(); //获取activity
  69.     //生成广播接收器
  70.     let receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
  71.         onReceive: (context, intent) => { //接收广播回调
  72.             plus.android.importClass(intent);
  73.             mainActivity.unregisterReceiver(receiver); //取消监听
  74.             callBack()
  75.         }
  76.     });
  77.     let IntentFilter = plus.android.importClass('android.content.IntentFilter');
  78.     let Intent = plus.android.importClass('android.content.Intent');
  79.     let filter = new IntentFilter();
  80.     filter.addAction(Intent.ACTION_PACKAGE_ADDED); //监听APP安装
  81.     filter.addDataScheme("package");
  82.     mainActivity.registerReceiver(receiver, filter); //注册广播
  83.  
  84. }

pages.json 

  1. {
  2. 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  3. 		{
  4. 			"path": "pages/index/index",
  5. 			"style": {
  6. 				"navigationStyle": "custom"
  7. 			}
  8. 		},
  9. 		{
  10. 			"path": "pages/upgrade/index", //升级窗口页面
  11. 			"style": {
  12. 				"navigationBarTitleText": "",
  13. 				"navigationStyle": "custom",
  14. 				"app-plus": {
  15. 					"bounce": "none",
  16. 					"animationType":"none", //取消窗口动画
  17. 					"background": "transparent" // 设置背景透明
  18. 				}
  19. 			}
  20. 		}
  21. 	],
  22. 	"globalStyle": {
  23. 		"navigationBarTextStyle": "black",
  24. 		// "navigationBarTitleText": "uni-app",
  25. 		"navigationBarBackgroundColor": "#F8F8F8",
  26. 		"backgroundColor": "#F8F8F8"
  27. 	},
  28. 	"uniIdRouter": {}
  29. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/122115
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号