一、窗口管理
1,页面初始化
在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()
方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例:
mui.plusReady(function(){
console.log("当前页面URL:"+plus.webview.currentWebview().getURL());
});
mui.ready()
当DOM准备就绪时,指定一个函数来执行。
2,创建子页面
在mobile app开发过程中,经常会出现共用的导航栏或者选项卡,每次打开页面都需要重新渲染,而且容易出现卡头卡尾的现象。并且此时若使用局部滚动,在android手机上会出现滚动不流畅的问题;
mui现在提供两种解决方案:
第一种(官方推荐):在plus环境下,使用原生titleNView以及原生tabbar来替换页面的导航栏或者选项卡。在页面打开时,渲染已经完成,让你的应用更接近原生app。具体做法:原生titleNView参考mui.openWindow
的示例3,原生tabbar示例参考ask教程示例
第二种:通过双webview模式解决,此种情况适用于需要上下拉刷新的列表页面。将需要滚动的区域通过单独的webview实现,完全使用原生滚动。具体做法则是:将目标页面分解为主页面和内容页面,主页面显示卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面显示具体需要滚动的内容,然后在主页面中调用mui.init方法初始化内容页面。
mui.init({
subpages:[{
url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置
width:subpage-width,//子页面宽度,默认为100%
height:subpage-height,//子页面高度,默认为100%
......
},
extras:{}//额外扩展参数
}]
});
参数说明:styles表示窗口属性,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
示例:Hello mui的首页其实就是index.html加list.html合并而成的,如下:
参数说明:styles表示窗口属性,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
示例:Hello mui的首页其实就是index.html加list.html合并而成的,如下:
index.html的作用就是显示固定导航,list.html显示具体列表内容,列表项的滚动是在list.html所在webview中使用原生滚动,既保证了滚动条不会穿透顶部导航,符合app的体验,也保证了列表流畅滚动,解决了区域滚动卡顿的问题。 list.html就是index.html的子页面,创建代码比较简单,如下:
mui.init({
subpages:[{
url:'list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px;
bottom:'0px'//默认为0px,可不定义;
}
}]
});
3,打开新页面
做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃; mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现.。
mui.openWindow({
url:new-page-url,
id:new-page-id,
styles:{
top:newpage-top-position,//新页面顶部位置
bottom:newage-bottom-position,//新页面底部位置
width:newpage-width,//新页面宽度,默认为100%
height:newpage-height,//新页面高度,默认为100%
......
},
extras:{
.....//自定义扩展参数,可以用来处理页面间传值
},
createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
show:{
autoShow:true,//页面loaded事件发生后自动显示,默认为true
aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
},
waiting:{
autoShow:true,//自动显示等待框,默认为true
title:'正在加载...',//等待对话框上显示的提示内容
options:{
width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
......
}
}
})
参数:
-
styles
窗口参数,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
-
extras
新窗口的额外扩展参数,可用来处理页面间传值;例如
var webview = mui.openWindow({
url:'info.html',
extras:{
name:'mui' //扩展参数
}
});
console.log(webview.name);//输出mui字符串
- 注意:扩展参数仅在打开新窗口时有效,若目标窗口为预加载页面,则通过mui.openWindow方法打开时传递的extras参数无效。
-
createNew
是否重复创建相同id的webview;
为优化性能、避免app中重复创建webview,mui v1.7.0开始增加createNew参数,默认为false;判断逻辑如下:
-
createNew参数为为true,则不判断重复,每次都新建webview;
-
createNew参数为为fasle,则先查找当前App中是否已存在同样id的webview,若存在则直接显示;否则新创建并根据show参数执行显示逻辑;
注意:plusReady事件仅在webview首次创建时触发,使用
mui.openWindow
方法多次打开已存在的同样id的webview时,是不会重复触发plusReady事件的; 因此若业务写在plusReady事件中,可能会出现执行结果和预期不一致的情况;此时可通过自定义事件触发; 案例参考:mui.plusReady有时会失效; -
-
show
窗口显示控制参数,具体参数如下:
-
autoShow:目标窗口loaded事件发生后,是否自动显示,默认为true;若为false,则仅创建但不显示webview;若目标页面为预加载页面,则该参数无效;
-
aniShow表示页面显示动画,比如从右侧划入、从下侧划入等,具体可参考5+规范中的AnimationTypeShow
-
duration:显示Webview窗口动画的持续时间,单位为ms
-
-
waiting
系统等待框参数
mui框架在打开新页面时等待框的处理逻辑为:
显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框;
因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。waiting中的具体参数:
-
autoShow:是否自动显示等待框,默认为true;若为false,则不显示等待框;注意:若waiting框的autoShow为true,但目标页面不自动显示,则需在目标页面中通过如下代码关闭等待框:
plus.nativeUI.closeWaiting();
-
title:等待框上的提示文字
-
options表示等待框显示参数,比如宽高、背景色、提示文字颜色等,具体可参考5+规范中的WaitingOption
-
示例1:Hello mui中,点击首页右上角的图标,会打开关于页面,实现代码如下:
//tap为mui封装的单击事件,可参考手势事件章节
document.getElementById('info').addEventListener('tap', function() {
//打开关于页面
mui.openWindow({
url: 'examples/info.html',
id:'info'
});
});
因没有传入styles参数,故默认全屏显示;也没有传入show参数,故使用slide-in-right动画,新页面从右侧滑入。
打开带原生导航栏的新页面
使用父子 webview 或者同屏显示多个 webview 的性能和资源消耗较大。非必要不推荐使用同屏多 webview 的方案,推荐使用原生导航栏方案代替。可以加快窗体进入速度,内存占用更少。
通过在 mui.openWindow 的 styles 节点中设置 titleNView 节点的相关参数,可实现绘制原生导航栏控件,具体可参考 5+ webviewStyles 中的 titleNView 节点中的 WebviewTitleNViewStyles 的详细文档。示例如下:
mui.openWindow({
url: webviewUrl,
id: webviewId,
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
titleNView: { // 窗口的标题栏控件
titleText:"标题栏", // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题
titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
titleSize:"17px", // 字体大小,默认17px
backgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
progress:{ // 标题栏控件的进度条样式
color:"#00FF00", // 进度条颜色,默认值为"#00FF00"
height:"2px" // 进度条高度,默认值为"2px"
},
splitLine:{ // 标题栏控件的底部分割线,类似borderBottom
color:"#CCCCCC", // 分割线颜色,默认值为"#CCCCCC"
height:"1px" // 分割线高度,默认值为"2px"
}
}
}
});
说明:老版本的 mui.openWindowWithTitle
已经废除。
4,关闭页面
mui框架将窗口关闭功能封装在mui.back
方法中
hbuilder中敲mheader
生成的代码块,会自动生成带有返回导航箭头的标题栏,点击返回箭头可关闭当前页面,原因就是因为该返回箭头包含.mui-action-back
类,代码如下:
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
添加.mui-action-back
类即可给相关空间加上关闭功能。
mui框架封装的页面右滑关闭功能,默认未启用,若要使用右滑关闭功能,需要在mui.init();
方法中设置swipeBack参数,如下:
mui.init({
swipeBack:true //启用右滑关闭功能
});
mui框架默认会监听Android手机的back按键,然后执行页面关闭逻辑; 若不希望mui自动处理back按键,可通过如下方式关闭mui的back按键监听;
mui.init({
keyEventBind: {
backbutton: false //关闭back按键监听
}
});
除了如上三种操作外,也可以直接调用mui.back()
方法,执行窗口关闭逻辑;
5,预加载
所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验。mui提供两种方式实现页面预加载。
方式一:通过mui.init方法中的preloadPages参数进行配置.
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});
该种方案使用简单、可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应webview引用,还需要通过plus.webview.getWebviewById
方式获得;另外,因为mui.init是异步执行,执行完mui.init方法后立即获得对应webview引用,可能会失败。
方式二:通过mui.preload方法预加载.
var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});
通过mui.preload()
方法预加载,可立即返回对应webview的引用,但一次仅能预加载一个页面;若需加载多个webview,则需多次调用mui.preload()
方法;
二、mui调用CAMERA
先来看下代码:
<script type="text/javascript">
mui.plusReady(function(){
// 获取传过来的参数
var cw = plus.webview.currentWebview();
var titlename = cw.title;
var header = document.querySelector(".mui-title");
header.innerHTML = titlename;
var msgdom = document.getElementById("msg");
var photo_btn = document.getElementById("photo");
photo_btn.addEventListener("tap",function(){
plus.gallery.pick(
function(path){
console.log(path.files);
var img = "";
// 单选
// img += "<img width=100 height=100 src="+ path + ">";
// 多选
for(var i in path.files){
img += "<img width=100 height=100 src="+ path.files[i] + ">";
}
msgdom.innerHTML = img;
},
function(e) {
msgdom.innerHTML = e.message;
}, {
filter:"image",
multiple: true // 定义是否多选
}
)
})
})
</script>
这段js就是调用camera的代码
Gallery模块管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。
这段代码中实际用到的调用相册的函数为: plus.gallery.pick(
相册有两个方法:
1,pick方法
从系统相册选择文件(图片或视频)
void plus.gallery.pick(successCB, errorCB, options);
说明:
从系统相册中选择图片或视频文件。每次仅能选择一个文件,选择后将返回选择的文件路径。
参数:
- succesCB: ( GalleryPickSuccessCallback | GalleryMultiplePickSuccessCallback ) 必选 从系统相册中选择文件完成后的回调函数
单选时通过GalleryPickSuccessCallback回调函数返回选择的图片或视频文件路径,多选时通过GalleryMultiplePickSuccessCallback回调函数返回图片或视频文件路径。 - errorCB: ( GalleryErrorCallback ) 可选 从系统相册中选择文件操作错误的回调函数
- options: ( GalleryOptions ) 可选 设置选择文件的参数
返回值:
void : 无
官方的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery Example</title>
<script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕,现在可以正常调用扩展API
function onPlusReady() {
}
// 从相册中选择图片
function galleryImg() {
// 从相册中选择图片
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
console.log(path);
}, function ( e ) {
console.log( "取消选择图片" );
}, {filter:"image"} );
}
// 从相册中选择多张图片
function galleryImgs(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
console.log(e.files[i]);
}
}, function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true});
}
</script>
</head>
<body >
从相册中选择图片
<br/>
<button onclick="galleryImg()">选择单张图片</button>
<br/>
<button onclick="galleryImgs()">选择多张图片</button>
</body>
</html>
相关属性可参考HTML 5+的说明
三、调用摄像头
1,案例
调用摄像头的代码如下:
// 调用系统摄像头
var camera = document.getElementById("camera");
camera.addEventListener("tap",function(){
var cam = plus.camera.getCamera(1);
cam.captureImage(function(path){
// path 是一个相对路径,需要转换
console.log(path);
var url = "file://" + plus.io.convertLocalFileSystemURL(path);
console.log(url);
var img = "<img width=100 height=100 src="+ url + ">";
msgdom.innerHTML = img;
})
})
2,解析调用过程
实际的调用过程在这一句var cam = plus.camera.getCamera(1);
根据camera的api:
Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。
- getCamera: 获取摄像头管理对象
Camera plus.camera.getCamera( index );
index表示 要获取摄像头的索引值(可选) 指定要获取摄像头的索引值,1表示主摄像头,2表示辅摄像头。如果没有设置则使用系统默认主摄像头。
获取了camera对象之后,我们进行了下一步操作:cam.captureImage
- captureImage: 进行拍照操作
cmr.captureImage(successCB, errorCB, options);
captureImage有三个参数,分别表示 拍照操作成功的回调函数(必选)、拍照操作失败的回调函数(可选)、摄像头拍照参数(必选)
看来API也不一定那么准确,options应该是可选参数
重点来看一下successCB:
该回调函数API如下:
void onSuccess( capturedFile ) {
// Caputre image/video file code.
}
capturedFile: ( String ) 必选 拍照或摄像操作保存的文件路径
那么在我们代码中的path就是指保存文件的路径啦!
var url = "file://" + plus.io.convertLocalFileSystemURL(path);
console.log(url);
var img = "<img width=100 height=100 src="+ url + ">";
msgdom.innerHTML = img;
利用这段代码的转换,在sub1_1.html中就可以显示出来拍照完成的照片啦!
四、调用重力感应
1,示例代码
var wid;
var acc = document.getElementById("getacc");
acc.addEventListener("tap",function(e){
// getCurrentAcceleration 获取当前重力感应加速度
// watchAcceleration 持续获取
wid = plus.accelerometer.watchAcceleration(function(a){
msgdom.innerText = "x:" + a.xAxis +
"\n y:"+ a.yAxis + "\n z:" + a.zAxis;
})
})
var stopacc = document.getElementById("stopacc");
stopacc.addEventListener("tap",function(e){
// 停止监控重力感应
plus.accelerometer.clearWatch(wid);
msgdom.innerText = "停止监控重力感应";
})
2,解析调用过程
实际调用重力感应的代码: wid = plus.accelerometer.watchAcceleration(function(a){
Accelerometer模块管理设备加速度传感器,用于获取设备加速度信息,包括x(屏幕水平方向)、y(垂直屏幕水平方向)、z(垂直屏幕平面方向)三个方向的加速度信息。通过plus.accelerometer获取设备加速度传感器管理对象。
- watchAcceleration: 监听设备加速度变化信息
来看一下这个方法watchAcceleration: 这个方法:
Number plus.accelerometer.watchAcceleration( successCB, errorCB, option );
同样又是三个参数,很符合一致性的编码风格。直接看成功时的回调函数:
void onSuccess( acceleration ) {
// Get acceleration code.
}
它自带的这个参数是干嘛的呢?
acceleration: ( Acceleration ) 必选 设备的加速度信息
没错,没有这个参数,就查不了重力感性的信息了!
总之watchAcceleration 先是实时查看x、y、z的坐标值,然后点了停止之后 plus.accelerometer.clearWatch(wid); 清除掉监控
五、微信朋友圈界面(仿制)分析
1,界面代码分析
而index页面为:
index中一个框的代码:
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" title="幸福">
<img class="mui-media-object mui-pull-left" src="img/didi.png">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
</div>
</a>
</li>
朋友圈相关界面一个框的代码:
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media" id="pyq">
<img class="mui-media-object mui-pull-left" src="img/afe.png">
<p class="mui-ellipsis">朋友圈</p>
</li>
</ul>
是不是很像,其实就是改了下文字的排列方式。
还有一个地方,中间的这个空隙,是用div做出来的:
<div style="height: 25px;"></div>
问两个个小问题:
(1)这个div属于块级元素还是行内元素?
(2)如果要测量手机上的像素要怎么干?
2,朋友圈列表解析
看一看代码,我们来一点一点解析:
mui.init({
subpages:[{
url: "sub3_pyq_list.html",
id : "sub3_pyq_list.html",
styles:{
top: "40px",
bottom: "0px"
},
extras: {
title: "a"
}
}]
})
(1)一开始是一个初始化函数:
init 函数,在mui教程1中有介绍,来自习看看:
mui.init()
mui插件初始化
mui.init({
//子页面
subpages: [{
//...
}],
//预加载
preloadPages:[
//...
],
//下拉刷新、上拉加载
pullRefresh : {
//...
},
//手势配置
gestureConfig:{
//...
},
//侧滑关闭
swipeBack:true, //Boolean(默认false)启用右滑关闭功能
//监听Android手机的back、menu按键
keyEventBind: {
backbutton: false, //Boolean(默认true)关闭back按键监听
menubutton: false //Boolean(默认true)关闭menu按键监听
},
//处理窗口关闭前的业务
beforeback: function() {
//... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
},
//设置状态栏颜色
statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})
它会加载子页面,如果没有这段初始化,则不会显示sub3_pyq_list
朋友圈列表sub3_pyq_list
(2)对于数据内容,每个部分的容器为:
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/xzf.png">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
<p class="mui-ellipsis"><img style="width: 100%; height: auto;" src="img/cbd.jpg" /></p>
</div>
</a>
</li>
和之前的单个图标+文字的模式是一样的
(3)针对刷新部分:
下拉刷新模块:
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
mui.init({
pullRefresh: {
container: "#refreshContainer",
down : {
contentdown: "下拉刷新",
contentover: "释放立即刷新",
contentrefresh: "正在刷新...",
callback: pulldownRefresh
},
up : {
callback: pullupRefresh
}
}
});
这类刷新均是调用init的默认实现的,mui会根据下拉的情况显示相关文字,相关回调函数分别为pulldownRefresh和pullupRefresh
pulldownRefresh()会模拟生成一些新的数据:
function pulldownRefresh(){
// console.log(plus.webview.currentWebview().title)
setTimeout(function(){
// 获取内容区域
var table = document.querySelector(".mui-table-view");
// 模拟数据
for(var i = 0; i < 3; i++) {
var li = document.createElement("li");
li.className = "mui-table-view-cell mui-media";
var str = "";
str += '<img class="mui-media-object mui-pull-left" src="img/xzf.png">';
str += '<div class="mui-media-body">';
str += '幸福'+i;
str += '<p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>';
str += '</div>';
li.innerHTML = str;
table.insertBefore(li, table.firstChild);
}
mui("#refreshContainer").pullRefresh().endPulldownToRefresh();
},1500)
}
而pullupRefresh 则会通过ajax调用请求json数据:
function pullupRefresh(){
// console.log(plus.webview.currentWebview().title)
mui.ajax("http://f.apiplus.cn/cqssc.json",{
data:{},
dataType:"jsonp",
type:"post",
success: function(data){
console.log(data)
var jasondata = JSON.parse(data);
console.log(jasondata.data);
var table = document.querySelector(".mui-table-view");
mui.each(jasondata.data,function(i,v){
var li = document.createElement("li");
li.className = "mui-table-view-cell mui-media";
var str = "";
str += '<img class="mui-media-object mui-pull-left" src="img/xzf.png">';
str += '<div class="mui-media-body">';
str += '彩票';
str += '<p class="mui-ellipsis">开奖时间:' + v.opentime + '<br/>开奖号码:' + v.opencode+'</p>';
str += '</div>';
li.innerHTML = str;
table.appendChild(li);
})
}
})
参考文献:
1,http://dev.dcloud.net.cn/mui/window/
2,http://www.html5plus.org/doc/zh_cn/camera.html