Hbuider制作app升級包的簡單辦法 (升級官方提供的案例)

源文檔：http://ask.dcloud.net.cn/question/11795
http://ask.dcloud.net.cn/article/199

一、生成移動App資源升級包

    5+應用可使用以下方式進行升級 
        - 整包升級：適用於大版本更新，新增5+模塊時必須使用此類更新方法 
        - 應用資源升級：適用於小版本更新 
        - 應用資源差量升級：適用於小版本更新

        需HBuilder5.4.0以上版本才有此功能
        在HBuilder中編輯好新的移動App資源后，更新manifest.json的版本號

原來版本是1.0，新版本修改為2.0：

    在HBuilder中生成升級包文件（wgt）
    菜單“發行” -> “制作移動App資源升級包”：

    在以下界面中通過“瀏覽”按鈕選擇保存路徑，點擊“確定”保存wgt文件：

生成wgt后提交到手機可訪問的網絡地址
App資源升級包下載地址：
http://XXXXXX/H5EF3C469.wgt
//后台
http://xxx.net.cn/test/update/check.php

生成移動App資源差量升級包
官方原文：生成差量升級包
顧名思義，差量升級包是針對某個歷史版本到新版本的差量，
所以對於升級服務器來講需要保留所有歷史版本，並且分別生成每個歷史版本到新版本的差量升級包。

二、app發布之后，怎么確保app能順利更新呢？
辦法一： 做一個升級按鈕，讓用戶主動去升級。
辦法二：啟動程序后，檢查升級包，有升級包就提示用戶當前app可升級。

官方提供了一套制作app升級功能的代碼案例。
我這里是記錄一下我參考官方的代碼后 做的升級功能，和思路；

思路：
當要檢測是否有最新升級包是，app必須發送當前的版本號到 服務器的某個接口用於和最新的app發行版本進行比較。

假如當前版本是1.1， 和最新發行版本1.2比較，比較一下版本的數字大小就知道 升級包有新版本，可以進行升級。
（為了方便進行大小比較，建議寫版本的時候用小數，而不是用 1.1.2 這種類型，不方便比較大小）；

在app端，通過mui.ajax 發送版本號到，服務器端接口上。服務器端的接口處理邏輯：
這里用PHP實現：

$appinfo = array(
    'appid'=> 'HBuilder',
    'version' => '2.0',
    'fileurl'=>'upgrade/H5366115D.wgt' //這個是相對服務器端網址url 下的根目錄，升級包文件
 );
 //以上是每次制作好升級包都需要修改一下 version 這個值。值要和你在hbuilder里的app版本號一致。

 if(isset($_POST['ver']) && ($_POST['ver'] < $appinfo['version'])){   
    $ret = array('code'=>1, 'url'=> $appinfo['fileurl']); 
 }else{
    $ret = array('code'=>0, 'url'=>''); 
 }
 echo json_encode($ret);
 exit;

所以，ajax 請求接口后，如果有最新升級包，接口會返回 這個升級包的url地址。
下面是app端的 檢查可以升級的js代碼：

var _config = {url : 'http://www.xxxxx.com/'}
var checkUrl= _config.url + "appgys/upgrade.php";
//需要傳遞當前的版本
function checkUpdate( wgtVer ){

    plus.nativeUI.showWaiting("檢測更新...");
    mui.ajax( checkUrl , { dataType : "json", type : 'POST', 
            data : {ver : wgtVer},
            success : function(json){  
                plus.nativeUI.closeWaiting();
                if( parseInt(json.code) ==1 ){                           
                    //可以升級
                    plus.nativeUI.confirm("檢查到當前版本有最新更新，下載升級？",
                        function(event){
                            if(event.index ==0){
                                console.log('下載地址：'+_config.url + json.url)
                                downWgt(_config.url + json.url); //下載更新版的地址
                            }                        
                        } ,'系統消息',['馬上升級','下次再說']);                
                } else{  
                    plus.nativeUI.toast("無新版本可更新！");
                }
            },
            error : function(xhr, error){ 
                plus.nativeUI.closeWaiting();
                plus.nativeUI.toast('檢測更新失敗！') ;
            }
        }) ;     
}
// 下載wgt文件

function downWgt(wgtUrl){
    plus.nativeUI.showWaiting("下載更新文件...");
    plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){
        if ( status == 200 ) { 
            //console.log("下載wgt成功："+d.filename);
            installWgt(d.filename); // 安裝wgt包
        } else {
            //console.log("下載wgt失敗！");
            plus.nativeUI.alert("下載更新失敗！");
        }
        plus.nativeUI.closeWaiting();
    }).start();
}
// 更新應用資源  
function installWgt(path){
    plus.nativeUI.showWaiting("安裝更新文件...");
    plus.runtime.install(path,{},function(){
        plus.nativeUI.closeWaiting();        
        plus.nativeUI.alert("應用資源更新完成！",function(){
            plus.runtime.restart();
        });
    },function(e){
        plus.nativeUI.closeWaiting();        
        plus.nativeUI.alert("安裝更新文件失敗["+e.code+"]："+e.message);
    });
}

接下來 是 用戶主動進行升級的時候：
需要做一個按鈕讓用戶點擊，然后開始升級代碼：

<script type="text/javascript">
//在頁面中初始化plus插件
         mui.init();
         mui.plusReady(function(){
            plus.runtime.getProperty(plus.runtime.appid,function(inf){ 
                     document.getElementById("version_id").innerHTML = inf.version;  

                });  
         });
         //檢測升級
function  upgrade_app_wgt(){
    plus.runtime.getProperty(plus.runtime.appid,function(inf){ 
        checkUpdate( inf.version); 
        console.log(inf.version)
        //sessionStorage.setItem('upgrade','1');
    });  
}

    </script>

接着，放一個按鈕，讓用戶一點運行檢查升級

<button onclick="upgrade_app_wgt()">當前版本<span id="version_id"></span></button>

另外是 app自動檢查到有最新升級包，然后提示用戶安裝升級包：

//檢查更新
if(sessionStorage.getItem('upgrade') !='1'){
                                     plus.runtime.getProperty(plus.runtime.appid,function(inf){ 
                    checkUpdate( inf.version); 
                    sessionStorage.setItem('upgrade','1');
                });
            }

這里利用app 的sessionStorage來保存是否有檢測過更新，
這樣就每次在用戶打開app 的時候，app主動去檢查是否有更新。