资源描述
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创建子页面在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在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同理。示例：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，可不定义； );扩展阅读代码块激活字符:misubpage打开新页面做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动画，新页面从右侧滑入。示例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类，代码如下：标题若希望在顶部导航栏之外的其它区域添加关闭页面的控件，只需要在对应控件上添加.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()方法，执行窗口关闭逻辑；mui.back()仅处理窗口逻辑，若希望在窗口关闭之前再处理一些其它业务逻辑，则可将业务逻辑抽象成一个具体函数，然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为： 执行beforeback参数对应的函数若返回false，则不再执行mui.back()方法； 否则（返回true或无返回值），继续执行mui.back()方法；示例：从列表打开详情页面，从详情页面再返回后希望刷新列表界面，此时可注册beforeback参数，然后通过自定义事件通知列表页面刷新数据，示例代码如下：mui.init(beforeback: function()/获得列表界面的webviewvar list = plus.webview.getWebviewById(list);/触发列表界面的自定义事件（refresh）,从而进行数据刷新mui.fire(list,refresh);/返回true，继续页面关闭逻辑return true;);注意：beforeback的执行返回必须是同步的（阻塞模式），若使用nativeUI这种异步js（非阻塞模式），则可能会出现意想不到的结果；比如：通过plus.nativeUI.confirm()弹出确认框，可能用户尚未选择，页面已经返回了（beforeback同步执行完毕，无返回值，继续执行mui.back()方法，nativeUI不会阻塞js进程）：在这种情况下，若要自定义业务逻辑，就需要复写mui.back方法了；如下为一个自定义示例，每次都需要用户确认后，才会关闭当前页面/备份mui.back，mui.back已将窗口关闭逻辑封装的比较完善（预加载及父子窗口），因此最好复用mui.backvar old_back = mui.back;mui.back = function() var btn = 确定,取消; mui.confirm(确认关闭当前窗口？,Hello MUI,btn,function(e) if(e.index=0) /执行mui封装好的窗口关闭逻辑； old_back(); );为何设置了swipeBack: false，在iOS上依然可以右滑关闭？iOS平台原生支持从屏幕边缘右滑关闭，这个是通过popGesture参数控制的，参考5+规范，若需禁用，可通过setStyle方法设置popGesture为none。能否通过addEventListener增加back按键监听实现自定义关闭逻辑？addEventListener只会增加新的执行逻辑，老的监听逻辑(mui.back)依然会执行，因此，若需实现自定义关闭逻辑，一定要重写mui.back。扩展阅读代码块激活字符:mback预加载所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升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.init( preloadPages: url:list.html, id:list );var list = plus.webview.getWebviewByid(list);/这里可能返回空；方式二：通过mui.preload方法预加载.var page = mui.preload( url:new-page-url, id:new-page-id,/默认使用当前页面的url作为id styles:,/窗口参数 extras:/自定义扩展参数);通过mui.preload()方法预加载，可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法；如上两种方案，各有优劣，需根据具体业务场景灵活选择；判断预加载是否成功方式一、通过直观现象分析预加载页面会立即打开，不会显示等待框；非预加载页面默认会先显示等待框，再显示新页面；方式二、增加log分析预加载页面是否已创建比如：A页面中预加载B页面，则在A页面完全加载（可通过setTimeout模拟）后，打印当前应用所有webview，看是否包含B页面的url，以此来分析。例如：在A页面增加如下代码：mui.plusReady(function()setTimeout(function()var array = plus.webview.all();if(array)for(var i=0,len=array.length;ilen;i+) console.log(arrayi.getURL(); ,5000);扩展阅读代码块激活字符:minitpreloadmpreload(单个webview)二、 事件管理事件绑定除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定。.on( event , selector , handler ) eventType:String需监听的事件名称，例如：tap selectorType:String选择器 handlerType:Function(Eventevent )事件触发时的回调函数，通过回调中的event参数可以获得事件详情示例点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面mui(.mui-table-view).on(tap,.mui-table-view-cell,function() /获取id var id = this.getAttribute(id); /传值给详情页面，通知加载新数据 mui.fire(detail,getDetail,id:id); /打开新闻详情 mui.openWindow( id:detail, url:detail.html );) 扩展阅读代码块激活字符:mmon事件取消使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。off()方法根据传入参数的不同，有不同的实现逻辑。version added: 2.0.0.off( event , selector , handler ) eventType:String需取消绑定的事件名称，例如：tap selectorType:String选择器 handlerType:Function之前绑定到该元素上的事件函数，不支持匿名函数version added: 2.0.0.off( event , selector) eventType:String需取消绑定的事件名称，例如：tap selectorType:String选择器version added: 2.2.0.off( event ) eventType:String需取消绑定的事件名称，例如：tapversion added: 2.2.0.off( ) 空参数，删除该元素上所有事件示例off(event,selector,handle)适用于取消对应选择器上特定事件所执行的特定回调，例如：/点击li时，执行foo_1函数mui(#list).on(tap,li,foo_1);/点击li时，执行foo_2函数mui(#list).on(tap,li,foo_2);function foo_1() console.log(foo_1 execute);function foo_2() console.log(foo_2 execute);/点击li时，不再执行foo_1函数，但会继续执行foo_2函数mui(#list).off(tap,li,foo_1);off(event,selector)适用于取消对应选择器上特定事件的所有回调，例如：/点击li时，执行foo_1函数mui(#list).on(tap,li,foo_1);/点击li时，执行foo_2函数mui(#list).on(tap,li,foo_2);function foo_1() console.log(foo_1 execute);function foo_2() console.log(foo_2 execute);/点击li时，foo_2、foo_2两个函数均不再执行mui(#list).off(tap,li);off(event)适用于取消当前元素上绑定的特定事件的所有回调，例如：/点击li时，执行foo_1函数mui(#list).on(tap,li,foo_1);/点击p时，执行foo_3函数mui(#list).on(tap,p,foo_3);function foo_1() console.log(foo_1 execute);function foo_3() console.log(foo_3 execute);/点击li时，不再执行foo_1函数；点击p时，也不再执行foo_3函数mui(#list).off(tap);off()适用于取消当前元素上绑定的所有事件回调，例如：/点击li时，执行foo_1函数mui(#list).on(tap,li,foo_1);/双击li时，执行foo_4函数mui(#list).on(doubletap,li,foo_4);/点击p时，执行foo_3函数mui(#list).on(tap,p,foo_3);function foo_1() console.log(foo_1 execute);function foo_3() console.log(foo_3 execute);function foo_4() console.log(foo_4 execute);/点击li时，不再执行foo_1函数；点击p时，也不再执行foo_3函数；双击li时，也不再执行foo_4函数；mui(#list).off();扩展阅读代码块激活字符:mmoff事件触发使用mui.trigger()方法可以动态触发特定DOM元素上的事件。.trigger( element , event , data ) elementType:Element触发事件的DOM元素 eventType:String事件名字，例如：tap、swipeleft dataType:Object需要传递给事件的业务参数示例自动触发按钮的点击事件：var btn = document.getElementById(submit);/监听点击事件btn.addEventListener(tap,function () console.log(tap event trigger););/触发submit按钮的点击事件mui.trigger(btn,tap);部分mui控件监听的事件无法通过mui.trigger触发比如无法实现自动触发mui返回图标，实现关闭当前页面的功能，该部分逻辑正在优化中扩展阅读代码块激活字符:mtrigger手势事件在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：分类参数描述点击tap单击屏幕doubletap双击屏幕长按longtap长按屏幕hold按住屏幕release离开屏幕滑动swipeleft向左滑动swiperight向右滑动swipeup向上滑动swipedown向下滑动拖动dragstart开始拖动drag拖动中dragend拖动结束手势事件配置根据使用频率，mui默认会监听部分手势事件，如点击、滑动事件；为了开发出更高性能的moble App，mui支持用户根据实际业务需求，通过mui.init方法中的gestureConfig参数，配置具体需要监听的手势事件，。mui.init( gestureConfig: tap: true, /默认为true doubletap: true, /默认为false longtap: true, /默认为false swipe: true, /默认为true drag: true, /默认为true hold:false,/默认为false，不监听 release:false/默认为false，不监听 );注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关事件监听单个元素上的事件监听，直接使用addEventListener()即可，如下：elem.addEventListener(swipeleft,function() console.log(你正在向左滑动););若多个元素执行相同逻辑，则建议使用事件绑定(on()。扩展阅读代码块激活字符:minitgesture自定义事件在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去； Html5Plus规范设计了evalJS方法来解决该问题； 但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串； 为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。仅能在5+ App及流应用中使用因为是多webview之间传值，故无法在手机浏览器、微信中使用；监听自定义事件添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：window.addEventListener(customEvent,function(event) /通过event.detail可获得传递过来的参数内容 .);触发自定义事件通过mui.fire()方法可触发目标窗口的自定义事件：.fire( target , event , data ) targetType:WebviewObject需传值的目标webview eventType:String自定义事件名称 dataType:JSONjson格式的数据目标webview必须触发loaded事件后才能使用自定义事件若新创建一个webview，不等该webview的loaded事件发生，就立即使用webview.evalJS()或mui.fire(webview,eventName,)，则可能无效；案例参考：这里示例假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现： 在列表页面中预加载详情页面（假设为detail.html） 列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面； 详情页面监听newsId自定义事件列表页面代码如下：/初始化预加载详情页面mui.init( preloadPages: id:detail.html, url:detail.html );var detailPage = null;/添加列表项的点击事件mui(.mui-content).on(tap, a, function(e) var id = this.getAttribute(id); /获得详情页面 if(!detailPage) detailPage = plus.webview.getWebviewById(detail.html); /触发详情页面的newsId事件 mui.fire(detailPage,newsId, id:id );/打开详情页面 mui.openWindow( id:detail.html );); 详情页面代码如下：/添加newId自定义事件监听window.addEventListener(newsId,function(event) /获得事件参数 var id = event.detail.id; /根据id向服务器请求新闻详情 .);扩展阅读代码块激活字符:mfire三、 mui工具类initmui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在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/预加载窗口数量限制(一旦超出,先进先出)默认不限制)以上各配置模块在其对应文档中有详细阐述,请点击链接查看,以下只补充单独配置项通过statusBarBackground:rgb属性设置状态栏颜色（iOS7.0+、安卓不支持）格式为#RRGGBB。mui.init(statusBarBackground: #9defbcg,)mui默认会监听Android手机的物理按键(back&menu),若不希望自动处理按键可通过以下方式关闭mui.init(/监听Android手机的back、menu按键keyEventBind: backbutton: true, /Boolean(默认true)关闭back按键监听menubutton: true /Boolean(默认true)关闭menu按键监听,)扩展阅读代码块激活字符:minitmui()mui使用css选择器获取HTML元素，返回mui对象数组。mui(p)：选取所有元素mui(p.title)：选取所有包含.title类的元素若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：/obj1是mui对象var obj1 = mui(#title);/obj2是dom对象var obj2 = obj10; MUI框架的定位是“最接近原生体验的移动App的UI框架”， 因此和jQuery有所区别，很少为简化DOM操作而封装API，具体可参考MUI产品概述； 该函数的设计目的，更多是为了配合MUI插件使用，比如图片轮播、下拉刷新、区域滚动等，如下为详细示例：示例1：跳转到图片轮播的第二张图片mui(.mui-slider).slider().gotoItem(1);示例2：重新开启上拉加载mui(#pullup-container).pullRefresh().refresh(true);扩展阅读代码块激活字符:mmuieach()each既是一个类方法，同时也是一个对象方法，两个方法适用场景不同；换言之，你可以使用mui.each()去遍历数组或json对象，也可以使用mui(selector).each()去遍历DOM结构。mui.each( obj , handler ) objType:Array|JSONObj需遍历的对象或数组；若为对象，仅遍历对象根节点下的key handlerType:Function(Integer|Stringindex,Anythingelement)为每个元素执行的回调函数；其中，index表示当前元素的下标或key，element表示当前匹配元素mui(selector).each( handler ) handlerType:Function(Integerindex,Elementelement)为每个匹配元素执行的回调函数；其中，index表示当前元素在匹配元素中的位置（下标，从0开始），element表示当前匹配元素，可用this关键字代替示例1输出当前数组中每个元素的平方var array = 1,2,3mui.each(array,function(index,item) console.log(item*item);) 示例2当前页面中有三个字段，如下： 字段1： 字段2： 字段3： 提交时校验三个字段均不能为空，若为空则提醒并终止业务逻辑运行，使用each()方法循环校验，如下：var check = true;mui(.mui-input-group input).each(function () /若当前input为空，则alert提醒 if(!this.value|trim(this.value)=) var label = this.previousElementSibling; mui.alert(label.innerText+不允许为空); check = false; return false; );/校验通过，继续执行业务逻辑if(check) /.扩展阅读代码块激活字符:meachmmeach(遍历DOM)extend()将两个对象合并成一个对象。.extend( target , object1 , objectN ) targetType:Object需合并的目标对象 object1Type:Object需合并的对象 objectNType:Object需合并的对象.extend( deep , target , object1 , objectN ) deepType:Boolean若为true，则递归合并 targetType:Object需合并的目标对象 object1Type:Object需合并的对象 objectNType:Object需合并的对象示例var target = company:dcloud, product: mui:小巧、高效 var obj1 = city:beijing, product: HBuilder:飞一样的编码 mui.extend(target,obj1);/输出：company:dcloud,product:HBuilder:飞一样的编码,city:beijingconsole.log(JSON.stringify(target);从如上输出可以看到，product节点下的mui被替换成了HBuilder，因为默认仅合并对象根节点下的key、value；如果想深度合并，则可以传入deep参数，如下：var target = company:dcloud, product: mui:小巧、高效 var obj1 = city:beijing, product: HBuilder:飞一样的编码 /支持深度合并mui.extend(true,target,obj1);/输出：company:dcloud,product:mui:小巧、高效,HBuilder:飞一样的编码,city:beijingconsole.log(JSON.stringify(target);扩展阅读代码块激活字符:mextendlater()setTimeOut封装.later( func , delay , context, data ) funcType:Functiondelay毫秒后要执行的函数 delayType:Int延迟的毫秒数 contextType:Object上下文扩展阅读代码块激活字符:mlaterscrollTo()滚动窗口屏幕到指定位置，该方法是对window.scrollTo()方法在手机端的增强实现，可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小，该方法仅可实现屏幕纵向滚动。.scrollTo( ypos , duration , handler ) yposType:Integer要在窗口文档显示区左上角显示的文档的 y 坐标 durationType:Integer滚动时间周期，单位是毫秒 handlerType:Function滚动结束后执行的回调函数示例1秒钟之内滚动到页面顶部mui.scrollTo(0,1000);扩展阅读代码块激活字符:mscrolltoos我们经常会有通过navigator.userAgent判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX即可plus(可以访问的参数为:) .plus返回是否在基座中运行.stream返回是否为流应用Android(可以访问的参数为:) .android返回是否为安卓手机.version安卓版本号.isBadAndroidandroid非Chrome环境iOS(可以访问的参数为:) .iOS返回是否为苹果设备.version返回手机版本号.iphone返回是否为苹果手机.ipad返回是否为ipadWechat(可以访问的参数为:) .wechat返回是否在微信中运行示例检测是否为iOS或安卓系统版本是否小于4.4 if(mui.os.ios|(mui.os.android&parseFloat(mui.os.version)4.4) /. 代码块激活字符:mos一、 ajax请求Ajaxmui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型； 本着极简的设计原则，mui提供了mui.ajax方法，并在mui.
展开阅读全文