MUI页面间传值问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/codesWay/article/details/79977360

在使用MUI做APP的时候，很多情况下都需要页面间通信传值，mui提供了一个机制来解决这个问题：自定义事件；

比如在A页面，需要传参到B页面，那么此时B页面就是目标界面；

在A页面：

mui.fire(target,event,data)

在这里target是需传值的目标webview (plus.webview.getWebviewById("页面id"))，event是自定义的事件名，data是一个要传递的json格式的数据

在B页面：

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});

假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻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向服务器请求新闻详情
  .....
});