序
通過 HTML5 開發移動App 時，會發現HTML5 很多能力不具備。爲彌補HTML5 能力的不足，在W3C 中國的指導下成立了www.HTML5Plus.org組織，推出HTML5+規範。
HTML5+擴展了JavaScript 對象plus，使得js 可以調用各種瀏覽器無法實現或實現不佳的系統能力，設備能力如攝像頭、陀螺儀、文件系統等，業務能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。
HBuilder 的手機原生能力調用分2 個層面：
a) 跨手機平臺的能力調用都在HTML5+ 規範裏，比如二維碼、語音輸入，使用plus.barcode 和plus.speech。編寫一次，可跨平臺運行。
b) JS Bridge是另一項創新技術，通過js 可以直接調ios 和Android 的原生API，這部分就不再跨平臺，比如調ios game center，或在android 手機桌面創建快捷方式。
JSB 的用法是var obj = plus.android.import("android.content.Intent");將一個原生對象android.content.Intent 映射爲js 對象obj，然後在js 裏操作obj對象的方法屬性就可以了。
注：使用 HTML5+開發的移動App 並非mobileweb頁面。這是新手最容易混淆的地方。mobileweb 的文件存放在web 服務器上，而移動App 的文件存放在手機本地，編寫移動App 的html、js、css文件被打包到ipa或apk等原生安裝包，在手機客戶端運行。
當然這些移動 App 裏某些頁面也可以繼續從服務器端以網頁方式運行。所以mobile web，在HBuilder 裏新建項目時，屬於web 項目。不要放置到移動App 項目。mobile web 項目也不能真機聯調和打包.
內容簡介
介紹目前前端人員開發app的幾種方法，具體介紹hbuilder開發app，一扇贊新的大門~
無所不能的js
最開始js僅僅侷限於網頁上一些效果，操作網頁內容等，但是nodejs把js帶入了後端，也就是服務器端，從此前端人員可以涉及後端，前後通吃，native.js（以及其他js，稍候介紹）把js帶入了移動端，從此前端人員前後移動通吃。
前端涉及app的兩種方式
適應移動端的網頁
大家都很熟悉的bootstrap，和現在剛出來的amazeui就是這種方法的代表，說的簡單點就是對移動端做了適配，佈局樣式組件都適合移動端展示。
缺陷：畢竟不是app，不管怎樣也沒辦法取代app的便捷和功能強大。
js+html+css+打包技術
比較有名的就是phonegap了，國內的是hbuilder，大概的意思是html負責頁面內容，js負責效果以及調用原生app方法，ui框架負責樣式，最後打包成apk或者ipa。
hbuilder（http://www.dcloud.io/）
不談phonegap，不適用國內國情，是的，你沒有看錯，這是一個開發的ide，其實就是對eclipse進行了深度定製。
特點是快捷鍵比較多，支持移動app開發（h5+方式）。
h5+（http://www.html5plus.org/#home）
可以說nodejs將js帶到後端，h5+將js帶到移動端。
原理
上面說過的原理，再次說一遍：
html負責頁面，也就是的內容和框架；
js負責調用方法，也就是調用一些移動端原生；
ui負責樣式，比較有名的bootstrap，amazeui，jquery mobile，mui
ui比較
上面說的幾個ui，做下簡單比較，僅代表個人觀點，
Amazeui:功能和bootstrap重複，官方解釋是對中文排版做了優化，個人覺得有點多餘，bootstrap就很好。
Bootstrap:適合移動端瀏覽網頁適配，移動端瀏覽效果不錯，但是還是網頁。
jquery mobile:專門對移動端做定製，看起來就像手機應用一樣，js+css，國外的，不推薦，有坑。
Mui:這個是推薦的，比較了jqmobile和mui，顯然mui效果樣式好點，估計也會有坑，但是支持國產吧。
前端開發app
搭建開發環境
不需要搭建ios和android的開發環境，只需要下載hbuilder（估計需要java環境支持）。
選定ui
目前推薦mui，效果不錯
寫事件
通過js調用原生方法實現app效果
寫業務邏輯
前言
本教程是介紹使用html5+（nativejs）和mui開發移動app（包括android和ios），
感興趣請繼續，不感興趣請跳過，大部分來自官方api，增加了一些自己的總結。
HBuilder
說明
用h5+開發app的環境，也是ide，對eclipse做了深度定製，以前使用過eclipse或者myeclipse的童鞋可以直接上手。
官網
下載
在官網上點擊下載，安裝好後可以自己將文件夾壓縮成zip，方便以後使用，解壓就可以用。
依賴
估計會需要jre環境，沒有試過，如果需要請自行百度搜索jre安裝方法。
上手
打開HBuilder之後默認會有一個項目“HelloHBuilder”，裏面有HBuilder使用的介紹。
快捷鍵
HBuilder一大亮點是快捷鍵，但是如果習慣了自己之前的快捷鍵會很彆扭，需要自己在工具——選項——常規——快捷鍵中修改。
插件
HBuilder將插件做了下優化，提供了最長用的一些插件，並且使用dcloud網站下載，速度很快，eclipse自帶插件安裝需要翻牆。
打開工具——插件安裝，安裝自己需要的插件，例如我安裝瞭如下插件：
完成
環境搭建就完成了，這應該是所有開發環境搭建中最簡單的了。
原理
html5+開發app的原理大概是這樣：
html頁面負責內容；
ui負責頁面樣式；
js負責調用原生app方法。
html5
html5這部分負責頁面，也就是app中你看到的東西，大概的架構和內容
ui
ui負責頁面樣式，既然要做移動app，那做出的效果就得和移動端靠近，這裏並沒有侷限於用哪種ui，比較常見的適配移動端的ui框架有：
bootstrap
介紹：Twitter開發的ui框架，特點是可以簡介美觀，可以適配移動端（例如本站：http://uikoo9.com/）
amazeui
介紹：國人模仿bootstrap做的一個ui框架，個人感覺有點多餘，有興趣的可以看看。
jquery mobile
介紹：HBuilder其實是模仿國外的phonegap，通用mui是模仿jquery mobile，但是感覺也不錯
mui
介紹：和HBuilder相搭配的移動ui，也和nativejs相搭配，感覺還不錯，模仿的ios7界面風格。
官網：http://dcloudio.github.io/mui/
framework7
介紹：國外一塊模仿ios7的ui框架，贊
官網：http://www.idangero.us/framework7/
nativejs
介紹：一個可以調用android和ios原生方法的js
入門：http://ask.dcloud.net.cn/article/88
搭配
選擇：目前比較好的搭配是mui+nativejs+hbuilder，你也可以嘗試其他的組合，例如jqmobile+nativejs等
mui-demo：http://www.dcloud.io/hellomui/
nativejs-demo：http://www.html5plus.org/#case#/case/id/4.html
前言
看了前面兩篇內容是否有點躍躍欲試了？
下面就開始一個簡單的例子，以及mui相關內容
mui
官網：http://dcloudio.github.io/mui/
說明：希望你可以把官網內容通讀一遍，這是以後開發的基礎
開始
新建項目
在首頁點擊新建移動App，如下：
或者在項目管理器內右鍵新建，或者快捷鍵ctrl+n+a
選擇模版
這裏選擇mui項目，會自動引入mui的js和css，如下：
文件結構
默認有以下幾個文件夾：css，fonts，js，如下：
簡單開發
header
打開index.html後在body內輸入mh後回車，如下：
body
同樣輸入mbo後回車
list
在mbody中添加一些列表
最後的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">我的標題</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="my_task_list">
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-red">刪除</a>
</div>
<div class="mui-slider-handle">
待辦事項1
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-red">刪除</a>
</div>
<div class="mui-slider-handle">
待辦事項2
</div>
</li>
</ul>
</div>
</body>
</html>
調試（android爲例）
連接手機
首先需要連接手機
運行
選擇運行——手機運行——在xx設備上運行
或者使用快捷鍵ctrl+r
效果
現在你就可以在手機上看效果了
注意
需要開啓開發者模式
打包
dcloud證書打包
選擇發行——App打包——選擇android以及dcloud公用證書，如下：
參數配置
可能有時候會提示參數配置錯誤，這是你需要打開項目下manifest.json文件，並去掉第三方插件，如下：
等待
返回上一步的發行打包，點擊打包後會提示你已經到雲端打包，你只需要等待了，
一小會之後就打包好了，這時你就可以把apk拷貝到自己手機使用了，
mui中幾種open頁面的區別
使用hbuilder+mui做app一段時間，期間遇到問題不少，自己摸索，做了個app，詳見：http://uikoo9.com/dishi/download
如果您水平比這個高，那就不用看了，直接跳過。
【水平】
由於用hbuilder+mui出於興趣，也就沒有去看源碼，停留在使用總結層次，所以有說的不對的地方還請見諒。
【幾種打開頁面的方式】
1.初始化時創建子頁面
2.直接打開新頁面
3.預加載頁面
【示例】
1.初始化時創建子頁面
mui.init({
subpages: [{
url: your - subpage - url, //子頁面HTML地址，支持本地地址和網絡地址
id: your - subpage - id, //子頁面標誌
styles: {
top: subpage - top - position, //子頁面頂部位置
bottom: subpage - bottom - position, //子頁面底部位置
width: subpage - width, //子頁面寬度，默認爲100%
height: subpage - height, //子頁面高度，默認爲100%
......
},
extras: {} //額外擴展參數
}]
});
2.直接打開新頁面
mui.openWindow({
url: new - page - url,
id: new - page - id,
styles: {
top: newpage - top - position, //新頁面頂部位置
bottom: newage - bottom - position, //新頁面底部位置
width: newpage - width, //新頁面寬度，默認爲100%
height: newpage - height, //新頁面高度，默認爲100%
......
},
extras: {
..... //自定義擴展參數，可以用來處理頁面間傳值
}
show: {
autoShow: true, //頁面loaded事件發生後自動顯示，默認爲true
aniShow: animationType, //頁面顯示動畫，默認爲”slide-in-right“；
duration: animationTime //頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒；
},
waiting: {
autoShow: true, //自動顯示等待框，默認爲true
title: '正在加載...', //等待對話框上顯示的提示內容
options: {
width: waiting - dialog - widht, //等待框背景區域寬度，默認根據內容自動計算合適寬度
height: waiting - dialog - height, //等待框背景區域高度，默認根據內容自動計算合適高度
......
}
}
})
3.預加載頁面
// 方式1
mui.init({
preloadPages: [{
url: prelaod - page - url,
id: preload - page - id,
styles: {}, //窗口參數
extras: {}, //自定義擴展參數
subpages: [{}, {}] //預加載頁面的子頁面
}]
});
// 方式2
var page = mui.preload({
url: new - page - url,
id: new - page - id, //默認使用當前頁面的url作爲id
styles: {}, //窗口參數
extras: {} //自定義擴展參數
});
【一些區別】
1.子頁面和非子頁面
以上三種方式中，2，3打開的頁面非子頁面，
區別是子頁面相當於html中的iframe，而非子頁面相當於新開了一個瀏覽器窗口加載了一個html
2.子頁面適用於側滑菜單
子頁面有其特點，特別適用與index.html+list.html這種情況，
如果用index.html(主頁面)+list.html(子頁面)實現的話，當主頁面右滑時子頁面會自動跟隨，
而用index.html(主頁面)+list.html(新頁面)實現的話，主頁面右滑，新頁面不右滑，還得單獨處理新頁面。
3.子頁面使用頻繁切換的情況
如果頻繁左滑右滑，在配置較低的手機上會出現list.html遮住index.html的情況，採用子頁面模式就不會，採用新頁面模式機率很大。
4.子頁面適用與下拉刷新和上拉加載
之前做向下拉刷新的時候，採用的是新頁面的形式，按照官網教程，怎麼搞都不成功，後來看了下源碼，發現下拉刷新必須採用子頁面的形式，也就是你的list.html必須是index.html的子頁面，纔可以下拉刷新。
5.新頁面適用於新頁面
open一個新頁面，適用於查看詳情之類的，需要打開一個新頁面的情況，並且mui自己封裝了新頁面的back方法，你就不需要去操心了。
6.預加載頁面的兩種方式
第一種是在初始化的時候預加載，這種情況適合在你這個頁面在很久之後纔會用，如果你要立即到的頁面並使用，那麼你會得到null。第二種方式類似與open，個人感覺沒有什麼太大的區別，唯一的區別是open就直接打開了，preload只是加載，你可以之後選擇打開的時機。
7.總結
需要下拉刷新上拉加載請使用子頁面，需要打開一個新頁面請使用新頁面方式，需要加載一個頁面但是暫時不使用請使用預加載方式。
