移动端开发框架mui之页面之间参数传递（多种方式）

最新推荐文章于 2024-09-30 08:54:36 发布

zgphacker2010

最新推荐文章于 2024-09-30 08:54:36 发布

阅读量2k

点赞数

分类专栏：移动端开发

原文链接：https://www.cnblogs.com/beast-king/p/9113831.html

版权

移动端开发专栏收录该内容

22 篇文章 3 订阅

订阅专栏

方式一：mui---通过mui.openWindow传递参数

openWindow_send_page.html(发送页面)

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <button type="button" class="mui-btn mui-btn-green">用mui-openWindow向recieve_page页面传值</button>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            //openWindow方式
            document.getElementsByTagName('button')[0].addEventListener('tap', function() {
                mui.openWindow({
                    url: 'openWindow_recieve_page.html',
                    id: 'openWindow_recieve_page',
                    extras: {
                        name: 'curry'
                    }
                });
            });
        </script>
    </body>

</html>

openWindow_recieve_page.html(接收页面)

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <span id="span1">
            span1
        </span>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            mui.plusReady(function() {
                var self = plus.webview.currentWebview();
                //或通过webview的id找到
                //var self=plus.webview.getWebviewById('openWindow_recieve_page');
                document.getElementById("span1").innerText = 'hi,' + self.name;
            })
        </script>
    </body>

</html>

方式二：mui---通过plus.webview.create创建webview并打开新页面并传参到新页面

create_webview_home.html(主页)

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <button id="button1" class="mui-btn mui-badge-purple">打开子页</button>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            document.getElementById("button1").addEventListener('tap', function() {
                mui.plusReady(function() {
                    var nwating = plus.nativeUI.showWaiting(); //显示原生等待框
                    var webview_sub = plus.webview.create(
                        'create_webview_sub.html',
                        'create_webview_sub', {}, {
                            name: 'davis'
                        }); //后台创建webview并打开页面
                    webview_sub.addEventListener('loaded', function() {
                        nwating.close(); //关闭等待框
                        webview_sub.show('slide-in-right', 150); //把新的webview窗口显示出来
                    }, false);
                });
            })
        </script>
    </body>

</html>

create_webview_sub.html(新页面)

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="div1"></div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            mui.plusReady(function  () {
                document.getElementById("div1").innerText='hi,'+plus.webview.currentWebview().name;
            })
        </script>
    </body>

</html>

方式三：mui---mui.fire触发自定义事件传事件对象中的参数

fire_event_send_page.html(发送页面)

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <button id="btn_send" type="button" class="mui-btn mui-badge-danger">使用mui.fire触发自定义事件传递参数</button>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            var ws=null;
            mui.plusReady(function  () {
                ws=plus.webview.create('fire_event_recieve_page.html','fire_event_recieve_page');
            });
            document.getElementById("btn_send").addEventListener('tap',function() {
                //'my_event'是自定义事件名称，name是事件参数 ,监听事件中回调用函数可用event.detail.name获取
                mui.fire(ws,'my_event',{name:'zyz'});
                ws.show();
            });
        </script>
    </body>

</html>

fire_event_recieve_page.html(接收页面)

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="div1"></div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            //监听事件my_event
            window.addEventListener('my_event',function(event) {
                //event是事件对象，可以得到触发时的事件参数
                document.getElementById("div1").innerText='hi,'+event.detail.name;
            })
        </script>
    </body>

</html>

方式四：mui---webview对象调用evalJS来传递参数

evalJS_send_page.html(发送页面)

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <button id="btn_send" type="button" class="mui-btn mui-btn-blue">发送页面执行接收页面定义的函数并传参</button>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            var ws = null;
            mui.plusReady(function() {
                //如果使用html5+api,如plus.barcode,plus.webview,plus.nativeUI等需要放入plusReady事件中,而且要用真机运行
                ws = plus.webview.create('evalJS_recieve_page.html', 'evalJS_recieve_page');
            });
            document.getElementById("btn_send").addEventListener('tap', function() {
                var name = 'mike';
                ws.evalJS('get_para("' + name + '")'); //evalJS执行字符串里的js代码
                ws.show();
            })
        </script>
    </body>

</html>

evalJS_recieve_page.html(接收页面)

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div class="mui-content">
            <div id="div1"></div>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
//            定义一函数给发送页面调用,获得其传入的参数
            function get_para(para) {
                document.getElementById("div1").innerText='hi,'+para;
            }
        </script>
    </body>

</html>

原文地址：

https://www.cnblogs.com/beast-king/p/9113831.html

https://www.cnblogs.com/beast-king/p/9118748.html

https://www.cnblogs.com/beast-king/p/9113630.html

https://www.cnblogs.com/beast-king/p/9113383.html