5+App 基于HTML、JS、CSS编写的运行于手机端的App(DCloud开发)
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-app
onReady
,后触发vue
的mounted
- 建议使用
uni-app
的onLoad
代替vue
的created
plusReady