標籤：
之前做手機頁面，只是時效短、更新度高的零星幾個，供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);
}
HBuilder初探——強大的提示符及純網頁打包成APP
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
