Uniapp 写一个在线更新带有进度条的更新提示框,在线请求服务端更新APP最新版本
发布时间:2022-02-25 11:55:58 作者:米站 阅读量:51

第一步在前端每次用户进入APP 去请求服务端最新版本,前端给一个版本,如果服务端大于当前版本,就提示更新。后端php,java,C,GO都行。

1:在Uniapp框架APP.vue里面写上每次进入app 请求接口问题

onShow: function() {

  setTimeout(()=>{

this.api.getVersion();

},1200);

getVersion()为自定义接口处理更新逻辑

2:更新逻辑

/**

* 获取版本检查更新

* @param {Boolean} type true手动触发,false自动

*/

getVersion(type) {

let that=this;

type = typeof type == "boolean" ? type : false;

http.shop().get('getVersion', {}, function(result) {

if (result.data.version <= version) {

if (type) {

custom.tool.showToast('已是最新版本');

}

                return false;

}

//如果手动触发检查更新则直接提示更新

if (type) {

that.msgUpdate(result);

return false;

}

//如果是自动触发则查看用户是否跳过了更新

uni.getStorage({

key: 'versionUpdate',

success: function(res) {

if (res.data >= result.data.version) {

return false;

}

that.msgUpdate(result);

},

fail: function() {

                    if (result.data.version <= version) {

                        custom.tool.showToast('已是最新版本');

                        return false;

                    }

that.msgUpdate(result);

}

});


}, '', false);

},



/**

* 提示更新

* @param {Object} result

*/

msgUpdate(result) {

let that=this;

//提示更新

uni.showModal({

title: "发现新版本",

content: result.data.content,

confirmText: '更新',

cancelText: '取消',

confirmColor: '#0BCCED',

success: (res) => {

//当用户确定更新,执行更新

if (res.confirm) {

that.updateApp(result.data.wget);

} else if (res.cancel) {

//缓存用户的选择

/*uni.setStorage({

key: 'versionUpdate',

data: result.data.version,

success: function() {}

});*/

custom.tool.showToast('已取消更新,可在设置中手动检查更新');

}

}

});

},


/**

* 执行更新

* @param {Object} wget app下载地址

*/

updateApp(wget) {

uni.showLoading({

title: '更新中……',

            mask:true

});

let dtask = plus.downloader.createDownload(wget, {}, function(d, status) {

uni.hideLoading();

//d为下载的文件对象

if (status == 200) {

//下载成功,d.filename是文件在保存在本地的相对路径,使用下面的API可转为平台绝对路径

let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);

uni.showModal({

title: '',

content: '更新成功,确定现在重启吗?',

confirmText: '重启',

confirmColor: '#EE8F57',

success: function(res) {

if (res.confirm) {

//执行安装

plus.runtime.install(

fileSaveUrl, {

force: true

},

function() {

custom.tool.showToast('更新成功,正在重启', true, 1800);

plus.runtime.restart();

},

function(e) {

custom.tool.showToast('更新失败');

}

);

}

}

});

// plus.runtime.openFile(d.filename); //选择软件打开文件

} else {

//下载失败

plus.downloader.clear(); //清除下载任务

}

})

        dtask.start();

        var prg = 0;

        var 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:

                    uni.hideLoading();

                    prg = parseInt(//下载的进度

                        (parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100

                    );

                    showLoading.setTitle("正在下载" + prg + "% ");

                    break;

                case 4:

                    plus.nativeUI.closeWaiting();//关闭系统提示框

                    //下载完成

                    break;

            }

        });

},



看效果吧哈哈哈!


我要评论 登录后才能发布评论

搜索

  热门标签


用户登录
account_circle
Copyright©2022 米站互联   
渝ICP备18003878号
http://blog.rziqee.cn/index.php/
Catfish(鲶鱼) CMS V 6.4.0
留言
email
account_circle
textsms