H5+app -- 自动更新
一、最近做了一个app自动更新功能,用的基本都是网上找得到的。
1、h5+ 规范 : http://www.html5plus.org/doc/zh_cn/maps.html
2、环形进度条插件:http://www.jq22.com/jquery-info4495(不知道什么原因,下载的时候,没有显示任何提示,所以人为加个下载的提示)
二、本来用的mui框架也有进度条提示,但是好单调,又不显眼。
1、效果如下,虽然说超方便的。mui 样式:http://dev.dcloud.net.cn/mui/ui/#progressbar,html这里就不整理了,链接里有。
2、右边为 ‘环形进度条插件’的效果
三、下面不多说,po上代码
1、html代码
<!-- lyj 圆形插件 -->
<link href="css/progressbar-css/base.css" rel="stylesheet" type="text/css" />
<link href="css/progressbar-css/project_base.css" rel="stylesheet" type="text/css" />
<link href="css/progressbar-css/radialindicator.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.htmleaf-icon {
color: #fff;
}
.showOrHidden {
display: none; /*未进行下载更新前隐藏*/
}
</style>
<!-- 圆形进度条插件 -->
<!-- html -->
<h3 id="download-title" class="showOrHidden" style="float: left; position: absolute; top: 55%; left: 33%; color: green;">App下载中...</h3>
<div class="prg-cont rad-prg showOrHidden" id="indicatorContainer" style="float: left; position: absolute; top: 66%; left: 33%;"></div> <!-- html -->
<script src="js/mui.js"></script>
<script src="js/jquery.min.js"></script>
<!-- lyj 圆形插件 -->
<script type="text/javascript" src="js/progressbar/base.js"></script>
<script type="text/javascript" src="js/progressbar/project_base.js"></script>
<script>
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
<script src="js/progressbar/radialindicator.js"></script>
2.1、环形进度条 js
var appTotalSize; //将要下载的app的大小
$('#indicatorContainer').radialIndicator({
barColor: '#FFA500', //颜色,16进制
barWidth: 10, //宽度
initValue: 0, //初始值
roundCorner: true,
percentage: true
});
//动态set值
var radialObj = $('#indicatorContainer').data('radialIndicator');
2.2、自动更新 js
function updateApp() { plus.runtime.getProperty(plus.runtime.appid, function(inf) {
//获取app的版本信息
var ver = inf.version;
//接口地址
var url = $config.IP + '【你请求接口的地址】';
var ua = navigator.userAgent.toLowerCase(); //判断浏览器类型
if(/iphone|ipad|ipod/.test(ua)) { //苹果(暂无)
$.ajax({
type: "get",
dataType: 'json',
url: "https://itunes.apple.com/lookup?id=111030274", //获取当前上架APPStore版本信息
data: {
id: 111030274 //APP唯一标识ID
},
contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
success: function(data) {
console.log("jsjsjsjs" + json2string(data));
$.each(data, function(i, norms) {
$.each(norms, function(key, value) {
$.each(value, function(j, normItem) {
if(j == "version") {
if(normItem > ver) {
alert("发现新版本:V" + normItem);
document.location.href = 'https://itunes.apple.com/cn/app/san-gu-hui/id111030274?mt=8'; //上新APPStore下载地址
}
}
});
});
});
return;
}
});
} else if(/android/.test(ua)) {
//获取远程数据库中上新andriod版本号
mui.ajax(url, {
data: {
apkVersion: ver,
},
dataType: 'json',
type: 'GET',
timeout: 6000,
success: function(data) {
//比较版本信息
if(data.map.appVersion != ver) {
var btnArray = ['暂不更新', '立即更新'];
mui.confirm("发现新版本:V" + data.map.appVersion + ",是否立即更新安装?", '发现新版本', btnArray, function(e) {
if(e.index == 1) {
//显示环形进度条
$('#indicatorContainer').removeClass('showOrHidden');
$('#download-title').removeClass('showOrHidden');
//返回的app总大小
appTotalSize = data.map.totalSize;
mui.toast('版本更新中...');
//创建更新
var dtask = plus.downloader.createDownload(【下载app的地址的目录】, {
method: "POST",
data: data.map.fileName, //要下载的apk文件名
}, function(d, status) {
if(status == 200) {
sleep(300);
var path = d.filename; //下载apk
// console.log(path);
plus.runtime.install(path); // 自动安装apk文件
} else {
alert('版本更新失败:' + status);
}
});
//为下载添加监听事件
dtask.addEventListener("statechanged", onStateChanged, true);
//为下载添加请求头
dtask.setRequestHeader('Content-Type', 'application/json'); // 设置POST请求提交的数据类型为JSON字符串
dtask.start();
}
});
} else {
console.log('当前版本号已是最新');
return;
}
},
error: function(xhr, type, errerThrown) {
//mui.toast('网络异常,请稍候再试');
}
});
}
}); function onStateChanged(download, status) {
var i = download.downloadedSize;
//换算成百分比
i *= 100 / appTotalSize;
radialObj.animate(i); //显示部分的不足,就是网速差的情况会出现进度条的数值与实际有差别,网速差,怪我咯。
if(download.state == 4 && status == 200) {
// 下载完成
$('#indicatorContainer').addClass('showOrHidden');
$('#download-title').addClass('showOrHidden');
}
} }
四、如果想做简单点的,可以采用mui框架的进度条
1、将html部分改为
<div id="progressbar" class="mui-progressbar showOrHidden" >
<span></span>
</div>
2、js的 onStateChanged 方法修改
$('#progressbar').removeClass('showOrHidden');
function onStateChanged(download, status) {
var i = download.downloadedSize;
//换算成百分比
i *= 100 / appTotalSize;
mui('body').progressbar({
progress: i
}).show();
radialObj.animate(i);
if(download.state == 4 && status == 200) {
// 下载完成
$('#progressbar').addClass('showOrHidden');
}
}
五、最后,我不知道怎么处理安装后的apk安装包,有没有大神告知,如何处理安装完后的apk安装包?
H5+app -- 自动更新的更多相关文章
- Android学习系列(3)--App自动更新之自定义进度视图和内部存储
友好的视觉感知和稳定的不出错表现,来自于我们追求美感和考虑的全面性,博客园从技术的角度,一直我都很欣赏.这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 这 ...
- Web APP自动更新
我们的手机软件每天都要经营,经常需要更新,比如程序的Bug,好的功能,好的洁面... ... 这就需要我们的用户打开web app时候自动更新客户端程序,而不是再去应用程序商店从新下载.今天的笔记就是 ...
- web app升级—带进度条的App自动更新
带进度条的App自动更新,效果如下图所示: 技术:vue.vant-ui.5+ 封装独立组件AppProgress.vue: <template> <div> <va ...
- 解决“iOS 7 app自动更新,无法在app中向用户展示更新内容”问题
转自cocoachina iOS 7能在后台自动app,这对开发者来说和用户都很方便,但是还是有一些缺点.用户不会知道app本次更新的内容,除非他们上到app的App Store页面去查看.开发者也会 ...
- App自动更新(DownloadManager下载器)
一.开门见山 代码: object AppUpdateManager { const val APP_UPDATE_APK = "update.apk" private var b ...
- Android 云服务器的搭建和友盟APP自动更新功能的实现
setContentView(R.layout.activity_splash); //Bmob SDK初始化--只需要这一段代码即可完成初始化 //请到Bmob官网(http://www.bmob. ...
- 安卓---app自动更新
主要参考:http://blog.csdn.net/jdsjlzx/article/details/46356013/ 效果如下: 大致思路:[原文] 首先,我们要有一个可以被手机访问的后台. 这里有 ...
- Android App自动更新解决方案(DownloadManager)
一开始,我们先向服务器请求数据获取版本 public ObservableField<VersionBean> appVersion = new ObservableField<&g ...
- App自动更新之通知栏下载
见证过博客园的多次升级,你也希望你的软件通过更新发布新特性通知用户吧,是的.这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1.设计思路,使用Versio ...
随机推荐
- jsonp 跨域Uncaught SyntaxError: Unexpected token :解决方法
[jQuery]Ajax实现跨域访问JSON Ajax跨域访问JSON 环境:.net4.0+jQuery+JSON.net 因为在跨域实现,所以这里新建网站,这个网站只需要Ashx文件 public ...
- Focus on the Good 专注于好的方面
[1] Dealing with people is like digging for gold. When you go digging for an ounce of gold, you hav ...
- django2.0+反向查询抛异常处理
一.错误信息 AttributeError: 'RelatedManager' object has no attribute 'lrc' #其中RelatedManager为关键字 二.反向查询的字 ...
- Java编程思想——第17章 容器深入研究 读书笔记(二)
五.List的功能方法 排除Collection已包含的方法外还增加了 boolean addAll(int index, Collection<? extends E> c);从索引位置 ...
- Python3+PyCharm+PyQt5配置进行GUI开发
一.安装Python3.5以上版本. 链接:https://www.python.org/downloads/windows/ 二.安装PyQt5. 使用pip安装:1.进入 C:\Users\你的计 ...
- (20)ASP.NET Core EF创建模型(必需属性和可选属性、最大长度、并发标记、阴影属性)
1.必需和可选属性 如果实体属性可以包含null,则将其视为可选.如果属性的有效值不可以包含null,则将其视为必需属性.映射到关系数据库架构时,必需的属性将创建为不可为null的列,而可选属性则创建 ...
- 【websocket】spring boot 集成 websocket 的四种方式
集成 websocket 的四种方案 1. 原生注解 pom.xml <dependency> <groupId>org.springframework.boot</gr ...
- MongoDB-系统时钟跳变引发的风波
目录 背景 一. 对 oplog 的影响 oplog 原理 二.主备倒换 小结 声明:本文同步发表于 MongoDB 中文社区,传送门: http://www.mongoing.com/archive ...
- mybatis 使用redis实现二级缓存(spring boot)
mybatis 自定义redis做二级缓存 前言 如果关注功能实现,可以直接看功能实现部分 何时使用二级缓存 一个宗旨---不常变的稳定而常用的 一级是默认开启的sqlsession级别的. 只在单表 ...
- python-从文件中读取数据
一.读取整个文件 learnFile.py 绝对路径 # coding=UTF-8 import sys reload(sys) with open(r'C:\Users\zhujiachun\Des ...