网站建设专业术语,网站托管方式,p2p网站开发文档,做网站数据库关于app更新#xff0c;uni-app官方推荐的是 uni-upgrade-center#xff0c;看了下比较繁琐#xff0c;因此这里自己实现检查更新并下载安装的逻辑。
1.界面效果 界面中的弹框和 进度条采用了uView 提供的组件
2.检查更新并下载安装
一、版本信息配置在服务端#xff0c…关于app更新uni-app官方推荐的是 uni-upgrade-center看了下比较繁琐因此这里自己实现检查更新并下载安装的逻辑。
1.界面效果 界面中的弹框和 进度条采用了uView 提供的组件
2.检查更新并下载安装
一、版本信息配置在服务端请求服务端接口判断是否需要更新 。
二、点击下载按钮则开始下载App安装包并监听下载进度实时更新下载进度条
注意下载App如果是在浏览器测试可能会有跨域的问题需要后端服务允许跨域。
三、待下载完成后开始安装。
安装App采用的是 uni-installApk插件请自行导入项目
uni-installApk - DCloud 插件市场 3.完整代码
update.vue
templateu-modal :showshow :showConfirmButtonfalseview classbox-a4image classimg-up modewidthFix srchttps://beilizhengxuan.oss-cn-hangzhou.aliyuncs.com/huayu/update.png/view classbox-a5text发现新版本V{{version}},升级后体验更顺畅/text/viewview classrow-b0 v-if!startDownloadview classbtn0 clickdownLoadApp 马上更新/viewview classbtn0 white color clickcancelv-ifforceUpdata0暂不更新/view/viewview v-ifstartDownload classrow-b1view classte-j0下载进度/viewu-line-progress :percentagepercent height24activeColor#3c9cff/u-line-progress/view/view/u-modal
/template
script
import {getAppNewVersion} from /api/system/user
export default{props:{},data(){return{startDownload: false, //是否开始下载show: false,version: ,forceUpdata: ,//是否需要强制更新apkDownloadUrl: ,//percent: 0,filePath: ,}},created(){this.handleToUpgrade()},computed:{showUpdate(){console.log(this.$stroe.state.user,this.$stroe.state.user)return this.$stroe.state.user.showUpdate}},methods:{async handleToUpgrade() {const sysInfo uni.getSystemInfoSync()const appVersion sysInfo.appVersionconsole.log(appVersion, appVersion)//请求服务端检查更新接口判断是否需要更新const res await getAppNewVersion()if(res.code 200){if(res.data res.data.newVersion){const newVersion res.data.newVersionif(appVersion newVersion){this.showToast(当前已是最新版本)this.cancel()} else{this.apkDownloadUrl res.data.apkDownloadUrlthis.show trueconsole.log(需要更新)this.version newVersionthis.forceUpdata res.data.forceUpdata}}}},installApp(){uni.installApk({filePath : this.filePath,success: (res){console.log(安装成功--, res);},fail : (res){console.log(安装失败--, res);},complete: (res){console.log(安装完成--, res);}})},downLoadApp(){this.startDownload trueconst downloadTask uni.downloadFile({url: this.apkDownloadUrl , //仅为示例并非真实的资源timeout: 6000000,success: (res) {console.log(success res, res)if (res.statusCode 200) {this.filePath res.tempFilePathconsole.log(下载成功);this.cancel()this.installApp()}},complete: (res) {console.log(complete res, res)},fail: (res) {console.log(fail res, res)},});downloadTask.onProgressUpdate((res) {//console.log(下载进度 res.progress);//console.log(已经下载的数据长度 res.totalBytesWritten);//console.log(预期需要下载的数据总长度 res.totalBytesExpectedToWrite);this.percent res.progressif (res.progress 100) {console.log(下载进度 abort res.progress);//downloadTask.abort();}});},cancel(){this.$emit(cancel)this.show false},showToast(message){uni.showToast({title: message,icon: none})}}
}
/scriptstyle.img-up{width: 100%;}.box-a4{width: 100%;display: flex;flex-direction: column;justify-content: flex-start;}.box-a5{flex:1;text-align: center;font-size: 28rpx;color: #999;padding: 20rpx 0;}.row-b0{display:flex;flex-direction: row;justify-content: space-around;align-items: center;padding: 0 50rpx;margin-top:60rpx;margin-bottom:60rpx;}.row-b0 .btn0{width: 240rpx;height: 68rpx;border-radius: 34rpx;color: white;display: grid;place-content: center;background:#3c9cff;}.row-b0 .btn0:active{opacity: 0.7;}.row-b0 .btn0.white{background:#fff;color: #666;border:1px solid #eee;}.row-b1{margin: 60rpx 40rpx;}.te-j0{text-align: center;color:#999;font-size: 26rpx;margin-bottom:20rpx;}
/style 4.引入并使用
上面将检查更新的逻辑封装在了update.vue中使用时只需引入该组件在父页面点击检查更新按钮时只需将 checkUpdate 属性设置为 true则加载 update.vue组件进入created 方法并调用检查更新的相关逻辑有新版本则弹框提示更新无新版本则将 checkUpdate重置为 false
注意当检查更新的弹框弹出时调用页面需要禁用 android的 返回按键在 onBackPress函数里面做相应的逻辑判断即可。
templateview UpdateApp v-ifcheckUpdate cancelcheckUpdatefalse//view
/template
script
import UpdateApp from ./updateexport default {components:{UpdateApp},data() {return {checkUpdate: false,}},onBackPress(options) {console.log(onBackPress options, options)// 禁用返回if (options.from backbutton) {console.log(--禁用返回)if(this.checkUpdate){return true;// 禁用返回按键}else {return false;}}},methods: {}}
/script
style langscss scoped/style
