前言：隨着互聯網技術的進步，現已衍生出一些基於APP開發的前端框架。只需要一套代碼就可以打包基於 安卓和ios系統的APP。哎，好多安卓和ios工程師要下崗啊！
一、為什么要學習mui?
當前三大前端APP主流框架有：mui、ionic、framework7。當然看了數據對比似乎framework7更勝一籌，但是mui學習更簡單對后台工程師和全棧來說是福音，更何況是在以前接觸過mui的基礎上。framework7后期會學習。
二、mui能干什么？
①：改變傳統模式用 安卓、ios兩種工程師開發APP的模式。一套代碼生成不同的應用程序。
②：為解決HTML5在低端 Andorid機上的性能缺陷。mui引入了原生加速，其中最關鍵的就是webview控件。因此mui若要發揮其全部能力，需要和5+APP配合使用，若脫離5+APP，mui功能會受限制。
③：mui以窗口形式加載。
三、mui優勢
①：文件極小，100k的js文件，60k的css文件。原生編寫，不依賴任何三方框架
②：極強，xcode和Android studio里所有原生控件都具備
③：高性能，精練的代碼、適時的5+原生動畫調用，達到原生應用的體驗
④：多端發布，編寫一套代碼，iOS、Android、瀏覽器、微信H5、百度直達號、流應用全覆蓋
四、開發工具 HBuilder http://www.dcloud.io/hbuilderx.html
HBuilder是一款國產開發工具，全中文，有BUG。
五、創建APP模板
利用HBuilder創建一個APP項目和傳統的Web項目差不多，老版本HBuilder選擇創建移動APP，新版本的選擇5+APP（H5標准的跨平台APP）或uni-app（開發一次同時發布為andorid、ios、小程序、H5等多個平台）具體文件目錄如下：
①：css
②：fonts 字體圖標文件
③：js
④：unpackage 打包
⑤：index.html
⑥：manifest.json 設置App的參數，例如APP名稱等
當然高版本的HBuilder不同的模板還有更高級的功能，比如自動創建登錄注冊等頁面。小白同學一定要知道這些，不然幸虧半天寫頁面不然別人點點點幾下。
六、mui使用組件
使用mui引入其css、js、fonts即可。重點部分查看官網http://dev.dcloud.net.cn/mui/ui/ 的組件、窗口管理、事件管理的使用。
下面介紹初學mui的三點常識
①：在HTML中引入以m開頭，比如mui封裝的header就加mheader。
②：怎么改變元素樣式，在class屬性名后面空格新增header，在css文件中添加.header屬性樣式引用即可。
③：在網頁中出現兩個div之間有灰白色空格線的去除方法，body為受影響的元素，可自行選擇。
body{
-webkit-box-shadow:none;
box-shadow:none;
}
七、與后台數據交互
①：Art-template 用於頁面的動態渲染，官方文檔http://aui.github.io/art-template/docs/syntax.html
②：Ajax 向后台請求數據 ,mui有對ajax的封裝
八：運行移動模式
①：安裝手機模擬器：推薦 夜神手機模擬器
②：參考 https://www.jianshu.com/p/a2631cdfc049
九：打包
點擊HBuilder工具欄的“發行”選擇 發行為原生安裝包
修改應用名稱，即APP名稱
雲端獲取，登錄遠端賬號
圖標Logo需要.png格式的圖片
ios打包需要賬號，這個是收費的