MUI+H5plus+HBuilder開發app（android，ios）介紹
前言
現在介紹一款只需要懂html+css+js就能開發app的框架，不需要懂原生語言，完全只需要前端web工程師就能獨立開發出android和ios的應用，且一套程式碼搞定，效率很高。（其實更省事可以wap，android和ios一套帶走，一下R閃秒3個平臺，沒毛病）
框架介紹
這套框架源於DCloud社群，DCloud的社群工程師們通過對h5的擴張，通過運用js在webview呼叫原生介面，最後通過DCloud的打包做成和h5+的產品，生成一個app。以app分類來定是Hybrid App。這套框架具備開發工具、除錯、打包、ui庫和工具庫，是一套完整地解決開發app框架，且功能和效能效果接近原生。包括二維碼、語言輸入、支付、推送、陀螺儀等各種手機裝置能力，均可通過JS簡單呼叫。方便懶人們，不用學新語言看看API寫app就可以了。
技術架構
HTML5+ 基座擴展采用三層結構，JS層、PluginBridge層和Native層。 三層功能分別是：
JS層： 在Webview頁面呼叫，觸發Native層程式碼，獲取執行結果。
PluginBridge層： 將JS層請求進行處理，觸發Native層擴充套件外掛程式碼。
Native層： 外掛擴充套件的平臺原生程式碼，負責執行業務邏輯並執行結果返回到請求頁面。如果需要寫原生功能，就需要用到Native.js技術，簡稱NJS，是一種將手機作業系統的原生物件轉義，對映為JS物件，在JS裡編寫原生程式碼的技術。
開始
1.下載工具
2.helloword
1.新建
開始第一個app吧
2.新建專案
建專案的時候可以選擇是否引用mui庫，還可以選擇編譯的js語言版本ES5／ES6。下面還有教程和案例的連線給你看，不懂直接點。再不懂來@我吧。哈哈
3.資料夾介紹
css，fonts和js資料夾就是方mui庫的。大家應該都清楚，而我只需要介紹manifest.json。unpakckage就是方編譯後文件，這個不用管的。
*什麼是manifest.json?
就是要打包的原生應用，其各種配置均在此處，一個配置檔案。學過android和ios的朋友們應該不陌生吧。
appid是DCloud給的來用來除錯開發用的。如果是需要打包，請填上自己appid。
資源都是經過壓縮的，學web開發的朋友們，不用想著自動化什麼的？
可以像idea那樣直接邊敲程式碼邊編譯，就編譯和構造都交給編輯器吧。視覺化編輯工具更加友好。
開發過android和ios的朋友們，都為圖示的多個尺寸頭疼吧。尤其同事開發2個平臺的。直接上傳一張256*256尺寸的圖片，自動轉成19個尺寸，且路徑都已經寫到配置檔案上。繼續懶著開發吧。
模組許可權配置：開啟一個app的時候需要一堆授權。在這裡點選你app需要授權的功能。
4.執行app
編寫index.html頁面。
index.html內容如下：
<!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>
<div>HelloWorld</div>
<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>
</body>
</html>寫好頁面，點選執行->手機執行->找到你剛剛連線的手機，在裝置上執行。
5.打包
(1).點擊發行->發行為原生安裝包。
(2).填入自己的證書，證書如果沒有可以使用DCloud公用證書的。
(3).上傳到DCloud進行打包。
(4).打包成功！
總結
經過我使用且多次重構後，覺得MUI+H5plus+HBuilder使用起來不太難。遇到問題現百度，不google（國內大神開發的，哈哈），加qq多來聊，通常遇到的都是小問題，基本上文件上都有寫清楚的。而開發出來的app動畫修改流暢，打包後的檔案也很滿意（打包前的資源40m打包後20m還減肥不少啊）。也一點都看不出web那種閃啊閃啊，等啊又等的感覺。
最後一點提醒web開發工程師，在開發app的時候，要把思維轉換一下。你開發的是一個app必須有app的互動。還有使用的組建，能用原生就儘量呼叫原生的，別在webview裡面用html寫個title欄。或者直接寫一個webview裡面開啟一個web做成一個app。這種的app體驗性很差，太依賴於網路根本，設計app儘量使用l/s方式。
ps
1.react native對比有什麼區別？
react native只使用js，而Mui這套使用的是html+css+js。兩者區別最大是no HTML5 和 h5+。這點對於渲染方式要及其大的區別。react native也就是使用js語言程式設計，但不使用瀏覽器引擎渲染，而是用獨立v8引擎解析指定的js語法，然後由js操作繪製介面。而h5+主要就是靠webview來渲染html介面的。這個渲染方面的區別，還有就是react native是學一套做一套模式，這點就是學ios寫ios app，學andriod寫android app。這點和Mui app一套雙平臺，有所區別。
2.phoneGap、cordova對比有什麼區別？
phonegap出來的很早，phonegap支援平臺很多，能支援windows phone、blackberry，Mui做不了這麼多平臺支援，起碼是現在。而兩者的渲染方式很接近。但phonegap學習門檻還是Mui這個高，起碼需要懂原生這一點就有所難度。不適合web工程師入門學習。
3.superwebview對比有什麼區別？
之前看到我國開發的另一款 Hybrid App 框架，api不夠Mui的多，社群活躍度差點。但我有空也會用它來重構一下，支援一下我國開發專案。
4.native app對比有什麼區別？
我覺的native app的開發成本比較高，需要同時使用2種語言。而Mui app這點比起來絕對是低廉。而但效能上絕對native app佔優。還有其實現在native app和hybrid app都是共同在app佔有半邊江山。而開發出是native app還是hybrid App更多應該在需求和產品設計來定。多少的成本，多少的資源，app的存活時間等等，都在考慮之內。而我個人雖然懂的開發hybrid App，但我還是會去學習java和Objective-C的。不應該滿足能實現一個app而止，還需要多瞭解原生的東西。