点击第一个页面的标签，跳转到第二个页面，把第一个页面的值也传往目标页面

现在提供两种实现方式

注意：需要在手机运行才可以，用电脑浏览器可能不支持。

第一种方式  页面已创建，通过自定义事件传值

first.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>HTML5，MUI方式自定义事件页面传值</title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

            mui.init({

                preloadPages: [{//预加载目标页面

                    'url': 'second.html',

                    'id': 'second.html'

                }]

            });

            window.onload = function() {

                var Page = null;

                document.getElementById("a1").addEventListener('tap', function() {

                    if (!Page) {

                        Page = plus.webview.getWebviewById('second.html');

                    }

                    mui.fire(Page, 'show', {

                        id: 'id1',     //传往second.html的值

                        name: 'name2'  //传往second.html的值

                    });

                    mui.openWindow({ //目标页面

                        id: 'second.html',

                    });

                });

            }

        </script>

    </head>

    <body>

        <a id="a1">跳转</a>

    </body>

</html>

second.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>HTML5，MUI方式自定义事件页面传值</title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

             //添加newId自定义事件监听

                window.addEventListener('show', function(event) {

                    //获得事件参数

                    var id = event.detail.id;

                    var name = event.detail.name;

                    alert(id);

                    alert(name);

                })

        </script>

    </head>

    <body>

    </body>

</html>

第二种方式     页面初始化时，通过扩展参数传值；

first.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>mui页面间传值</title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

            mui.init();

            var param = { //这是要传的数据

                userId: 'userId11111111111',

                toKen: 'toKen',

                userRole: 'userRole'

            };

            function SendPage(pageId, linkUrl, pageParam) {

                mui.openWindow({//目标页面

                    url: 'second.html',

                    id: 'second.html',

                    extras: param

                });

            }

        </script>

    </head>

    <body>

        <a onclick="SendPage()">跳吧</a>

    </body>

</html>

second.html     目标页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

            mui.plusReady(function() {

                var self = plus.webview.currentWebview();

                alert(self.userId);

            });

        </script>

    </head>

    <body>

    </body>

</html>

MUI-页面传参数的更多相关文章

  1. js页面传参数时，参数值包含特殊字符的处理

    js页面传参数时,参数值包含特殊字符应该怎么处理,解决方法就是利用js的escape函数,这个函数在解决中文乱码等方面应用的比较广泛.推荐使用. 工作中遇到的小问题,一个页面中通过window.sho ...

  2. ASP.net<a>标签跨页面传参数

    //在goodsDetail.aspx页面接收 <script> //加载事件 $(function () { //第一种方式 var id=GetQueryString("id ...

  3. layUI不同页面传参数

    //页面一的方法 function modifyHotSearch(id){ layer.open({ type:2, title:"修改热门搜索", area: ['600px' ...

  4. 工作总结 mvc 调页面传参数 参数值会一直保存 在这个页面上的

    意思是 两个页面均可以 获取到id 和 goodsType 都可以获取 id goodsType post 的 还多带点属性值 form data 页面上带过去的 (新增 编辑)

  5. 父页面（JSP页面）传参数到子页面（JSP页面）

    父页面(JSP页面)传参数到子页面(JSP页面) 1.父页面传参数到子页面 //JavaScript代码 $.ajax({ type:"POST", uri:"../st ...

  6. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  7. vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  8. 用js把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...

  9. Spring 向页面传值以及接受页面传过来的参数的方式

    来源于:http://www.cnblogs.com/liuhongfeng/p/4802013.html 一.从页面接收参数 Spring MVC接收请求提交的参数值的几种方法: 使用HttpSer ...

  10. html 跳转页面传参、点击获取DOM参数

    虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...

随机推荐

  1. Ubuntu 下载 Eclipse + tomcat 配置

    tomcat下载 去网站下载core中的 tar.gz的文件 下载之后依然转移到/opt文件夹然后进行解压 sudo cp apache-tomcat- /opt sudo tar -zxvf apa ...

  2. CUDA编程学习笔记2

    第二章 cuda代码写在.cu/.cuh里面 cuda 7.0 / 9.0开始,NVCC就支持c++11 / 14里面绝大部分的语言特性了. Dim3 __host__ __device__ dim3 ...

  3. [LeetCode] 32. Longest Valid Parentheses (hard)

    原题链接 题意: 寻找配对的(),并且返回最长可成功配对长度. 思路 配对的()必须是连续的,比如()((),最长长度为2:()(),最长长度为4. 解法一 dp: 利用dp记录以s[i]为终点时,最 ...

  4. 《VR入门系列教程》之14---面向大众的Unity3D

    大众化的游戏引擎--Unity3D     并不是所有VR应用都是游戏,然而现在做VR开发的几乎都会用专业游戏引擎来做,因为游戏引擎既满足了一个引擎的要求又可以方便地制作出高品质的VR应用.一个游戏引 ...

  5. CentOS EPEL yum源

    CentOS EPEL yum源 用yum安装软件时,经常发现我们的yum源里面没有该软件,比如htop.网上查到的一个方案是需要自己去wget源码,然后configure,make,make ins ...

  6. js，ts操作dom总结

    以上面为例: js获取placeholder节点 : document.getElementsByClassName("newTicket")[0].getAttributeNod ...

  7. lr参数化

    为什么做参数化? 数据库校验:注册用户时会看数据库有没有这个账号 应用程序校验:pc端qq登陆,一个账号只能登陆一台电脑 1.数据库或应用程序提交值的唯一性校验 数据库查询过程: 1.语法检查.语义检 ...

  8. Bellman-Ford 算法

    根据之前最短路径算法里提到的,我们只要放松所有边直到其全部失效就可以得到最短路径 注意:图中不能有负圈.否则当负圈中某个点经过这个负圈的所有边的松弛操作后,这个点的的d[i]就会减小,此时会发现它可以 ...

  9. Python字典排序

    利用引出一个例子来理解 例如:比如使用Python字典排序,d={'a':1,'c':3,'b':2}按值升序排列,我们可以用sorted高阶函数或者用列表的.sort()方法.下面具体阐述两种排序方 ...

  10. Calico 网络通信原理揭秘

    Calico 是一个纯三层的数据中心网络方案,而且无缝集成像 OpenStack 这种 Iaas 云架构,能够提供可控的 VM.容器.裸机之间的 IP 通信.为什么说它是纯三层呢?因为所有的数据包都是 ...