摘要:本文将带你了解WebApp开发中如何进行在线差异化升级,希望本文对大家学WEBAPP有所帮助。
使用H5开发app,主要考虑了两点:
1.一套代码可以生成安卓和iOS 两个平台的app;
2.在线升级(差异化升级和整包升级)。
到现在公司的两款app也基本做完了,期间还做了很多新需求进去了。总体感觉使用H5做app,做界面比原生简单、快,但是用户体验上没法和原生相比,特别是这种电商类的app,一般项目都比较大、页面跳转复杂、业务逻辑多,使用上和原生相比没有任何优势(忽略上面的两点);加上五一之后,苹果生审核政策变了,主要是审核加速了,以前需要两周左右的时间现在一周内就可以搞定(一次是4月29号提交的,1天通过;一次是6月15号提交的,一天通过;还有一次是7月5号提交的,花了两三天也通过了)。而且苹果的政策是严禁应用内升级的。以前做了版本号显示的,点击可以跳转到苹果商店升级都被拒绝了,后来干脆把这个功能干掉了,因为苹果现在应用升级它都会推送给用户,不需要我们再在app里面做检查更新操作了,但是对于企业包来说,可以忽略这些。安卓的各大市场上线时间也是很快的,基本可以不考虑。
再来看看上面两点:感觉就是第一点有优势,因为可以节约成本,而且我们把app的代码组做些修改就可以是做成微信版本的。
个人观点:对于小型app或是app里面的部分模块可以使用H5开发,对于大型的app,不建议使用H5做,因为节约的这点成本,对于产品因为良好的用户体验而获取的用户来说,这个成本不算什么,一般的公司也很难把H5的app的体验做到和原生相差无几。
我们使用的是MUI框架,编译器是HBuilder。
主要介绍的应用差异化升级。
整包升级
整包升级,先看看官方的文档《整包(apk/ipa)升级》。官方的介绍也是比较详细的,由于本人没有做过整包升级,所以这里不做描述。但是有一点需要注意的:
差异化升级
先看官方文档
《App资源在线升级更新》
《App资源在线差量升级更新》
这两篇文章里面已经详细的介绍了差异化升级的流程和制作wgt升级包的步骤和注意事项。
在官方的代码的基础上我做了一点小的修改。
首先新建一个update.js的文件,里面的代码如下:
var wgtVer=null;function plusReady(){
// 获取本地应用资源版本号 plus.runtime.getProperty(plus.runtime.appid,function(inf){ wgtVer=inf.version; console.log("当前应用版本:"+wgtVer); }); }if(window.plus){ plusReady(); }else{ document.addEventListener('plusready',plusReady,false); } // 检测更新// 实际项目中需要更换为自己服务器的地址var checkUrl="//demo.dcloud.net.cn/test/update/check.php";function checkUpdate(){ plus.nativeUI.showWaiting("检测更新..."); var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ switch(xhr.readyState){ case 4: plus.nativeUI.closeWaiting(); if(xhr.status==200){ console.log("检测更新成功:"+xhr.responseText); var newVer=xhr.responseText; if(wgtVer&&newVer&&(wgtVer!=newVer)){ downWgt(); // 下载升级包 }else{ plus.nativeUI.alert("无新版本可更新!"); } }else{ console.log("检测更新失败!"); plus.nativeUI.alert("检测更新失败!"); } break; default: break; } } xhr.open('GET',checkUrl); xhr.send(); }// 下载wgt文件// 实际项目中需要更换为自己服务器的地址var wgtUrl="//demo.dcloud.net.cn/test/update/H5EF3C469.wgt";function downWgt(){ plus.nativeUI.showWaiting("下载wgt文件..."); plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){ if ( status == 200 ) { console.log("下载wgt成功:"+d.filename); plus.nativeUI.confirm("升级包下载完成,是否需要升级",function(e){ var sure = (e.index == 0) ? "Yes" : "No"; if (sure == 'Yes') { installWgt(d.filename); // 安装wgt包 } }) } else { console.log("下载wgt失败!"); plus.nativeUI.alert("下载wgt失败!"); } plus.nativeUI.closeWaiting(); }).start(); }// 更新应用资源function installWgt(path){ plus.nativeUI.showWaiting("安装wgt文件..."); plus.runtime.install(path,{},function(){ plus.nativeUI.closeWaiting(); console.log("安装wgt文件成功!"); plus.nativeUI.alert("应用资源更新完成!\n点击确定按钮重启完成升级",function(){ plus.runtime.restart(); }); },function(e){ plus.nativeUI.closeWaiting(); console.log("安装wgt文件失败["+e.code+"]:"+e.message); plus.nativeUI.alert("安装wgt文件失败["+e.code+"]:"+e.message); });
}/*
* 差异化升级流程:
* 1.启动app后在plusReady里面首先获取app版本
* 2.检查服务器版本
* 3.服务器版本大于本地app版本下载升级包,提示安装和升级
* 4.服务器版本小于等于本地版本时,不做任何操作
* 5.重启即可玩升级
*/
怎么使用呢?
我们只需要在一个.html文件里面引用这个js文件:
<script type="text/javascript" src="../js/update.js" ></script>
· 1
然后在mui.plusReady()方法里面调用checkUpdate()这个方法即可。
改进点
1. 升级的js文件里面不要使用Loading框,版本检测或是下载就让它静默操作就可以,值需要在是否安装升级包的时候给一个提示框即可;
2. 根据之前原生app被拒绝的经历来和用户体验的角度来说,我们可以在近app的时候定时一定时间后再调用checkUpdate()这个方法,如果能做一个软开关最好,上架审核期间先关闭这个功能,审核通过以后再打开这个功能。
总结
H5的app也做了两个,加之之前做原生的经验,总体来说使用H5开发app比原生简单一些、开发速度快,但是用户体验差。公司做产品也是在产品质量、开发周期、成本等因素中选取一个平衡点。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号