1、Hbuilder App自更新問題
因為項目中用到Hbuilder來做App，然而由于需要頻繁修改源代碼，頻繁釋出安裝包給測試者安裝很麻煩，而在app裡面自動更新又有不少問題。目前app自帶自動更新功能的實作方法主要有兩種：
（1）全包更新，釋出apk包放在自己伺服器，将app版本，對應包名等資訊放在資料庫中，通過每次進入首頁檢查資料庫最新版本和本地最新版本的比較來判斷是否下載下傳全包進行更新。
（2）使用hbuilder中自帶的增量包的方式更新。
兩種方式各有優劣，第（1）種能達到更新的目的，但是隻支援安卓裝置，ios的無法直接通過安裝包安裝；第（2）種可以解決不同裝置适配的問題，但是有各種問題，這個可以在hbuilder官網的文章下的回複種可以看到，連結http://ask.dcloud.net.cn/article/182
是以我的基本思路是先将頁面的代碼架構定下來，html的head部分，body部分，通用的部分留下，可以直接用建立的空頁面。具體頁面的代碼存在資料庫，控件部分，引用部分，腳本部分分開存儲。然後在模闆頁面中寫一段ajax腳本，擷取資料庫的這些内容，對于控件和引用的js，css，可以直接用append的方式追加到body或者head，對于腳本，可以用js的eval()方法來執行。這種方式就達到了直接通過背景管理頁面修改資料庫來修改app頁面的效果，頁面代碼修改起來很友善。
此處插一句，各大應用市場是不允許應用自更新的，每次大的更新必須重新送出稽核，是以如果你的軟體閱聽人很廣，就不要考慮自動更新了，還是老老實實釋出商店吧，這種方法隻能用來測試。話說個人感覺大公司也不會選擇用Hbuilder來開發app。建議這種方法隻用來測試，因為hbuilderapp本來流暢度就和原生的沒法比，再把代碼都放到資料庫，每次頁面加載都要從資料庫擷取。體驗可能會更糟糕。
2、App端——首頁菜單動态加載，二級頁面代碼從資料庫擷取
大體思想是這樣，實作起來就可以自由發揮了。由于我做的是企業辦公類軟體，首頁的控件形式相對固定，是以首頁主要采用的是mui中的mGrid九宮格控件來設計，每加一個子產品就在首頁添加一個入口，綁定一個二級頁面。形式比較固定。下圖為app首頁中的宮格控件。
<ul class="mui-table-view mui-grid-view mui-grid-9" id="newGrid">
<li id="" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a id="CompletedTasksLink" href="pages/flowtask/viewurl_finished.html" target="_blank" rel="external nofollow" >
<span class="mui-icon mui-icon-bars"></span>
<div id="main-finishde" class="mui-media-body">
已辦任務
</div>
</a>
</li>
</ul>
大體是上面這樣，一些固定的，不怎麼需要改動的子產品可以直接按照傳統方法來寫。首頁其他的子產品就可以從資料庫擷取，在腳本中添加擷取的代碼：
mui.ajax({
type: "GET",
url: "http://yourhost/getdata",
dataType: "json",
timeout:"5000",
data:{"userid":userinfo.id},
success: function(data){
for(var i=0;i<data.length;i++){
var str='<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">\
<a href="'+data[i][" target="_blank" rel="external nofollow" href"]+'">\
<span class="'+data[i]["iconclass"]+'"></span>\
<div class="mui-media-body">'+data[i]["name"]+'</div>\
</a>\
</li>';
console.log(str);
//str="123";
mui('.mui-grid-view')[0].insertAdjacentHTML('beforeend', str);
}
},
error:function(data){
console.log(data);
}
});
大體就是通過目前登入的使用者id，來擷取資料庫儲存的首頁菜單，id用來判斷權限，資料庫字段分别存儲菜單的連結，名稱，圖示，以及權限資訊，下圖為具體資料庫菜單表的設計
接下來是二級頁面，從上圖中可以看到，每個頁面位址類似pages/App/Run.html?programid=efa59d16-59f3-4343-9019-9dd9e55bb7a3這種形式，隻有後面跟的programid不一樣。通過programid擷取資料庫中對應二級頁面配置的各部分代碼。Run.html頁面完整代碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title id="pageTitle"></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<script src="../../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript">
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
window.onload=function (){
var programid=GetQueryString("programid");
$.ajax({
type: "GET",
url: "http://yourhost/getAllRecords",
dataType: "json",
timeout:"5000",
data:{"id":programid},
success: function(data){
if(data.length>0){
$('head').append(data[0]["headHtml"]);
$('body').prepend(data[0]["bodyHtml"]);
eval(data[0]["script"]);
}else{
mui.alert('位址錯誤');
}
},
error:function(data){
console.log(data);
}
});
}
</script>
</body>
</html>
eval這個函數之前了解過，隻知道能将字元串當成js代碼執行，但是沒有想到會如此強大，字元串裡面包含的換行符、函數都能一一解析。
3、伺服器端：
伺服器端需要做的有兩點，首先就是提供上面兩個頁面中用到的背景接口，其次，就是需要兩個配置頁面，首頁菜單配置和二級頁面配置，将菜單、二級頁面的代碼添加到資料庫。當然，首頁菜單配置也可以在app裡面添加一個頁面，友善對菜單進行實時釋出、停用等操作。
總結
這種方法主要用來解決頻繁更新的問題，如果在意性能，在意安全性，或者頁面控件部分用到其他架構，建議慎用，這種方式還是比較适合測試用。個人在測試過程中發現，
（1）普通的html控件，mui中的html控件，腳本中的各種事件都能能正常運作。不過添加了Vue.js的頁面，在控件中用到了vue文法的控件顯示和互動有一些問題，同一頁面直接從浏覽器打開沒有問題，具體原因不明，對vue了解很少，有興趣的可以研究研究
（2）這種方式應該和網頁版差不多了。但是個人測試發現是否使用這種方式對頁面加載速度影響并不明顯，可能因為頁面元素太簡單的原因。
![Android中Webview使用經驗總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)