HBuilder mui App开发开发在线差异化升级

整包升级

整包升级，先看看官方的文档《整包(apk/ipa)升级》。官方的介绍也是比较详细的，由于本人没有做过整包升级，所以这里不做描述。但是有一点需要注意的： 

差异化升级

先看官方文档 
《App资源在线升级更新》 
《App资源在线差量升级更新》 
这两篇文章里面已经详细的介绍了差异化升级的流程和制作wgt升级包的步骤和注意事项。 
在官方的代码的基础上我做了一点小的修改。 
首先新建一个update.js的文件，里面的代码如下：
 

1. var wgtVer=null; 
2. function plusReady(){ 
3.     // 获取本地应用资源版本号 
4.     plus.runtime.getProperty(plus.runtime.appid,function(inf){ 
5.         wgtVer=inf.version; 
6.         console.log("当前应用版本："+wgtVer); 
7.     }); 
8. } 
9. if(window.plus){ 
10.     plusReady(); 
11. }else{ 
12.     document.addEventListener('plusready',plusReady,false); 
13. } 
14.  
15. // 检测更新 
16. // 实际项目中需要更换为自己服务器的地址 
17. var checkUrl="http://demo.dcloud.net.cn/test/update/check.php"; 
18. function checkUpdate(){ 
19.     plus.nativeUI.showWaiting("检测更新..."); 
20.     var xhr=new XMLHttpRequest(); 
21.     xhr.onreadystatechange=function(){ 
22.         switch(xhr.readyState){ 
23.             case 4: 
24.             plus.nativeUI.closeWaiting(); 
25.             if(xhr.status==200){ 
26.                 console.log("检测更新成功："+xhr.responseText); 
27.                 var newVer=xhr.responseText; 
28.                 if(wgtVer&&newVer&&(wgtVer!=newVer)){ 
29.                     downWgt();  // 下载升级包 
30.                 }else{ 
31.                     plus.nativeUI.alert("无新版本可更新！"); 
32.                 } 
33.             }else{ 
34.                 console.log("检测更新失败！"); 
35.                 plus.nativeUI.alert("检测更新失败！"); 
36.             } 
37.             break; 
38.             default: 
39.             break; 
40.         } 
41.     } 
42.     xhr.open('GET',checkUrl); 
43.     xhr.send(); 
44. } 
45. // 下载wgt文件 
46. // 实际项目中需要更换为自己服务器的地址 
47. var wgtUrl="http://demo.dcloud.net.cn/test/update/H5EF3C469.wgt"; 
48. function downWgt(){ 
49.     plus.nativeUI.showWaiting("下载wgt文件..."); 
50.     plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){ 
51.         if ( status == 200 ) {  
52.             console.log("下载wgt成功："+d.filename); 
53.             plus.nativeUI.confirm("升级包下载完成，是否需要升级",function(e){ 
54.                     var sure = (e.index == 0) ? "Yes" : "No"; 
55.                     if (sure == 'Yes') { 
56.                         installWgt(d.filename); // 安装wgt包 
57.                     } 
58.             }) 
59.         } else { 
60.             console.log("下载wgt失败！"); 
61.             plus.nativeUI.alert("下载wgt失败！"); 
62.         } 
63.         plus.nativeUI.closeWaiting(); 
64.     }).start(); 
65. } 
66. // 更新应用资源 
67. function installWgt(path){ 
68.     plus.nativeUI.showWaiting("安装wgt文件..."); 
69.     plus.runtime.install(path,{},function(){ 
70.         plus.nativeUI.closeWaiting(); 
71.         console.log("安装wgt文件成功！"); 
72.         plus.nativeUI.alert("应用资源更新完成!\n点击确定按钮重启完成升级",function(){ 
73.             plus.runtime.restart(); 
74.         }); 
75.     },function(e){ 
76.         plus.nativeUI.closeWaiting(); 
77.         console.log("安装wgt文件失败["+e.code+"]："+e.message); 
78.         plus.nativeUI.alert("安装wgt文件失败["+e.code+"]："+e.message); 
79.     }); 
80. } 
81. /* 
82.  * 差异化升级流程： 
83.  * 1.启动app后在plusReady里面首先获取app版本 
84.  * 2.检查服务器版本 
85.  * 3.服务器版本大于本地app版本下载升级包，提示安装和升级 
86.  * 4.服务器版本小于等于本地版本时，不做任何操作 
87.  * 5.重启即可玩升级 
88.  */ 

怎么使用呢？ 
我们只需要在一个.html文件里面引用这个js文件：

<script type="text/javascript" src="../js/update.js" ></script>

然后在mui.plusReady()方法里面调用checkUpdate()这个方法即可。

改进点

1. 升级的js文件里面不要使用Loading框，版本检测或是下载就让它静默操作就可以，值需要在是否安装升级包的时候给一个提示框即可；
2. 根据之前原生app被拒绝的经历来和用户体验的角度来说，我们可以在近app的时候定时一定时间后再调用checkUpdate()这个方法，如果能做一个软开关最好，上架审核期间先关闭这个功能，审核通过以后再打开这个功能。

总结

H5的app也做了两个，加之之前做原生的经验，总体来说使用H5开发app比原生简单一些、开发速度快，但是用户体验差。公司做产品也是在产品质量、开发周期、成本等因素中选取一个平衡点。
来源：http://blog.csdn.net/zhuming3834/article/details/51870626