uniapp校验app版本并更新

这篇具有很好参考价值的文章主要介绍了uniapp校验app版本并更新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

相关代码

App.vue

<script>

	export default {
		onLaunch: function() {
			this.checkVersion()
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			checkVersion() {
//https://www.xxxx.com.cn/api/App/GetAppVersion   用来获取app信息的接口
				uni.request({
					url: 'https://www.xxxx.com.cn/api/App/GetAppVersion',
					method: 'get',
					data: {},
					header: {
						'Content-Type': 'application/json', // 设置请求头
					},
					success: (res) => {
						console.log('success', res)
						if (res.data.Flag == 1) {
							let {
								Data
							} = res.data
							if (Data.VersionCode) {
								plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
									const newVersionCode = Data.VersionCode; //线上最新版本号
									const selfVersionCode = wgtinfo.versionCode //当前APP应用版本
									console.log('newVersionCode:',newVersionCode)
									console.log('selfVersionCode:',selfVersionCode)
									//线上版本号和当前不一样,进行在线升级
									if (selfVersionCode != newVersionCode) {
										let platform = uni.getSystemInfoSync().platform //手机平台
										//安卓手机弹窗升级
										if (platform === 'android') {
											uni.navigateTo({
												url: '/pages/upgrade/index'
											})
										}
									}
								});
							}
						}
					},
					fail: (err) => {
						console.log('err', err)
					},
				});
			}
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

pages下的upgrade    index.vue

<template>
  <view class="upgrade-popup">
<!--    <image class="header-bg" src="../../static/upgrade_bg.png" mode="widthFix"></image>-->
    <view class="upgrade-main">
      <view class="version">发现新版本</view>
      <view class="upgrade-content">
        <text class="title">更新内容</text>
        <view class="desc" v-html="versionDesc"></view>
      </view>
      <!--下载状态-进度条显示 -->
      <view class="footer" v-if="isStartDownload">
        <view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp">
          <!-- 进度条 -->
          <view v-if="hasProgress" style="height: 100%;">
            <view class="txt">{{percentText}}</view>
            <view class="progress" :style="setProStyle"></view>
          </view>
          <view v-else>
            <view class="btn upgrade force">{{ isDownloadFinish  ? '立即安装' :'下载中...'}}</view>
          </view>
        </view>
      </view>
      <!-- 强制更新 -->
      <view class="footer" v-else-if="isForceUpdate">
        <view class="btn upgrade force" @click="handleUpgrade">立即更新</view>
      </view>
      <!-- 可选择更新 -->
      <view class="footer" v-else>
        <view class="btn close" @click="handleClose">以后再说</view>
        <view class="btn upgrade" @click="handleUpgrade">立即更新</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  downloadApp,
  installApp
} from './upgrade.js'
export default {
  data() {
    return {
      isForceUpdate: false, //是否强制更新
      versionName: '', //版本名称
      versionDesc: '', //更新说明
      downloadUrl: '', //APP下载链接
      isDownloadFinish: false, //是否下载完成
      hasProgress: false, //是否能显示进度条
      currentPercent: 0, //当前下载百分比
      isStartDownload: false, //是否开始下载
      fileName: '', //下载后app本地路径名称
    }
  },
  computed: {
    //设置进度条样式,实时更新进度位置
    setProStyle() {
      return {
        width: (290 * this.currentPercent / 100) + 'px' //510:按钮进度条宽度
      }
    },
    //百分比文字
    percentText() {
      let percent = this.currentPercent;
      if (typeof percent !== 'number' || isNaN(percent)) return '下载中...'
      if (percent < 100) return `下载中${percent}%`
      return '立即安装'

    }
  },
  onLoad() {
    this.init()
  },
  onBackPress(options) {
    // 禁用返回
    if (options.from == 'backbutton') {
      return true;
    }

  },
  methods: {
    //初始化获取最新APP版本信息
    init() {
	  uni.request({
	  	url: 'https://www.xxxx.com.cn/api/App/GetAppVersion',
	  	method: 'get',
	  	data: {},
	  	header: {
	  		'Content-Type': 'application/json', // 设置请求头
	  	},
	  	success: (res) => {
	  		console.log('success', res)
	  		if (res.data.Flag == 1) {
	  			let {
	  				Data
	  			} = res.data
	  			if (Data.VersionCode) {
					this.versionName = Data.VersionCode; //版本名称
					this.versionDesc = Data.Describe; //更新说明
					this.downloadUrl = Data.Url; //下载链接
					this.isForceUpdate = false; //是否强制更新
	  			}
	  		}
	  	},
	  	fail: (err) => {
	  		console.log('err', err)
	  	},
	  });
	  
    },
    //更新
    handleUpgrade() {
      if (this.downloadUrl) {
        this.isStartDownload = true
        //开始下载App
        downloadApp(this.downloadUrl, current => {
          //下载进度监听
          this.hasProgress = true
          this.currentPercent = current

        }).then(fileName => {
          //下载完成
          this.isDownloadFinish = true
          this.fileName = fileName
          if (fileName) {
            //自动安装App
            this.handleInstallApp()
          }
        }).catch(e => {
          console.log(e, 'e')
        })
      } else {
        uni.showToast({
          title: '下载链接不存在',
          icon: 'none'
        })
      }

    },
    //安装app
    handleInstallApp() {
      //下载完成才能安装,防止下载过程中点击
      if (this.isDownloadFinish && this.fileName) {
        installApp(this.fileName, () => {
          //安装成功,关闭升级弹窗
          uni.navigateBack()
        })
      }
    },
    //关闭返回
    handleClose() {
      uni.navigateBack()
	  // uni.navigateTo({
	  //   url: '/pages/login/index'
	  // })
    },
  }
}
</script>

