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

来源：互联网发布：网络集线器hub 编辑：程序博客网时间：2024/06/02 05:06

最近在学习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(){varname = 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;}

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

1 0