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

我们在做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>

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

猜你喜欢