一、窗口管理
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(
相册有两个方法：
- pick: 从系统相册选择文件（图片或视频）
- save: 保存文件到系统相册中
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
