页面间传输参数（两种传参方法）

页面两种传参方法转载：https://blog.csdn.net/qq_31971935/article/details/77100489

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

现在提供两种实现方式

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

第一种方式页面已创建，通过自定义事件传值
first.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>

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

<!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>

页面间传输参数（两种传参方法）

猜你喜欢