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

现在提供两种实现方式

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

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

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. Mysql 时间相关

    -- 当前时间SELECT NOW(), SYSDATE(), CURRENT_TIMESTAMP(), LOCALTIME(), LOCALTIMESTAMP();SELECT CURDATE(), ...

  2. Spring 自动生成getter和setter方法 tostring方法

    添加maven依赖 <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok --> <dependency& ...

  3. ThinkPHP 入门

    ThinkPHP是一个免费.开源的,快速.简单地面向对象的轻量级PHP开发框架,遵循Apache2开源协议发布,是为了敏捷Web应用开发和简化企业级应用开发而诞生的.ThinkPHP借鉴国外很多优秀的 ...

  4. EF Core懒人小技巧之拒绝DbSet

    前言 最近在项目中使用EF Core的频率越来越高,当项目比较大的时候,疯狂往DbContext中加各种DbSet,你会不会特难受?如果你是一键生成的大佬,那么请忽略本文.本文旨在不写 DbSet,那 ...

  5. itextpdf 解析带中文的html问题

    官网连接 官网上有很多DEMO,下面就说几个我碰到的问题! Question: 1. 中文不显示 或者是乱码(本打算用Apache pdfbox来实现业务,但是折腾了一个上午也没解决中午乱码问题,就找 ...

  6. jdk1.8HashMap底层数据结构：散列表+链表+红黑树，jdk1.8HashMap数据结构图解+源码说明

    一.前言 本文由jdk1.8源码整理而得,附自制jdk1.8底层数据结构图,并截取部分源码加以说明结构关系. 二.jdk1.8 HashMap底层数据结构图 三.源码 1.散列表(Hash table ...

  7. logging模块 旗舰版

    函数式简单配置 import logging logging.debug('debug message') logging.info('info message') logging.warning(' ...

  8. go interface衍生的插件化处理

    在设计程序的许多应用场景中我们会遇到大体分为三个阶段的任务流. 第一.入口 一个或多个入口,等待阻塞的.或者主动请求方式的. ============================== 比如任务流需 ...

  9. Mac OS 安装mysqlclient 遇到的坑~

    最近在学习Python, 因为Django连接mysql 需要安装mysqlclient, 但Mac安装遇到各种问题,这里记录一下,避免以后再踩坑. 1.   正常情况下,安装mysqlclient ...

  10. idea 2018.3.4安装破解

    电脑环境:win10 64位 1.idea官网下载: 链接:https://www.jetbrains.com/idea/,如下图: 2.JDK官网下载: 链接:https://www.oracle. ...