## **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
~~~
