2022年mui开发文档.pdf

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 创建子页面在 mobile app 开发过程中 , 经常遇到卡头卡尾的页面 , 此时若使用局部滚动 , 在android 手机上会出现滚动不流畅的问题; mui 的解决思路就是 : 将需要滚动的区域通过单独的 webview 实现, 完全使用原生滚动。具体做法则就是: 将目标页面分解为主页面与内容页面, 主页面显示卡头卡尾区域 , 比如顶部导航、底部选项卡等 ; 内容页面显示具体需要滚动的内容, 然后在主页面中调用mui、init方法初始化内容页面。mui、init( subpages: url: your - subpage - url,/ 子页面 HTML地址, 支持本地地址与网络地址 id: your - subpage - id, / 子页面标志 styles: top: subpage - top - position,/ 子页面顶部位置精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 1 页，共 49 页 - - - - - - - - - - mui 开发文档 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, 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 2 页，共 49 页 - - - - - - - - - - mui 开发文档 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: 、 / 自定义扩展参数 , 可以用来处理页面间传值精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 3 页，共 49 页 - - - - - - - - - - mui 开发文档 , 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新窗口的额外扩展参数 , 可用来处理页面间传值 ; 例如: 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 4 页，共 49 页 - - - - - - - - - - mui 开发文档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精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 49 页 - - - - - - - - - - mui 开发文档系统等待框参数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 事件发生后 , 不会自动显示 ;精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 6 页，共 49 页 - - - - - - - - - - mui 开发文档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; 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 7 页，共 49 页 - - - - - - - - - - mui 开发文档在 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 按键监听 );精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 8 页，共 49 页 - - - - - - - - - - mui 开发文档除了如上三种操作外 , 也可以直接调用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,继续页面关闭逻辑returntrue ; );注意: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 = 确定 , 取消 ; 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 9 页，共 49 页 - - - - - - - - - - mui 开发文档 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: ,/ 预加载页面的子页面精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 10 页，共 49 页 - - - - - - - - - - mui 开发文档 , 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()方法; 如上两种方案 , 各有优劣 , 需根据具体业务场景灵活选择; 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 11 页，共 49 页 - - - - - - - - - - mui 开发文档判断预加载就是否成功方式一、通过直观现象分析预加载页面会立即打开 , 不会显示等待框 ; 非预加载页面默认会先显示等待框, 再显示新页面 ; 方式二、增加 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) );扩展阅读代码块激活字符 : minitpreload mpreload(单个 webview) 二、 事件管理事件绑定除了可以使用addEventListener()方法监听某个特定元素上的事件外, 也可以使用、on()方法实现批量元素的事件绑定。?event精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 12 页，共 49 页 - - - - - - - - - - mui 开发文档Type: String需监听的事件名称,例如:tap ?selectorType: String选择器?handlerType: Function ( Event event ) 事件触发时的回调函数,通过回调中的event 参数可以获得事件详情示例点击新闻列表 , 获取当前列表项的id, 并将该 id 传给新闻详情页面 , 然后打开新闻详情页面mui( 、mui-table-view) 、on( tap, 、mui-table-view-cell, function () / 获取 idvar id = this、getAttribute(id); / 传值给详情页面 , 通知加载新数据 mui 、fire(detail,getDetail,id: id); / 打开新闻详情 mui 、openWindow( id: detail, url: detail、html ); ) 扩展阅读代码块激活字符 : mmon 事件取消精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 13 页，共 49 页 - - - - - - - - - - mui 开发文档使用on()方法绑定事件后 , 若希望取消绑定 , 则可以使用off()方法。off()方法根据传入参数的不同 , 有不同的实现逻辑。?eventType: String需取消绑定的事件名称,例如 :tap ?selectorType: String选择器?handlerType: Function之前绑定到该元素上的事件函数,不支持匿名函数?eventType: String需取消绑定的事件名称,例如 :tap ?selectorType: String选择器?eventType: String需取消绑定的事件名称,例如 :tap ?空参数 ,删除该元素上所有事件精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 14 页，共 49 页 - - - - - - - - - - mui 开发文档示例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 两个函数均不再执行精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 15 页，共 49 页 - - - - - - - - - - mui 开发文档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); 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 16 页，共 49 页 - - - - - - - - - - mui 开发文档 function foo_4() console、log( foo_4 execute); / 点击 li时, 不再执行 foo_1 函数; 点击 p 时, 也不再执行 foo_3 函数; 双击 li 时, 也不再执行 foo_4 函数;mui( #list) 、off();扩展阅读代码块激活字符 : mmoff 事件触发使用mui 、trigger()方法可以动态触发特定DOM 元素上的事件。?elementType: Element触发事件的 DOM 元素?eventType: String事件名字 ,例如 :tap 、swipeleft ?dataType: Object需要传递给事件的业务参数示例自动触发按钮的点击事件: var btn = document 、getElementById(submit); / 监听点击事件精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 17 页，共 49 页 - - - - - - - - - - mui 开发文档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向下滑动精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 18 页，共 49 页 - - - - - - - - - - mui 开发文档拖动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() 。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 19 页，共 49 页 - - - - - - - - - - mui 开发文档扩展阅读代码块激活字符 : minitgesture 自定义事件在 App开发中 , 经常会遇到页面间传值的需求, 比如从新闻列表页进入详情页, 需要将新闻 id 传递过去 ; Html5Plus规范设计了 evalJS 方法来解决该问题 ; 但evalJS 方法仅接收字符串参数 , 涉及多个参数时 , 需要开发人员手动拼字符串; 为简化开发 ,mui 框架在 evalJS 方法的基础上 , 封装了自定义事件 , 通过自定义事件, 用户可以轻松实现多webview 间数据传递。仅能在 5+ App 及流应用中使用因为就是多 webview 之间传值 , 故无法在手机浏览器、微信中使用; 监听自定义事件添加自定义事件监听操作与标准js 事件监听类似 , 可直接通过 window对象添加 ,如下: window 、addEventListener(customEvent, function(event) / 通过 event 、detail可获得传递过来的参数内容、);触发自定义事件通过mui 、fire()方法可触发目标窗口的自定义事件: ?targetType: WebviewObject需传值的目标webview ?eventType: String自定义事件名称?data精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 20 页，共 49 页 - - - - - - - - - - mui 开发文档Type: 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);