HBuilder的页面传值

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

现在提供两种实现方式

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

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

先创建一个要传值的页面,我的命名叫:a.html
 <!DOCTYPE html>  

<html>

    <head>  

        <meta charset="utf-8">  

        <meta name="viewport"/>  

        <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.init({  

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

                    'url': b.html',  

                    'id': b.html'  

                }]  

            });  

            window.onload = function() {  

                var Page = null;  

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

                    if (!Page) {  

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

                    }  

                    mui.fire(Page, 'show', {  

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

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

                    });  

                    mui.openWindow({ //目标页面  

                        id: 'b.html',  

                    });  

                });  

            }  

        </script>  

    </head>  

    <body>  

        <a id="a1">点击传值到B页面</a>  

    </body>  

</html>  

这个是接收值的页面:b.html

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="utf-8">  

        <meta name="viewport"/>  

        <title>接收参数的页面</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"/>  

        <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.init();  

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

                userId: 'gl001',  

                toKen: 'toKen',  

                userRole: 'userRole'  

            };  

  

            function SendPage(pageId, linkUrl, pageParam) {  

                mui.openWindow({//目标页面  

                    url: 'b.html',  

                    id: 'b.html',  

                    extras: param  

                });  

            }  

        </script>  

    </head>  

    <body>  

        <a οnclick="chaunzhi()">点击传值到B页面</a>  

    </body>  

</html>

接收值的页面

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="utf-8">  

        <meta name="viewport"/>  

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值