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