## **HTML5 Plus移動App(5+App)**
[**官方文檔**](https://ask.dcloud.net.cn/docs/)
**工具：**
開發工具[HBuilder](http://www.dcloud.io/hbuilderx.html)下載下載地址
開發工具[HBuilderX](http://www.dcloud.io/hbuilderx.html)下載下載地址(替代HBuilder)
**框架：**
[uni-app](https://github.com/dcloudio/uni-app)?:是一個使用?[Vue.js](https://vuejs.org/)?開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺?([?文檔地址](http://uniapp.dcloud.io/)??? ?[培訓視頻](https://ke.qq.com/course/343370))??
MUI：前端UI框架 與bootstrap相似
HTML5+擴展了JavaScript對象plus以實現pc端沒有的功能
HTML5+包含HTML5Plus規范與Native.js
Native.js可以直接調ios和android的原生API?：[5+ App開發Native.js入門指南](http://ask.dcloud.net.cn/article/88)
在5+App里，同時包含了HTML5Plus規范和Native.js的實現，開發者可以在5+App里自由使用相關技術
[?最新規范請參考](http://www.html5plus.org/#specification)
首先開發者需要清楚你要做什么，是一個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](http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244)，
wap2app屬于5+app，它底層也是強大的HTML5Plus規范和Native.js在支撐。
wap2app項目下的所有文件，也都是打包在本機運行的。
注意：如果你想開發一次，全端覆蓋，那么需要使用DCloud的另一個產品uni-app
# [提升HTML5的性能體驗系列之一 避免切頁白屏](http://ask.dcloud.net.cn/article/25)
~~~
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-app`?`onReady`?，后觸發?`vue`?的?`mounted`
* 建議使用`uni-app`的`onLoad`?代替?`vue`的?`created`
[生命周期官方鏈接](http://uniapp.dcloud.io/use?id=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)
~~~
plusReady
~~~
