mui开发h5+app过程中页面间参数传递的总结第一篇

最近在学习mui开发APP，可以说是混合APP的开发。其中涉及到HTML5+的规范，非常值得学习。本人在学习过程中用到了hcoder的h.js 也通过hcoder网站的教学视频学习到很多非常有用的基础的mui的功能，在此也非常感谢@深海老师以及群友能在群里及时为我提供思路和解决方案。

APP开发过程中，窗口页面之间传递参数是非常重要的环节，传递方式也是非常多的，我目前能够掌握到的和用到的也就是三四种方式,以下的案例引入了mui.js和hcoder的h.js：

第一种方式就是通过mui.openWindow里面的拓展参数：

1、要传递参数的页面A，注意，这里不仅能传递固定的参数，还能把获取的input的value值传递过去（包括输入的密码），其实只要是你想传递的参数，都可以做到。

优势：适合小型数据传递，不需要触发事件，简单快速。

<div class="mui-content">
    <h3 id="op2">this is wenview 1 </h3>    
    <div class="mui-input-group">
	    <div class="mui-input-row">	      
	    	<input type="text" class="mui-input-clear" id="name" placeholder="请输入用户名">
	    </div>
	    <div class="mui-input-row">	        
	        <input type="password" class="mui-input-password" id="pwd" placeholder="请输入密码">
	    </div>	    
	</div>
</div>	
<script src="../js/mui.min.js"></script>
<script src="../js/libs/h.js"></script>
<script type="text/javascript">
	mui.init()
//	document.getElementById("op2").addEventListener("tap",function(){
	h("#op2").tap(function(){
		var	name = h('#name').val(),//获取输入的名称和密码，并赋值给变量
			pwds = h('#pwd').val();
		mui.openWindow({
			url:'w2.html',
			id:'w2.html',
			extras:{
				detailId:'我是被传递过来的参数',
				name:name,
				pwd:pwds
			}
		})
	})
</script>

  

2、接收数据的窗口页面B，这个很简单，就是赋值给变量，直接展示到页面中，或者通过console.log()打印出来看效果也行。案例中既有打印也有页面展示。

<div class="mui-content">
    <h3>this is wenview 2 </h3>	
    <div id="extras"></div>
    	下面的是input获取到的参数
    <div id="d1"></div>
    <div id="d2"></div>
</div>	
<script src="../js/mui.min.js"></script>
<script src="../js/libs/h.js"></script>
<script type="text/javascript">
	mui.init()
	mui.plusReady(function(){		
	var self = plus.webview.currentWebview();//h5+的webview
        var id	 = self.detailId;
        var cname= self.name;
	var cpwd = self.pwd;
	h("#extras").html(id);//把获取到的数据展示到页面中
	h("#d1").html(cname);
	h("#d2").html(cpwd);
	console.log(cpwd)
	})
</script>

第二种方式：通过evalJS，其优点就是能够在多个页面中使用，当你在A窗口页面要打开四五个页面，并要在四五个页面传递参数回来时，就特别适合用它了，

mui.plusReady(function(){
				var Pspage = plus.webview.getWebviewById('paicar.html')				
				mui('.mui-table-view').on('tap', '.mui-table-view-cell', function() {
				var fleet = this.getAttribute("id"); //获取被点击的车队名称
				console.log(fleet)			
				Pspage.evalJS("send('"+fleet+"')"); 				
				mui.back();
				})
			})

接收数据的窗口页面需要触发send函数才能接收到：

function send(param){
				document.getElementById("Choose-cpy").innerHTML = param;
			} 

先写到这里吧！这是我目前用的比较多的两种。

来源：CSDN

作者：well2049

链接：https://blog.csdn.net/well2049/article/details/71553140