【Uniapp】Uniapp 实现 App 版本自动升级

一、App 版本自动升级

Uniapp 的官方也提供了 App 升级的支持，升级中心 uni-upgrade-center，但是由于需要使用云端基于 uniCloud 云函数实现，对于项目来说，又多了一个服务端，管理起来较为麻烦，所以我们还是自定义版本自动升级，也方便实际开发中进行调整

此模块的代码可能还要调整一下，感觉比较繁琐

1、Uniapp 前端实现

common/checkappupdate.js

import request from "@/utils/common.js";
import config from '../config.js'

function check(param = {}) {

    // 合并默认参数
    param = Object.assign({
        title: "检测到有新版本！",
        content: "请升级app到最新版本！",
        canceltext: "暂不升级",
        oktext: "立即升级"
    }, param)
    plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
        let platform = plus.os.name.toLocaleLowerCase()
        request.request('/app/versionConfig/getCurrent', {}, 'get', function (result) {
            let data = result.data ? result.data : null;
            if (widgetInfo.version === data.versionCode) {
                return;
            }

            if (result.code == 200) {
                if (platform == 'ios') {
                    // 如果是ios,则跳转到appstore
                    plus.runtime.openURL(result.data.data.url)
                    return;
                }
                // android进行如下操作
                uni.showModal({
                    title: param.title,
                    content: data.log ? data.log : param.content,
                    showCancel: data.force ? false : true,
                    confirmText: param.oktext,
                    cancelText: param.canceltext,
                    success: res => {
                        if (!res.confirm) {
                            console.log('取消了升级');
                            plus.runtime.quit();
                        }
                        if (data.shichang === 1) {
                            //去应用市场更新
                            plus.runtime.openURL(data.shichangurl);
                            plus.runtime.restart();
                        } else {
                            // 清除缓存
                            request.clearLogin();


                            // 开始下载
                            // 创建下载任务
                            var dtask = plus.downloader.createDownload(config.baseUrl + data.versionUrl, {
                                    filename: "_downloads/"
                                },
                                function (d, status) {
                                    // 下载完成
                                    if (status == 200) {
                                        plus.runtime.install(d.filename, {
                                            force: true
                                        }, function () {
                                            //进行重新启动;
                                            plus.runtime.restart();
                                        }, (e) => {
                                            uni.showToast({
                                                title: '安装升级包失败:' + JSON
                                                    .stringify(e),
                                                icon: 'none'
                                            })
                                        });
                                    } else {
                                        this.tui.toast("下载升级包失败，请手动去站点下载安装，错误码: " +
                                            status);
                                    }
                                });

                            let view = new plus.nativeObj.View("maskView", {
                                backgroundColor: "rgba(0,0,0,.6)",
                                left: ((plus.screen.resolutionWidth / 2) - 45) +
                                    "px",
                                bottom: "80px",
                                width: "90px",
                                height: "30px"
                            })

                            view.drawText('开始下载', {}, {
                                size: '12px',
                                color: '#FFFFFF'
                            });

                            view.show()


                            dtask.addEventListener("statechanged", (e) => {
                                if (e && e.downloadedSize > 0) {
                                    let jindu = ((e.downloadedSize / e.totalSize) *
                                        100).toFixed(2)
                                    view.reset();
                                    view.drawText('进度:' + jindu + '%', {}, {
                                        size: '12px',
                                        color: '#FFFFFF'
                                    });
                                }
                            }, false);
                            dtask.start();
                        }
                    }
                })
            }
        })
    });
}

export default {
    check
}

App.vue 中调用检查更新

<script>
    import checkappupdate from 'common/checkappupdate.js'
    
    export default {
        onLaunch: function () {
            checkappupdate.check({
                title: '检测到有新版本！',
                content: '请升级app到最新版本！',
                canceltext: '暂不升级',
                oktext: '立即升级'
            });
        }
    }
</script>

2、SpringBoot 后端实现

我的后端表格设计比较简单，是否当前版本设计的比较简单，方便回滚版本

相应的SQL语句

drop table if exists biz_version_config;

/*==============================================================*/
/* Table: biz_version_config                                     */
/*==============================================================*/
create table biz_version_config
(
   id                   int(11) not null auto_increment comment '主键',
   version_code         varchar(255) comment '版本号',
   version_url          varchar(255) comment '下载地址',
   version_remark       varchar(255) comment '版本备注',
   is_current           int(11) comment '当前版本 1-是 2-否',
   create_by            varchar(64) default '' comment '创建者',
   create_time          datetime comment '创建时间',
   update_by            varchar(64) default '' comment '更新者',
   update_time          datetime comment '更新时间',
   status               tinyint(1) comment '状态 1-正常2-删除',
   primary key (id)
)
ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COMMENT = 'app版本配置' ROW_FORMAT = Dynamic;

alter table wm_version_config comment 'app版本配置';

然后就是后端的版本管理CRUD，这里就不在一一阐述了，还要增加有个接口，查询当前版本，条件直接使用

where is_current = 1

技术分享区