文档章节

mui框架如何实现页面间传值

mickelfeng
 mickelfeng
发布于 2017/01/22 23:17
字数 940
阅读 121
收藏 0

在App开发中,页面间传值是很常见的开发需求,mui框架根据业务场景不同,提供了两种传值模式。

1、页面初始化时,通过扩展参数传值;

  mui在初始化页面时,提供了extras配置参数,通过该参数可以设置页面参数,从而实现页面间传值;mui框架在如下几种场景下,会执行页面初始化操作:

 (1)、通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效);

 (2)、通过mui.init()方法创建子页面;

 (3)、通过mui.init()方法预加载页面;

 (4)、通过mui.preload()方法预加载页面

示例,假设我们有如下需求:在首页中打开关于页面时,传递当前产品名称及版本号,然后在关于页面中读取这两个参数并显示出来;

首页实现代码:

mui.openWindow({  
    url:'info.html',  
    id:'info.html',  
    extras:{  
        name:'mui',  
        version:'0.5.8'  
    }  
}); 

关于页面实现代码:

var self = plus.webview.currentWebview();  
var name = self.name;  
var version = self.version;  


 

2、页面已创建,通过自定义事件传值

  在App开发中,经常会遇到页面间传值的需求,比如从新闻列表页进入详情页,需要将新闻id传递过去; Html5Plus规范设计了evalJS方法来解决该问题; 但evalJS方法仅接收字符串参数,涉及多个参数时,需要开发人员手动拼字符串; 为简化开发,mui框架在evalJS方法的基础上,封装了自定义事件,通过自定义事件,用户可以轻松实现多webview间数据传递。仅能在5+ App及流应用中使用。因为是多webview之间传值,故无法在手机浏览器、微信中使用;

2.1、监听自定义事件

  添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:

window.addEventListener('customEvent',function(event){

  //通过event.detail可获得传递过来的参数内容

  ....

});

2.2、触发自定义事件

 通过mui.fire()方法可触发目标窗口的自定义事件:

   .fire( target , event , data )

      target:Type: WebviewObject,需传值的目标webview

      event:Type: String,自定义事件名称

      data:Type: JSON,json格式的数据

  目标webview必须触发loaded事件后才能使用自定义事件。若新创建一个webview,不等该webview的loaded事件发生,就立即使用webview.evalJS()或mui.fire(webview,'eventName',{}),则可能无效;

2.3、示例

  假设如下场景:从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻ID通知详情页面需要显示具体哪个新闻,详情页面再动态向服务器请求数据,mui要实现类似需求可通过如下步骤实现:

(1)、在列表页面中预加载详情页面(假设为detail.html)

(2)、列表页面在点击新闻标题时,首先,获得该新闻id,触发详情页面的newsId事件,并将新闻id作为事件参数传递过去;然后再打开详情页面;

(3)、详情页面监听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向服务器请求新闻详情  
  .....  
});  

本文转载自:http://blog.csdn.net/qq_27626333/article/details/51856386

mickelfeng

mickelfeng

粉丝 237
博文 2802
码字总数 605868
作品 0
成都
高级程序员
私信 提问
mui 完成了一个IOS项目

有一段时间没有写博客了,今天还在公司加班,处理最后一个遗留下来的大BUG,就是通过html5+ 的 plus.uploader 来上传图片的功能始终不能实现,PHP接收文件的代码似乎走不通。使用$FILE也不行...

Chendj
2015/12/13
3.2K
3
mui前端框架页面传值问题

目前的官方文档不如百度经验demo,相对而言。 假设3个页面a页面,b页面,c页面;a页面跳转到b页面,b页面作为一个父页面打开c页面,c页面是远程页面,本地无法直接操作。 openWindow("/ASSOC...

腾龙问天
2016/07/13
3.1K
7
武侯/mui-vue2

mui-vue2 基于mui+vue2.x的H5 APP项目,页面视图全部都是html5页,不是嵌入app原生页面,项目可以直接运行在PC上调试,也可以在hbuilder上真机调试,可以直接下载安装点此链接APP下载。 项目文...

武侯
2017/12/30
0
0
基于MUI构建的具有90+页面的移动APP

#前言 mui是一款接近原生App体验的前端框架,只需要掌握前端技术就可以开发APP应用,官方有提供功能比较全面的demo版本, 但在实战中总会遇到一些不可避免但坑,对于没有接触过mui的开发者,...

EasyTuan
2018/08/28
0
0
基于 MUI 构建一个具有 90 +页面的APP应用

前言 mui是一款接近原生App体验的前端框架,只需要掌握前端技术就可以开发APP应用,官方有提供功能比较全面的demo版本, 但在实战中总会遇到一些不可避免但坑,对于没有接触过mui的开发者,难...

so丶简单
2018/08/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

自定义ApiBoot Logging链路以及单元ID生成策略

ApiBoot Logging会为每一个请求都对应创建链路编号(TraceID)以及单元编号(SpanID),用于归类每一次请求日志,通过一个链路下日志单元的Parent SpanID可以进行上下级关系的梳理。 前文回顾...

恒宇少年
21分钟前
8
0
浅谈 Application 和 activity

对于 在 Application初始化一些变量,为什么不可以放在activity 或者其他的组件里呢? 这里就根据个人的理解来讲述一下,欢迎补充指正。 首先 activity 是以栈的形式出现,一个app应用会有多...

MrLins
21分钟前
8
0
Allegro的脚本文件内容里都有哪些

小伙伴们在使用Allegro的时候是否经常用到脚本文件夹呢?scr的用法其实可真不简单。。。 首先脚本文件的运行模式就存在很多种,比如不提示错误信息,不弹出确认对画框(这样很有利于我们执行...

demyar
23分钟前
16
0
微信升级外链管理规范,「砍一刀帮我加速」要被禁止了

原创: 蒋鸿昌 首发:「知晓程序」公众号 - 最好的微信新商业媒体 几天前,知名互联网评论人阑夕模仿皮尤研究中心(Pew Research Center)在美国做的互联网通识调查问卷,做了一份中文版问卷...

知晓云
23分钟前
14
0
CentOS 7接投影仪

我将一台安装着CentOS 7图形界面的惠普笔记本电脑当桌面使用。最近,想要连接投影仪时却遇到了问题。笔记本有一个HDMI接口。我买了一个HDMI---->VGA的转接线,连上笔记本电脑后,屏幕一直在闪...

大别阿郎
27分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部