<style>
page {
  background: rgba(0, 0, 0, 0.5);/**设置窗口背景半透明*/
}
</style>
<style lang="scss" scoped>
.upgrade-popup {
  width: 290px;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1px solid #eee;
}

.header-bg {
  width: 100%;
  margin-top: -112rpx;
}

.upgrade-main {
  padding: 5px 15px 15px;
  box-sizing: border-box;
  .version {
    font-size: 18px;
    color: #026DF7;
    font-weight: 700;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 1px;
  }

  .upgrade-content {
    margin-top: 30px;

    .title {
      font-size: 14px;
      font-weight: 700;
      color: #000000;
    }

    .desc {
      box-sizing: border-box;
      margin-top: 10px;
      font-size: 14px;
      color: #6A6A6A;
      max-height: 80vh;
      overflow-y: auto;
    }
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    margin-top: 50px;

    .btn {
      width: 123px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 999;
      height: 48px;
      box-sizing: border-box;
      font-size: 16px;
      border-radius: 5px;
      letter-spacing: 1px;

      &.force {
        width: 250px;
      }

      &.close {
        border: 1px solid #E0E0E0;
        margin-right: 12px;
        color: #000;
      }

      &.upgrade {
        background-color: #026DF7;
        color: white;
      }
    }

    .progress-view {
      width: 255px;
      height: 24px;
      display: flex;
      position: relative;
      align-items: center;
      border-radius: 3px;
      background-color: #dcdcdc;
      display: flex;
      justify-content: flex-start;
      padding: 0px;
      box-sizing: border-box;
      border: none;
      overflow: hidden;

      &.active {
        background-color: #026DF7;
      }

      .progress {
        height: 100%;
        background-color: #026DF7;
        padding: 0px;
        box-sizing: border-box;
        border: none;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;

      }

      .txt {
        font-size: 14px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
  }
}
</style>

pages下的upgrade    upgrade.js

export const downloadApp = (downloadUrl, progressCallBack = () => {}, ) => {
    return new Promise((resolve, reject) => {
        //创建下载任务
        const downloadTask = plus.downloader.createDownload(downloadUrl, {
            method: "GET"
        }, (task, status) => {
            console.log(status,'status')
            if (status == 200) { //下载成功
                resolve(task.filename)

            } else {
                reject('fail')
                uni.showToast({
                    title: '下载失败',
                    duration: 1500,
                    icon: "none"
                });
            }
        })
        //监听下载过程
        downloadTask.addEventListener("statechanged", (task, status) => {
            switch (task.state) {
                case 1: // 开始
                    break;
                case 2: //已连接到服务器
                    break;
                case 3: // 已接收到数据
                    let hasProgress = task.totalSize && task.totalSize > 0 //是否能获取到App大小
                    if (hasProgress) {
                        let current = parseInt(100 * task.downloadedSize / task.totalSize); //获取下载进度百分比
                        progressCallBack(current)
                    }
                    break;
                case 4: // 下载完成
                    break;
            }
        });
        //开始执行下载
        downloadTask.start();
    })
}
/**
 * @description H5+安装APP
 * @param fileName:app文件名
 * @param callBack:安装成功回调
 */
export const installApp = (fileName, callBack = () => {}) => {
    //注册广播监听app安装情况
    onInstallListening(callBack);
    //开始安装
    plus.runtime.install(plus.io.convertLocalFileSystemURL(fileName), {}, () => {
        //成功跳转到安装界面
    }, function(error) {
        uni.showToast({
            title: '安装失败',
            duration: 1500,
            icon: "none"
        });
    })

}
/**
 * @description 注册广播监听APP是否安装成功
 * @param callBack:安装成功回调函数
 */
const onInstallListening = (callBack = () => {}) => {

    let mainActivity = plus.android.runtimeMainActivity(); //获取activity
    //生成广播接收器
    let receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
        onReceive: (context, intent) => { //接收广播回调
            plus.android.importClass(intent);
            mainActivity.unregisterReceiver(receiver); //取消监听
            callBack()
        }
    });
    let IntentFilter = plus.android.importClass('android.content.IntentFilter');
    let Intent = plus.android.importClass('android.content.Intent');
    let filter = new IntentFilter();
    filter.addAction(Intent.ACTION_PACKAGE_ADDED); //监听APP安装
    filter.addDataScheme("package");
    mainActivity.registerReceiver(receiver, filter); //注册广播

}

