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