• 页面间传输参数(两种传参方法)


     页面两种传参方法转载: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>
  • 相关阅读:
    【MySQL笔记】字符串、时间日期转换
    【MySQL笔记】触发器,存储过程和函数
    【MySQL笔记】用户管理
    spray 处理 response 的通用函数
    akka pubsub example
    一个手写的 http client
    scala get ipv4 address
    akka cluster singleton
    akka cluster sharding
    akka cluster 初体验
  • 原文地址:https://www.cnblogs.com/mangwusuozhi/p/9317470.html
Copyright © 2020-2023  润新知