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

忘是亡心i 2022-08-31 15:24 1167阅读 0赞

### 文章目录 ###

*  一、App 版本自动升级
 *   *  1、Uniapp 前端实现
     *  2、SpringBoot 后端实现
 *  微信公众号

# 一、App 版本自动升级 #

Uniapp 的官方也提供了 App 升级的支持，[升级中心 uni-upgrade-center][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` 中调用检查更新

## 2、SpringBoot 后端实现 ##

我的后端表格设计比较简单，是否当前版本设计的比较简单，方便回滚版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzYyMjM3_size_16_color_FFFFFF_t_70]  
相应的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

# 微信公众号 #

![每天Get一个小技巧][Get]

[uni-upgrade-center]: https://uniapp.dcloud.io/uniCloud/upgrade-center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzYyMjM3_size_16_color_FFFFFF_t_70]: /images/20220829/33db9738b7d74e4c84b58fc2916704f9.png
[Get]: /images/20220829/c3e9bf62401e4ccf943c4f491eddb2ba.png