1. Johngo学长首页
  2. 技术点详细复盘专题
  3. 人工智能

UNIAPP中IOS和安卓应用热更新和整包更新app的方法

• 人工智能 • 阅读 173

文章目录

前言

公司有一个项目《配送APP》是用uniapp开发的，用于公司几百号骑士员工使用，功能已经很完备，具有分配配送任务，接单，取餐，完成，打卡等功能，用得一直很好，但唯一一个缺点是，当APP功能上有升级时需要通知全体骑手手动把旧版本卸载了，再手工下载新版本安装，更新升级是十分麻烦，尤其年龄稍大一些人员在升级和更新时操作上有些困难，为了解决了这个问题，反反复复百度了一下相关的UNIAPP热更新方案是可以做到的，那我们来一步步的为项目增加热更新和升级的功能

UNIAPP中IOS和安卓应用热更新和整包更新app的方法
此方法经验证可以实现android app ,ios app,企业版iosapp的热更新

; 一、在应用启动的APP.VUE里增加版本检测代码

1.APP.VUE里引入hotupdate包

  import hotupdate from './common/hotupdate.js';

//
            console.log('APP-PLUS 1');
            plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
                uni.setStorageSync("curversion", widgetInfo.version);
                let curversion = widgetInfo.version;
                console.log("当前版本", curversion);
                hotupdate.getAppByVersion(curversion, true);
            });
            //

完整代码如下:

<script>
  // import api from './api/api.js';
  import websocket from './common/websocketStore.js';
  import hotupdate from './common/hotupdate.js';
    export default {
        onLaunch: function() {

            console.log('App Launch 1');
            //
            console.log('APP-PLUS 1');
            plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
                uni.setStorageSync("curversion", widgetInfo.version);
                let curversion = widgetInfo.version;
                console.log("当前版本", curversion);
                hotupdate.getAppByVersion(curversion, true);
            });
            //

            // 初始换 建立websocket连接
            websocket.dispatch('WEBSOCKET_INIT', "ws://1.1.1.1:9501");
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
    }
</script>

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

二、第二步增加hotupdate包用于处理热更新下载安装包

1.在项目录的common目录新增加hotupdate.js文件

import api from '../api/api.js';
async function getversion(success, fail) {
    let params = {};
    if (uni.getSystemInfoSync().platform == "ios") {
        params = {
            app: "kdapp",
            type: "ios",
        };
    } else {
        params = {
            app: "kdapp",
            type: "android",
        };
    }
    console.log("api");

    api.version(params, function(res) {
        console.log('version res');
        console.log(res);
        if(res.status == 0)
        {
            if(res.data.version != 1)
            {

            }
        }
        else
        {
            console.log('error');
            uni.showToast({
                title: res.msg,
                icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
                duration: 3000    //持续时间为 2秒
            });
        }
    });
}

function update(fileName) {
    let downURL =  fileName;
    console.log('下载地址', downURL);
    //后台显示进度条
    let dtask = plus.downloader.createDownload(
        downURL, {},
        function(d, status) {
            //下载完成
            uni.showModal({
                title: "更新提示",
                content: "新版本已经准备好，是否更新应用？",
                success: (res) => {
                    if (res.confirm) {
                        install(d, status);
                    }
                },
            });
        }
    );
    start(dtask);
};

function start(dtask) {
    try {
        dtask.start(); //开启下载任务
        let prg = 0;
        let showLoading = plus.nativeUI.showWaiting("正在下载");
        dtask.addEventListener("statechanged", function(task, status) {
            switch (task.state) {
                case 1:
                    showLoading.setTitle("正在下载");
                    break;
                case 2:
                    showLoading.setTitle("已连接到服务器");
                    break;
                case 3:
                    prg = parseInt(
                        (parseFloat(task.downloadedSize) /
                            parseFloat(task.totalSize)) *
                        100
                    );
                    showLoading.setTitle("  正在下载" + prg + "%  ");
                    break;
                case 4:
                    plus.nativeUI.closeWaiting();
                    break;
            }
        });

    } catch (err) {
        plus.nativeUI.closeWaiting();
        uni.showToast({
            title: "更新失败-03",
            mask: false,
            duration: 1500,
        });
    }
};

function install(d, status) {
    //下载完成
    if (status === 200) {
        plus.runtime.install(d.filename, {
            force: false
        }, function() {
            plus.nativeUI.closeWaiting();
            plus.nativeUI.alert("应用资源更新完成！是否重启应用！", function() {
                plus.runtime.restart();
            });
        }, function(e) {
            plus.nativeUI.closeWaiting();
            console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
            plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
        });
    } else {
        uni.showToast({
            title: "下载失败",
            mask: false,
            duration: 1500,
        });
    }
};

function close(version) {
    try {
        console.log( '保存要跳过的版本', version)
        uni.setStorageSync('skip_version', version);
    } catch (e) {
        // error
    }
};

