一参考资料
二代码
- HTML代码
- CSS代码
- JS代码
- 接口代码

一、参考资料

http://ask.dcloud.net.cn/article/182

二、代码

1. HTML代码

<div class="mui-content"><div class="mui-scroll"><div class="login-img"><img src="data:images/icon.png" width="20%" /><p id="version">当前应用版本:</p></div></div><ul class="mui-table-view check" id="check"><li class="mui-table-view-cell"><div class="updateProDiv">更新进度:<progress value="" max="" id="proDownFile"></progress><span class="persent"></span></div><a href="#" id="update" class="mui-navigate-right">检查更新</a></li></ul></div>

2. CSS代码

#version{margin-top:20px;font-size: 18px;}
.check{margin-top: 58%;}
.check li{padding: 16px 11px;}
.check a{font-size: 20px;}
.check p{font-size: 18px;margin-top: 5px;}
progress {border-radius: 2px;border-left: 1px #ccc solid;border-right: 1px #ccc solid;border-top: 1px #aaa solid;background-color: #eee;}
progress::-webkit-progress-bar {background-color: #d7d7d7;}
progress::-webkit-progress-value {background-color: #aadd6a;}
.updateProDiv {display: none;}

3. JS代码

<script src="js/jquery-1.8.3.min.js"></script>
<script>var wgtVer=null;function plusReady(){ // 获取本地应用资源版本号plus.runtime.getProperty(plus.runtime.appid,function(inf){wgtVer=inf.version;version.innerHTML = '当前应用版本：'+wgtVer;});}if(window.plus){plusReady();}else{document.addEventListener('plusready',plusReady,false);}var ver;//休眠方法function sleep(numberMillis) {var now = new Date();var exitTime = now.getTime() + numberMillis;while (true) {now = new Date();if (now.getTime() > exitTime)return;}}mui('.mui-table-view-cell').on('click', '#update', function() {plus.runtime.getProperty(plus.runtime.appid, function(inf) {ver = inf.version;console.log("当前应用版本：" + ver);var url= app.baseurl+'index.php/api/other/version';var client;if(mui.os.ios) {client='ios';}else{client='android';}mui.ajax(url,{data:{version: ver,client:client},dataType:'json',type:'POST',timeout:10000,success:function(data){if(data.status==1){var btnArray = ['是', '否'];mui.confirm('最新version是：' + data.version+',是否更新', '发现最新版本', btnArray, function(z) {if (z.index == 0) {console.log('确定');$('.updateProDiv').css('display', 'block');$('#update').css('display', 'none');var dtask = plus.downloader.createDownload(data.url, {}, function(d, status) {if (status == 200) {clearInterval(i);$('.persent').html("100%");plus.nativeUI.toast("正在准备环境，请稍后！");sleep(1000);var path = d.filename;//_downloads yijietong.apkconsole.log(d.filename);$('#update').css('display', 'block');$('.updateProDiv').css('display', 'none');plus.runtime.install(path); // 安装下载的apk文件} else {alert('Download failed:' + status);}});dtask.start();var i = setInterval(function() {var totalSize = dtask.totalSize;var downloadedSize = dtask.downloadedSize;$('#proDownFile').attr('value', downloadedSize);$('#proDownFile').attr('max', totalSize);console.log(dtask.downloadedSize);console.log(dtask.totalSize);}, 100); //1000为1秒钟} else {console.log('不确定');return;}});}else{alert(data.message);}},error: function(xhr, type, errerThrown) {mui.toast('网络异常,请稍候再试');}});});});
</script>

3. 接口代码

    public function version(){$data = $_POST;$m_version=M('versions');$ret=$m_version->find();if($ret['version']==$data['version']){$this->ajaxReturn(array('status'=>0,'message'=>'当前版本已经是最新版！'));}else{$ret_data['status']=1;$ret_data['version']=$ret['version'];if($data['client']=='android'){$ret_data['url']=sp_get_asset_upload_path('apk/yijietong.apk',true);}else{ $ret_data['url']=sp_get_asset_upload_path('apk/yijietong.apk',true);}$this->ajaxReturn($ret_data);}}

1、mui app在线更新相关推荐

Android 系统（98）---Android app 在线更新那点事儿（适配Android6.0、7.0、8.0）
Android app 在线更新那点事儿(适配Android6.0.7.0.8.0) 一.前言 app在线更新是一个比较常见需求,新版本发布时,用户进入我们的app,就会弹出更新提示框,第一时间更新新 ...
mui app自定义图标
Mui使用的图标不是单纯的图片方式,在这里我们从图标的选择.下载.引用来说明一下: 先打开阿里巴巴矢量图标库 http://www.iconfont.cn/home/index?spm=a313x.7 ...
Mui --- app与服务器之间的交互原理、mui ajax使用
1.APP与服务器之间的交互原理app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果.结果可以是多种格式: 1.text 文本格式 2.xm ...
利用H5+实现APP在线更新
1 在APP首页添加以下js代码 // 获取本地应用资源版本号 plus.runtime.getProperty(plus.runtime.appid,function(inf){wgtVer = i ...
mui APP复制粘贴,Native.js复制粘贴
/*** @description 获取剪贴板内容 (粘贴)*/ function getClipbordText() {if(!window.plus) return;if(mui.os.andro ...
mui app webview 沉浸式导航_AR实景导航轻松找到网约车！高崎机场推出网约车专属上车区等便民举措...
■AR实景导航. 台海网10月28日讯据厦门晚报报道拿着手机,跟随AR实景导航就可以直达网约车停放点.今天上午,滴滴与元翔厦门空港在高崎机场联合推出乘客休息室.AR步行导航.网约车专属上车区等举措 ...
APP在线更新下载安装（转载）
https://www.cnblogs.com/fuchangmeng/p/5647344.html https://blog.csdn.net/bzlj2912009596/article/deta ...
mui App 关于iPhonex 页面适配问题
按照网上方法: 引入 <meta name="viewport" content="width=device-width,user-scalable=no,init ...
Android 通过蒲公英pgyer的接口 Service 实现带进度下载App 通知栏显示在线更新自动更新Demo
Android 通过蒲公英pgyer的接口 Service 实现带进度下载App 通知栏显示在线更新自动更新Demo 标签: app在线更新下载Update升级 2016-09-18 20:47 ...

1、mui app在线更新

一、参考资料

二、代码

1. HTML代码

2. CSS代码

3. JS代码

3. 接口代码

1、mui app在线更新相关推荐

最新文章

热门文章