之前做手機頁面，只是時效短、更新度高的零星幾個，供APP內嵌調用。比如抽獎嘛、活動宣傳啦。
現在的公司，不知是不是不知者無畏，整一個app全部用html5來實現，包括頭部導航條。客戶端只需封裝一下，打個包就OK。實現的方式是網頁放在服務器，像從瀏覽器訪問一下，客戶端只是充當一個瀏覽器的角色。這種方式app store應該是不允許的吧。但所做的只是供醫院內部人員使用的一個項目，能實現在線學習課程、報名、考試、簽到、查房、論文申報等功能就OK。
得知HBuilder這個東東，還是從客戶口里聽來的，他對HBuilder推崇備致，充滿對新技術的興奮感。他說這個可以實現下載到本地，而不是從服務器訪問。還可以打包。更可以調用設備的一些功能，如攝像頭什么的，這倒比較新鮮，我從來不知道網頁也可以調用設備。
於是去找來研究了一下。發現的確是有不少優點。不考慮別的，只拿它來做html編輯器都是極好的，速度快、提示相當強大。
它內嵌了emmet，就是以前的zen coding，使代碼提示功能發揮到極致，速度加快不少。
舉例如下：
一、js(按“回車”鍵)
dl:$("")
dli:$("#")----id
dlc:$(".")----class
dg:document.getElementById("")
二、DOM（按Tab鍵）
不用輸入<>，直接輸入標簽的名字即可。
! or html:5:
html5全套標簽
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
p#foo.bar:
<p id="foo" class="bar"></p>
h1{foo}: <h1>foo</h1>
>：子元素；+：同級元素；^：換行；*：復制
div+div>p>span+em^bq:
<div></div>
<div>
<p>
<span></span>
<em></em>
<p>
<blockquote></blockquote>
</div>
ul>li*5:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
另外還可以用它來打包成app，安裝到手機上，當原生來用。而我之前的做法都是搭好本機服務器，用草料二維碼生成訪問地址，再用手機掃描，在手機瀏覽器中打開來調試。從沒試過可以安裝，甚至可以定義圖標和應用名稱。
在hbuilder中新建移動APP項目；在manifest.json中設置應用名稱、版本號和入口頁面等；在第二頁“圖標配置”中可以上傳app的圖標。
然后右鍵“發行”，選擇“App打包”，android使用DCloud公用證書上傳到雲端打包，通過360手機助手可以直接安裝到手機。
有一個問題：打包的app按返回鍵時會直接退出程序，而不是返回上一頁，這需要用到html5+的plus.key.addEventListener('backbutton',function()手動設置backbutton監聽事件來定義。
common.js:
//取消瀏覽器的所有事件，使得active的樣式在手機上正常生效
document.addEventListener('touchstart',function(){
return false;
},true);
// 禁止選擇
document.oncontextmenu=function(){
return false;
};
// H5 plus事件處理
var ws=null,as='pop-in';// 默認窗口動畫
function plusReady(){
ws=plus.webview.currentWebview();
// 隱藏滾動條
ws.setStyle({scrollIndicator:'none'});
// Android處理返回鍵
var pageUrl=window.location.href;
plus.key.addEventListener('backbutton',function(){
//判斷是否返回到首頁，是->退出,否則返回上一頁
if(pageUrl.indexOf('home')==-1){
history.back();
}else{
if(confirm('確認退出？')){
plus.runtime.quit();
}
}
},false);
}
//擴展API是否准備好，如果沒有則監聽“plusready"事件
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready',plusReady,false);
}