前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >UniAPP 安卓应用版本自动更新及下载安装

UniAPP 安卓应用版本自动更新及下载安装

作者头像
泥豆芽儿 MT
发布2019-06-22 14:37:38
6K0
发布2019-06-22 14:37:38
举报
  • 前言 近期进行 Uniapp 的开发过程,最后需要实现版本的自动检测和更新下载操作 特地在此进行文章的整理,以方便道友们减少前进道路上的坎坷,多谢指摘 … 注: 本次指导,以更新 安卓应用为案例,ios、小程序等可举一反三,稍作优化!
  • 设计思路
代码语言:javascript
复制
	1.  在服务端配置一个最新的应用版本号;
		并将打包生成的 apk(安卓应用) 置于服务器,保证可成功访问的链接
	2.  在前端 Uniapp 的最常用的访问页面 (比如,鄙人选取的是 首页vue);
		设置当前应用的版本号;
		并进行代码编写,判断缓存时间和版本号的大小;
		进而通过提示窗口,指导用户实现版本的更新下载等 ...
  • 服务端代码配置 以我的 PHP实现方式为例如下,注意:补充了一下鄙人自定义使用的函数 showMsg()
代码语言:javascript
复制
	 /**
     * 检测安卓版本的请求链接
     * @param Request $request
     */
	public function checkAndroidVersion(Request $request){
		//此处 version 为配置的一个版本号,整数,例:102
        $version = config("app.android_app_version");
        return showMsg(1,"checkAndroidVersion",['version'=>$version,'timestamp'=>time()]);
    }

	//TODO 补充自定义函数 showMsg()
	/**
	 * 公用的方法  返回json数据,进行信息的提示
	 * @param $status 状态
	 * @param string $message 提示信息
	 * @param array $data 返回数据
	 */
	function showMsg($status,$message = '',$data = array()){
	    $result = array(
	        'status' => $status,
	        'message' =>$message,
	        'data' =>$data
	    );
	    exit(json_encode($result));
	}
  • UniAPP 前端代码配置指导
  1. 首先进行当前版本号的设置 一般每次确定发布前进行更新即可,同事保证和服务器中的版本号一致(建议使用整数)
代码语言:javascript
复制
data() {
			return {
				version:101,
			}
		},
  1. 然后进行检测操作 为保证版本检测的即时性,我选择将方法配置于 onShow()
代码语言:javascript
复制
onShow(){
			uni.getSystemInfo({
			    success:(res) => {
			        //检测当前平台,如果是安卓则启动安卓更新  
			        if(res.platform=="android"){  
			            this.AndroidCheckUpdate();  
			        }  
			    }  
			})
		},
  1. 后面就是具体的自定义方法 建议阅读代码,参考我的注释进行理解即可,不算麻烦
代码语言:javascript
复制
methods: {
			/**
			 * 安卓应用的检测更新实现
			 */
			AndroidCheckUpdate:function(){  
                var _this = this;  
                uni.request({
					//请求地址,设置为自己的服务器链接
                    url: GLOBAL.DOMAIN_URL+'/uniapi/checkAndroidVersion.html',
                    //method: 'GET',  
                    data: {},  
                    success: resMz => {
						var server_version = resMz.data.data.version;
						var currTimeStamp = resMz.data.data.timestamp;
						// 判断缓存时间
						uni.getStorage({
							key: 'tip_version_update_time',
							success: function (res) {
								var lastTimeStamp = res.data;
								if((lastTimeStamp+10) > currTimeStamp){
									//避免多次提醒,不要更新
									console.log("避免多次提醒,不要更新");
								}else{
									//重新设置时间戳
									_this.setStorageForAppVersion(currTimeStamp);
									//进行版本型号的比对 以及下载更新请求
									_this.checkVersionToLoadUpdate(server_version, _this.version);
								}
							},
							fail:function(res){
								_this.setStorageForAppVersion(currTimeStamp);
							}
						});
                    },  
                    fail: () => {},  
                    complete: () => {}  
                });  
            },  
			/**
			 * //设置应用版本号对应的缓存信息
			 * @param {Object} currTimeStamp 当前获取的时间戳
			 */
			setStorageForAppVersion:function(currTimeStamp){
				uni.setStorage({
					key: 'tip_version_update_time',
					data: currTimeStamp,
					success: function () {
						console.log('setStorage-success');
					}
				});
			},
			/**
			 * 进行版本型号的比对 以及下载更新请求
			 * @param {Object} server_version 服务器最新 应用版本号
			 * @param {Object} curr_version 当前应用版本号
			 */
			checkVersionToLoadUpdate:function(server_version,curr_version){
				console.log(server_version+'---'+curr_version);
				if(server_version > curr_version){
					//TODO 此处判断是否为 WIFI连接状态
				    if(plus.networkinfo.getCurrentType()!=3){
				        uni.showToast({  
				            title: '有新的版本发布,检测到您目前非Wifi连接,为节约您的流量,程序已停止自动更新,将在您连接WIFI之后重新检测更新',  
				            mask: true,  
				            duration: 5000,
							icon:"none"
				        });  
				        return;  
				    }else{
						uni.showModal({
							title: "版本更新",
							content: '有新的版本发布,检测到您当前为Wifi连接,是否立即进行新版本下载?',
							confirmText:'立即更新',
							cancelText:'稍后进行',
							success: function (res) {
								if (res.confirm) {
									uni.showToast({
										icon:"none",
										mask: true,
									    title: '有新的版本发布,检测到您目前为Wifi连接,程序已启动自动更新。新版本下载完成后将自动弹出安装程序',  
									    duration: 5000,  
									}); 
									//设置 最新版本apk的下载链接
									var downloadApkUrl = GLOBAL.DOMAIN_URL+"/apk/mzz2.apk";
									var dtask = plus.downloader.createDownload( downloadApkUrl, {}, function ( d, status ) {  
									        // 下载完成  
									        if ( status == 200 ) {   
									            plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename),{},{},function(error){  
									                uni.showToast({  
									                    title: '安装失败', 
									                    duration: 1500  
									                });  
									            })
									        } else {  
									             uni.showToast({  
									                title: '更新失败',
									                duration: 1500  
									             });  
									        }    
									    });  
									dtask.start();
								} else if (res.cancel) {
									console.log('稍后更新');
								}
							}
						});
					}
				}
			},


		}
  • 运行效果:
  • 附录:
  1. 如果 测试遇到报错 :ReferenceError: plus is not defined 那是因为没有使用安卓真机、虚拟机测试,如果使用了谷歌浏览器是不支持的哦
  2. 注意事项 AndroidCheckUpdate() 中的请求地址不要错哦 最新版本apk的下载链接 downloadApkUrl 不要配置错哦
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年06月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档