【Uniapp】Uniapp 實作 App 版本自動更新

文章目錄

• 一、App 版本自動更新
• • 1、Uniapp 前端實作
  • 2、SpringBoot 後端實作
• 技術分享區

一、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 後端實作

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版本配置';
           

where is_current = 1
           

技術分享區