一、窗口管理
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事件发生后自动显示，默认为trueaniShow:animationType,//页面显示动画，默认为”slide-in-right“；duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；},waiting:{autoShow:true,//自动显示等待框，默认为truetitle:'正在加载...',//等待对话框上显示的提示内容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", // 字体大小,默认17pxbackgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"progress:{ // 标题栏控件的进度条样式color:"#00FF00",// 进度条颜色,默认值为"#00FF00" height:"2px"// 进度条高度,默认值为"2px" },splitLine:{ // 标题栏控件的底部分割线，类似borderBottomcolor:"#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作为idstyles:{},//窗口参数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("/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，.cn/mui/window/
2，/doc/zh_cn/camera.html
如果觉得《mui教程2——窗口管理 调用相册 调用摄像头 调用重力感应 微信朋友圈界面（仿制）分析》对你有帮助，请点赞、收藏，并留下你的观点哦！
