HTML5 Plus移動App(5+App)
工具：
開發工具HBuilder下載下載地址
開發工具HBuilderX下載下載地址(替代HBuilder)
框架：
uni-app :是一個使用 Vue.js 開發跨平台應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平台 ( 文檔地址 培訓視頻)
MUI：前端UI框架 與bootstrap相似
HTML5+擴展了JavaScript對象plus以實現pc端沒有的功能
HTML5+包含HTML5Plus規范與Native.js
Native.js可以直接調ios和android的原生API ：5+ App開發Native.js入門指南
在5+App里，同時包含了HTML5Plus規范和Native.js的實現，開發者可以在5+App里自由使用相關技術
首先開發者需要清楚你要做什么，是一個mobile web項目，運行在瀏覽器里？還是要做一個app，安裝和運行在手機上？或者要把一個mobile web項目打包成app？
1、做一個mobile web項目
在這個模式下，開發者用不到HTML5Plus，使用標准的HTML5語法，運行在瀏覽器里。這不算5+ App。
此時開發者仍然可以使用HBuilder這個開發工具，新建項目時選擇web項目。
開發者也仍然可以使用DCloud提供的mui開源框架，來簡化ui的開發。
但這就是一個普通的web項目，b/s方式，不可脫線運行，不能調用HTML5Plus的增加api。
2、做一個正統的app
傳統意義上的app，是c/s方式的，它的程序要安裝和運行在手機上，不通過瀏覽器在線下載。
此時開發者在HBuilder里新建項目時，選擇“移動App”。（HBuilderX里選擇5+App）
在App項目下編寫的HTML、js等文件，是會被打包到原生的安裝包（Android是apk包、iOS是ipa包）里的。
此時本地的js和服務器通過ajax交互，由服務器按接口方式給出數據（一般是json），然后客戶端的js文件解析json，並根據本地的業務邏輯來渲染頁面和執行功能。
所以請不要在App項目中放置運行在服務器端的php等文件。
3、使用wap2app打包mobile web項目為app
如果開發者想把一個做好的mobile web站，方便快速的打包成app，那么要使用DCloud的wap2app框架。
在HBuilder中新建項目時，選wap2app項目，把mobile web站的url輸入進去，參考框架的教程來配置。
wap2app不同於普通的web打包技術，wap2app可真正做達到原生應用的功能和性能體驗。
具體教程另見：文檔中心-wap2app，
wap2app屬於5+app，它底層也是強大的HTML5Plus規范和Native.js在支撐。
wap2app項目下的所有文件，也都是打包在本機運行的。
注意：如果你想開發一次，全端覆蓋，那么需要使用DCloud的另一個產品uni-app
提升HTML5的性能體驗系列之一 避免切頁白屏
plus is not defined只有HBuilder真機運行、打包后、或流應用環境下才能運行plus api。
在普通瀏覽器里運行時plus api時控制台必然會輸出plus is not defined錯誤提示不要在plus和mui未完成初始化時調用相關API
function plusReady(){
// 在這里調用plus api
}
if(window.plus){
//初始化完成執行plusReady()函數直接調用plus
plusReady();
}else{
//初始化為完成 監聽初始化，完成后執行plusReady()函數
document.addEventListener('plusready',plusReady,false);
}
經過MUI封裝后如下：
mui.plusReady(function(){
// 在這里調用plus api
});
mui is not defined：MUI需要加載mui.js 且使用時也需要初始化完成才能使用
它在dom前久結束了所以無需
mui.ready(function () {
})
UNI-APP：
1.目錄及文件
一個uni-app工程，默認包含如下目錄及文件：
├─ components ··················· uni-app組件目錄
└──comp-a.vue ··················· 可復用的a組件
├── pages ······················· 業務頁面文件存放目錄
├─ index ······················ 使用到的字體文件
└── index.vue ····················· index頁面
├─ list ······················· 使用到的圖片文件
└── list.vue ····················· list頁面
├─ static ··· 存放應用引用靜態資源（如圖片、視頻等）的地方，注意：靜態資源只能存放於此
├─ main.js ······················· Vue初始化入口文件
├─ App.vue ··· 應用配置，用來配置App全局樣式以及監聽
├─ manifest.json ················ 配置應用名稱、appid、logo、版本等打包信息
└─ pages.json················· 配置頁面路由、導航條、選項卡等頁面類信息
2.應用生命周期
| 函數名 | 說明 |
|---|---|
| onLaunch | 當uni-app 初始化完成時觸發（全局只觸發一次) |
| onShow | 當 uni-app 啟動，或從后台進入前台顯示 |
| onHide | 當 uni-app 從前台進入后台 |
應用生命周期僅可在App.vue中監聽，在其它頁面監聽無效。
3.頁面生命周期
| 函數名 | 說明 | 平台支持 |
|---|---|---|
| onLoad | 監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為Object（用於頁面傳參 | |
| onShow | 監聽頁面顯示 | |
| onReady | 監聽頁面初次渲染完成 | |
| onHide | 監聽頁面隱藏 | |
| onUnload | 監聽頁面卸載 | |
| onPullDownRefresh | 監聽用戶下拉動作 ，一般用於下拉刷新 | |
| onReachBottom | 頁面上拉觸底事件的處理函數 | |
| onPageScroll | 監聽頁面滾動 ，參數為 Object | |
| onTabItemTap | 當前是 tab 頁時，點擊 tab 時觸發。 | |
| onShareAppMessage | 用戶點擊右上角分享 | 微信小程序 |
注意
- 先觸發
uni-apponReady，后觸發vue的mounted - 建議使用
uni-app的onLoad代替vue的created
plusReady