h5+App强制弹框更新以及手动更新，带进度条

最新推荐文章于 2022-09-04 22:35:15 发布

lea_

最新推荐文章于 2022-09-04 22:35:15 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/m0_46550723/article/details/104837380

版权

本文介绍了H5 App如何实现版本更新的自动弹框和手动更新，包括检查当前应用版本与线上最新版本的对比，点击更新后的资源下载过程，以及使用mixin混入更新配置文件来实现弹框提示。

摘要由CSDN通过智能技术生成

思路

先理清思路，自动出现版本更新的弹框需要检查当前应用的版本，获取线上发布的最新版本，对比之后判断是否出现弹框。
点击更新检查资源，显示进度条，下载完成之后系统自动跳转至安装
安装完成之后可替换之前的版本

检测更新文件配置

import AppService from "../../service/AppService";
import { Toast } from 'vant';
import store from "../../store/store";
import _this from '../../main';
import i18n from '../i18n/index';

var wgtUrl = "";
export default {
    data() {
        return {
            showProgress: false,
            percentageVal: 0,
            path:''
        }
    },
    methods: {
        // 应用检测更新
        appUpdate(ismanual) {
            // 根据ismanual判断是否为手动更新true为手动，false为自动检测
            if (!window.plus) return
            if (ismanual) {
                // 手动检测时，如果有新版本则开始下载安装，否则提示当前已为最新版本
                /* try {
                    window.plus.nativeUI.showWaiting("正在检测更新...");
                } catch (e) {
                    console.log(e)
                } */
            } else {
                // 自动检测时，如果有新版本则弹出弹框，否则不显示任何

            }
            // 查询当前应用的版本号
            var wgtVer = null;
            window.plus.runtime.getProperty(window.plus.runtime.appid, (inf) => {
                wgtVer = inf.version;
                this.checkUpdate(ismanual, wgtVer);
            });
        },

        // 通过接口检测是否有更新版本
        async checkUpdate(ismanual, version) {
            // 根据接口获取最新版本，并与当前版本对比，如果有更新，则开始更新
            var wgtVer = null, updateInfo = null, updateInfoEn = null;//
            try {
                let res = await AppService.appUpdate();
                window.plus.nativeUI.closeWaiting();
                if (res) {
                    wgtVe