Dcloud开发套件初学
项目参考H5PlusApp
组件介绍
Dcloud HTML5+App开发套件分为三个部分： HBuilderIDE， 5+App， MUI框架三个部分。
HBuilder
HBuilder为基于Eclipse改造的专为HTML开发工作提供的IDE，其优点在于：
- 更方便的与手机设备实时调试
- 与HTML,MUI深度集成
- 集成代码块自动补全功能
5+APP
与HBuilder集成， 通过HBuilder包装的APP框架。实现纯JS调用硬件API的特性。性能较Cordva更好。
MUI
移动CSS框架，与大部分js框架不冲突。体积小，精简，运行效率高。
可以明显感觉比Ionic以及phoneGap、jQueryMobile快。
基本开发
文档
Dcloud文档
H5+硬件API
MUI
HBuilder开发基本步骤
1、新建项目
选择APP项目即可，项目结构很明了，不做详细说明。
2、新建页面
若需要带上MUI特性，就新建MUI页面即可，会自动引入包与样式。
其中一些特殊代码需要重视：
<!-- MUI页面初始化 -->
<script> mui.init(); </script>
<!-- MUI页面载入完毕的触发函数 -->
<script> document.addEventListener('plusready',plusReady,false); function plusReady(){ // Android处理返回键 plus.key.addEventListener('backbutton',function(){ if(confirm('确认退出？')){ plus.runtime.quit(); } },false); } </script>
3、调试
安卓只需选择 ‘运行 -> 手机运行 -> 在xxxx设备上运行’ 既可。是所见即得的方式，十分方便迅速。有时候出现即时刷新无效的情况，可以关闭程序后再打开
4、打包
支持安卓IOS的云端以及本地打包，待研究。
特性
1、页面结构
对于一般APP形式（上下栏固定，中间为显示内容）可以使用一个单一页面加子页面的形式。如下：
子页面在mui.init()时载入
mui.init({
subpages:[{
url:homeUrl,//子页面HTML地址，支持本地地址和网络地址
id:'home',//子页面标志
styles:{
top:'9%',//子页面顶部位置
bottom:'10%',//子页面底部位置
render:'onscreen'
// width:100%//子页面宽度，默认为100%
//height:subpage-height,//子页面高度，默认为100%
},
extras:{}//额外扩展参数
}]
});
这样中间的子页面有单独的webView资源，因此性能较高。
2、页面跳转
页面跳转有两种方式，本质都是一样的。
- 1、利用样板项目中common.js的clicked函数
//使用
clicked('actionpage/barcode_scan.html',true,true);
//函数源码
/** * 打开新窗口 * @param {URIString} id : 要打开页面url * @param {boolean} wa : 是否显示等待框 * @param {boolean} ns : 是否不自动显示 */
w.clicked=function(id,wa,ns){
if(openw){//避免多次打开同一个页面
return null;
}
if(w.plus){
wa&&(waiting=plus.nativeUI.showWaiting());
var pre='';
openw=plus.webview.create(pre+id,id,{scrollIndicator:'none',scalable:false});
ns||openw.addEventListener('loaded',function(){//页面加载完成后才显示
// setTimeout(function(){//延后显示可避免低端机上动画时白屏
openw.show(as);
closeWaiting();
// },200);
},false);
openw.addEventListener('close',function(){//页面关闭后可再次打开
openw=null;
},false);
return openw;
}else{
w.open(id);
}
return null;
};
- 2、自己封装页面跳转函数
即利用mui.openWindow()函数
function loadPage(targeturl){
mui.openWindow({
url:targeturl,
id:targeturl,
styles:{
top:'9%',//新页面顶部位置
bottom:'10%',//新页面底部位置
width:'100%'//新页面宽度，默认为100%
// height:newpage-height,//新页面高度，默认为100%
},
extras:{
},
show:{
autoShow:true,//页面loaded事件发生后自动显示，默认为true
aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
duration:200//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting:{
autoShow:true,//自动显示等待框，默认为true
title:'正在加载...',//等待对话框上显示的提示内容
options:{
// width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度
// height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度
}
}
})
}
3、页面跳转的优化
推荐阅读:DCloud文档 左侧目录下的“提升HTML5的性能体验系列”
比较直接的办法就是预载，即将HTML页面的内容放入webView中， 在使用的时候show出来。
var contentView;
//为了不遮住上下固定栏
var contentStyles = {top: '44px', bottom: '50px'};
//预载
contentView = plus.webview.create(homeUrl,'contentView',contentStyles);
//显示
contentView.show();