function signOut() {
    //
    plus.runtime.quit();
    //
}

export default{
    getAppByVersion(curversion, back) {
        console.log("came in");
        let params = {};
        if (uni.getSystemInfoSync().platform == "ios") {
            params = {
                app: "kdapp",
                type: "ios",
                appversion: curversion,
            };
        } else {
            params = {
                app: "kdapp",
                type: "android",
                appversion: curversion,
            };
        }
        api.version(params, function(res) {
            console.log('version res');
            console.log(res);
            if (res.status == 0 && res.data) {
                let result = res.data;
                if(back){
                    try {
                        const value = uni.getStorageSync('skip_version');
                        console.log( '是否跳过当前版本',value, result.version)
                        if (value && value === result.version) {
                            return;
                        }
                    } catch (e) {

                    }
                }
                if (result.version != curversion) {
                    console.log('有新版本要更新', result);
                    console.log('新版本', result.version);
                    console.log('目前版本', curversion);
                    result.back = back;
                    if (uni.getSystemInfoSync().platform != "ios") {
                        plus.nativeUI.confirm("系统提示", function(e) {
                            console.log(e);
                            if (e.index == 0) {
                                console.log('update');
                                update(result.downurl);
                            } else if (result.strategy == 'force') {
                                signOut();
                            } else if (result.strategy == 'recommend') {
                                close(result.version);
                            }
                        }, {
                            "title": "新版本",
                            "buttons": ["立即更新", result.strategy == 'force' ? "退出应用" : "暂不更新"]
                        });
                    }
                    else
                    {
                        uni.showModal({
                            title:"更新提示",
                            content: "请点击按钮复制链接，粘贴到Safari浏览器打开，下载最新版本",
                            confirmText: "点击复制",
                            showCancel:false,
                            success:()=>{
                                uni.setClipboardData({
                                    data:"https://xxxx.xxxxx.xxxx/upload/peisong/index.html",
                                    success:()=>{
                                        uni.showToast({
                                            title:"复制链接成功，请粘贴到Safari浏览器打开"
                                        })
                                    }
                                })
                            }
                        });
                    }
                } else if (!back) {
                    //plus.nativeUI.alert("当前已是最新版本！");
                }
            }
            else if (res.status != 0)
            {
                console.log('error');
                uni.showToast({
                    title: res.msg,
                    icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
                    duration: 3000    //持续时间为 2秒
                });
            }else if (!back) {
                    //plus.nativeUI.alert("当前已是最新版本！");
            }
        });

    }

}

三、服务器端需要增加一个接口用于查询是否有新版本

如果有返回新版本的详细信息，包括下载地址，这里简单提供一下存储app版本的mysql数据表结构，每个版本的每一端存放一条记录

CREATE TABLE my_db.dbpree_app_version(
  id int(11) NOT NULL AUTO_INCREMENT,
  type varchar(20)  NOT NULL default '' COMMENT 'type: android ios ',
  version varchar(32)  NOT NULL default '' COMMENT 'app版本号',
  is_new tinyint(1)  NOT NULL default '0' COMMENT '是否最新版本',
  des varchar(255)  NOT NULL default '' COMMENT '版本描述',
  downurl tinyint(1)  NOT NULL default '0' COMMENT '下载地址',
  add_time int(10) UNSIGNED NOT NULL default 0 COMMENT '添加时间',
  PRIMARY KEY (id),
  INDEX type(type),
  INDEX version(version),
  INDEX is_new(is_new)
)ENGINE=InnoDB AUTO_INCREMENT=1;

简单的PHP查询数据库后返回的版本信息：

if($receive_data['c'] == 'version'){
    $type = $_REQUEST['type'] ? trim($_REQUEST['type']) : '';
    $sql = "select * from " . $GLOBALS['site']->table('app_version') . " where is_new=1 and type='$type'";
    $version = $db->getRow($sql);
    if($version){
        appMake_json_result($version);
    }else{
        appMake_json_error(3001, "没有查到对应版本信息");
    }
}

基本上这样就实现的uniapp打包的anorid和ios app的热更新的效果，非常好用

总结

uniapp实现app热更新,经过简单改进就可以用上，挺不错的，分亨出来供大家参考。最后，提醒一下，android,ios 和企业版ios的应用下载方式和不一样：
android 直接下载就可以了
ios 可以提示跳到苹果的应用市场
企业版的ios 可以提示复制下载地址后，到Safari浏览器粘贴地址下载的方式实现更新

文章中的方法项目组中的张同学也参与了开发与测试

如有问题请留言反馈，若对您有帮助，请帮点个赞，谢谢！

Original: https://blog.csdn.net/itopit/article/details/124620871
Author: 北漂燕郊杨哥
Title: UNIAPP中IOS和安卓应用热更新和整包更新app的方法

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/542501/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球