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

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

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

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

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

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

this is wenview 1

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

this is wenview 2

下面的是input获取到的参数

第二种方式:通过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;
			} 


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






你可能感兴趣的:(mui)