pages.json 文章来源地址https://www.toymoban.com/news/detail-829037.html

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/upgrade/index", //升级窗口页面
			"style": {
				"navigationBarTitleText": "",
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none",
					"animationType":"none", //取消窗口动画
					"background": "transparent" // 设置背景透明
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		// "navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

到了这里,关于uniapp校验app版本并更新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案

    这几天在做uni-app表单验证时遇到了一个问题,按官方文档给出的方法,当需要数据校验时,只需要 1.为uni-forms中的\\\" modelValue \\\"数据设置“ :rules ”对应 2.“ uni-forms-item ”的name和“ uni-easyinput ”中“v-model”中的key和“ rules ”中的key相同 就可以对该项“uni-easyinput”做数据校验

    2023年04月09日
    浏览(137)
  • Uniapp uni-app学习与快速上手

    个人开源uni-app开源项目地址:准备中 在线展示项目地址:准备中 什么是uni-app uni,读 you ni ,是统一的意思。 Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位,致力于推进HTML5发展构建,HTML5生态。 2012年,DCloud开始研发小程序技术,优化webvie

    2024年02月09日
    浏览(58)
  • uni-app: onBackPress() 监听页面返回 - 更新数据

    生命周期 - onBackPress() 监听页面返回 函数名 说明 平台差异说明 onBackPress 监听页面返回 ,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机

    2024年02月11日
    浏览(58)
  • uni-app中查看vue的版本号

    1.查看vue的版本号 在manifest.json 文件中,基础配置的底部有vue版本的配置  

    2024年02月11日
    浏览(33)
  • 【UniApp】-uni-app-项目实战页面布局(苹果计算器)

    经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了 那么从本文开始,我们就开始进行一个项目的实战 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手 打开 HBuilderX,点击左上角 文件 - 新建 - 项目 : 项目创建完毕之后,首先来分析

    2024年02月04日
    浏览(63)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(73)
  • uni-app 微信小程序蓝牙模块的解耦封装-持续更新

    core.js tool.js util.js main.js

    2024年03月27日
    浏览(94)
  • uni-app小程序实现音频播放,uniapp播放录音,uniapp简单实现播放录音

    复制到.vue文件即可预览效果 问题 :开发者工具中.onTimeUpdate方法可能会失效! 官方参考:https://uniapp.dcloud.net.cn/api/media/audio-context.html# 其他博客参考:https://blog.csdn.net/weixin_45328705/article/details/114091301 录音实现参考 :https://blog.csdn.net/weixin_43992507/article/details/129857780

    2024年02月12日
    浏览(73)
  • uni-app小程序父组件数据更新,实现自定义组件刷新视图

    之前错误的思路 新思路(忽略我的参数命名,写文章的时候方便。)

    2024年02月16日
    浏览(48)
  • #Uniapp:uni-app中vue2生命周期--11个

    uni-app中vue2生命周期 生命周期钩子 描述 H5 App端 小程序 说明 beforeCreate 在实例初始化之后被调用 详情 √ √ √ created 在实例创建完成后被立即调用 详情 √ √ √ beforeMount 在挂载开始之前被调用 详情 √ √ √ mounted 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件

    2024年02月02日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包