mui开发文档

Mui组件部分请参照官网资料，以下资料也来自官网，主要是便于在手机上查看一、窗口事件详细内容页面初始化在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例：mui.plusReady(function(){console.log(当前页面URL：+plus.webview.currentWebview().getURL());});扩展阅读mui.init()mui插件初始化mui.ready()当DOM准备就绪时，指定一个函数来执行。代码块激活字符:minit创建子页面在mobileapp开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题；mui的解决思路是：将需要滚动的区域通过单独的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同理。示例：Hellomui的首页其实就是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，可不定义；}}]});扩展阅读代码块激活字符:misubpage打开新页面做webapp，一个无法避开的问题就是转场动画；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新窗口的额外扩展参数，可用来处理页面间传值；例如：varwebview=mui.openWindow({url:'info.html',extras:{name:'mui'//扩展参数}});console.log(webview.name);//输出mui字符串注意：扩展参数仅在打开新窗口时有效，若目标窗口为预加载页面，则通过mui.openWindow方法打开时传递的extras参数无效。createNew是否重复创建相同id的webview；为优化性能、避免app中重复创建webview，muiv1.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：Hellomui中，点击首页右上角的图标，会打开关于页面，实现代码如下：//tap为mui封装的单击事件，可参考手势事件章节document.getElementById('info').addEventListener('tap',function(){//打开关于页面mui.openWindow({url:'examples/info.html',id:'info'});});因没有传入styles参数，故默认全屏显示；也没有传入show参数，故使用slide-in-right动画，新页面从右侧滑入。示例2：从A页面打开B页面，B页面为一个需要从服务端加载的列表页面，若在B页面loaded事件发生时就将其显示出来，因服务器数据尚未加载完毕，列表页面为空，用户体验不好；可通过如下方式改善用户体验（最好的用户体验应该是通过预加载的方式）：第一步，B页面loaded事件发生后，不自动显示；//A页面中打开B页面，设置show的autoShow为false，则B页面在其loaded事件发生后，不会自动显示；mui.openWindow({url:'B.html',show:{autoShow:false}});第二步，在B页面获取列表数据后，再关闭等待框、显示B页面//B页面onload从服务器获取列表数据；window.onload=function(){//从服务器获取数据....//业务数据获取完毕，并已插入当前页面DOM；//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；mui.plusReady(function(){//关闭等待框plus.nativeUI.closeWaiting();//显示当前页面mui.currentWebview.show();});}扩展阅读代码块激活字符:mopenwindow关闭页面mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：若当前webview为预加载页面，则hide当前webview；否则，close当前webview；在mui框架中，有三种操作会触发页面关闭（执行mui.back方法）：点击包含.mui-action-back类的控件在屏幕内，向右快速滑动Android手机按下back按键iOS平台原生支持从屏幕边缘右滑关闭iOS平台可通过popGesture参数实现从屏幕边缘右滑关闭webview，参考5+规范，若想禁用该功能，可通过setStyle方法设置popGesture为none。hbuilder中敲mheader生成的代码块，会自动生成带有返回导航箭头的标题栏，点击返回箭头可关闭当前页面，原因就是因为该返回箭头包含.mui-action-back类，代码如下：headerclass=mui-barmui-bar-navaclass=mui-action-backmui-iconmui-icon-left-navmui-pull-left/ah1class=mui-title标题/h1/header若希望在顶部导航栏之外的其它区域添加关闭页面的控件，只需要在对应控件上添加.mui-action-back类即可，如下为一个关闭按钮示例：buttontype=buttonclass='mui-btnmui-btn-dangermui-action-back'关闭/buttonmui框架封装的页面右滑关闭功能