mui---子页面主动调用父页面的方法

时间：2024-10-25 22:03:32

我们在做APP的时候，很多时候会有这样的功能需求，例如：登录，充值，如果登录成功，或充值成功后，需要更改当前页面以及父页面的状态信息，就会用到在子页面调用父页面的方法来实现：在子页面刷新父页面的功能。

不多说：看代码

父页面：b.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title></title>

<link rel="stylesheet" type="text/css" href="../css/mui.min.css">

<style type="text/css">

*{margin:0px; padding:0px;}

div.main{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; background:#eee;}

div.main-scroll{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; overflow: scroll;}

ul.list{width: 100%;}

ul.list li{width: 100%; line-height: 40px; padding-left: 10px;}

</style>

</head>

<body>

<div class="main" id="main">

    <div class="main-scroll">

        <h3>{{message}}</h3>

        <button @tap="bbbb">改变</button>

        <ul class="list">

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

            <li @tap="details">我是新闻动态</li>

        </ul>

    </div>

</div>

</body>

<script type="text/javascript" src="../js/vue.min.js"></script>

<script type="text/javascript" src="../js/mui.min.js"></script>

<script type="text/javascript">

function aaaa(){

    console.log("我是 aaaa 方法");

};

var main = new Vue({

    el: "#main",

    data: {

        message:'我是b.html页面',

        list:[],

    },

    mounted: function(){

    },

    watch: {},

    methods: {

        bbbb:function(){

            console.log("我是 bbbb 方法");

            this.message = "你真的是b.html页面吗？";

        },

        cccc:function(){

            console.log("我是 ccc 方法");

        },

        details:function(){

            mui.openWindow({

                url:'./b-details.html',

                id:'b.html',

                createNew:true,

                styles:{top:'0px',bottom:'0px'},

                show:{autoShow:true,aniShow:'slide-in-bottom',duration:260},

                waiting:{autoShow:false,title:'',options:{}}

            });

        },

    }

});

</script>

</html>

子页面：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>Document</title>

<link rel="stylesheet" type="text/css" href="../css/mui.css">

<style type="text/css">

div.main{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; background:#eee;}

div.main-scroll{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; overflow: scroll; background:orange;}

</style>

</head>

<body>

<div class="main" id="main">

    <div class="main-scroll">

        <button class="mui-action-back">点击返回</button>

        <div>我是新闻动态的详情</div>

        <button class="mui-button" @tap="bbbbfun">我是新闻动态</button>

    </div>

</div>

<script type="text/javascript" src="../js/vue.min.js"></script>

<script type="text/javascript" src="../js/mui.min.js"></script>

<script type="text/javascript">

var main = new Vue({

    el: "#main",

    data: {

        list:[],

        selfWindow:null,

        opener:null,

    },

    mounted: function(){

        mui.plusReady(()=>{

            // this.plus = plus;

            // var selfWindow = plus.webview.currentWebview();

            // var opener = selfWindow.opener();

            // opener.evalJS('aaaa()');

            // opener.evalJS('main.bbbb()');

            // opener.evalJS('main.cccc()');

            this.selfWindow = plus.webview.currentWebview();

            this.opener = this.selfWindow.opener();

            this.opener.evalJS('aaaa()');

            this.opener.evalJS('main.bbbb()');

            this.opener.evalJS('main.cccc()');

        });

    },

    watch: {},

    methods: {

        // 主动调用父页面的方法

        bbbbfun:function(){

            this.opener.evalJS('main.bbbb()');

        },

    }

});

</script>

</body>

</html>

相关文章