页面传值

为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。

大致过程是这样的：

1、首先在子页面中添加自定义事件

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

2、在父页面预加载子页面，那么在子页面添加的自定义事件就可以准备调用。可以通过mui.fire()方法可触发目标窗口的自定义事件。此时data参数就传递到了子页面。

3、在子页面中，使用event.detail.name获取相应的参数。

//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
  //获得事件参数
  var id = event.detail.id;
  //根据id向服务器请求新闻详情
  .....
});

示例：

父页面~~~

<body>
<header class="mui-bar mui-bar-nav">
	<h1 class="mui-title">自定义事件-新闻列表传值</h1>
</header>
<div class="mui-content">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			事件绑定-1
		</li>
		<li class="mui-table-view-cell">
			事件绑定-2
		</li>
		<li class="mui-table-view-cell">
			事件绑定-3
		</li>
		<li class="mui-table-view-cell">
			事件绑定-4
		</li>
		<li class="mui-table-view-cell">
			事件绑定-5
		</li>
	</ul>
</div>   
<script src="../../js/mui.min.js"></script>
<script type="text/javascript">
	mui.init({
		preloadPages:[{
			id:'event-DIY-news-details.html',
			url:'event-DIY-news-details.html'
		}]   
	});
	
	var detailPage=null;
	mui('.mui-table-view').on('tap','li',function(){
		var newsText=this.innerText;
		//获得详情页面
		if (!detailPage) {
			detailPage=plus.webview.getWebviewById('event-DIY-news-details.html');
		}
		//触发详情页面的newsText事件
		mui.fire(detailPage,'newsText',{
			newsText:newsText
		});   
		//打开详情页面
		mui.openWindow({
			id:'event-DIY-news-details.html'
		});
	})   
</script>
</body>

子页面~~~

<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">自定义事件-新闻列表传值-详情页</h1>
	</header>
	   
	<div class="mui-content">
		<div id="newsText"></div>
	</div>
	      
	<script src="../../js/mui.min.js"></script>
	<script type="text/javascript">
		window.addEventListener('newsText',function(event){
			var newsTextDetails=event.detail.newsText;
			var newsContainer=document.getElementById("newsText");
			newsContainer.innerText=newsTextDetails;
		});      
	</script>
</body>

实现效果~~~

点击任意一个li元素，都会把当前li的文本节点传到子页面进行显示

猜你喜欢