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

现在提供两种实现方式

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

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

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. TreeMap原理实现及常用方法

    目录 一. TreeMap概述 二. 红黑树回顾 三. TreeMap构造 四. put方法 五. get 方法 六. remove方法 七. 遍历 八. 总结 前面我们分别讲了Map接口的两个实现类 ...

  2. 简单的量子算法(二)：Simon's Algorithm

    前情回顾: 简单的量子算法(一):Hadamard 变换.Parity Problem 好的,现在开始正版的故事,Simon's Algorithm 问题: 有一个secret string,是n位的 ...

  3. Excel催化剂开源第25波-Excel调用百度AI，返回AI结果

    现成的这些轮子,无需调用网页,直接本地离线即可生成). 当然在AI时代,少不了各种AI接口的使用场景,普通开发者只需聚焦在自己的业务场景上,这些AI底层技术,只需类似水煤电一般去BAT这些大厂那里去消 ...

  4. 问题解决：Maven execution terminated abnormally (exit code 1)

    Maven execution terminated abnormally (exit code 1) 修改setting.xml中的镜像位置 如下就可以了 <mirror> <id ...

  5. 三、SQL server 2008数据库的备份与还原

    一.SQL数据库的备份:   1.依次打开 开始菜单 → 程序 → Microsoft SQL Server 2008 → SQL Server Management Studio → 数据库:Dsi ...

  6. [Abp vNext 源码分析] - 6. DDD 的应用层支持 (应用服务)

    一.简要介绍 ABP vNext 针对于应用服务层,为我们单独设计了一个模块进行实现,即 Volo.Abp.Ddd.Application 模块. PS:最近博主也是在恶补 DDD 相关的知识,这里推 ...

  7. python课堂整理12---递归

    一.递归特性 1.必须有一个明确的结束条件 2.每次进入更深一层递归时,问题规模相比上次递归都应有所减少 3.递归效率不高,递归层次过多会导致栈溢出(在计算机中,函数调用是通过栈(stack)这种数据 ...

  8. Android CHM文件阅读器

    CHM格式是1998年微软推出的基于HTML文件特性的帮助文件系统.以替代早先的winHelp帮助系统,它也是一种超文本标识语言.在Windows 98中把CHM类型文件称作“已编译的HTML帮助文件 ...

  9. Dubbo源码学习之-Adaptive自适应扩展

    前言 最近三周基本处于9-10-6与9-10-7之间,忙碌的节奏机会丢失了自己.除了之前干施工的那段经历,只看参加软件开发以来,前段时间是最繁忙的了.忙的原因,不是要完成的工作量大,而是各种环境问题, ...

  10. [POJ2559&POJ3494] Largest Rectangle in a Histogram&Largest Submatrix of All 1’s 「单调栈」

    Largest Rectangle in a Histogram http://poj.org/problem?id=2559 题意:给出若干宽度相同的矩形的高度(条形统计图),求最大子矩形面积 解题 ...