作者：suzhaolie | 来源：互联网 | 2023-06-26 16:12
目前在开发APP的时候，有这样的一个需求：需要在登录页面返回后能够刷新父页面。功能是这样的：在A.html页面有头像和用户昵称，这些信息需要用户进行登录才能够拿到，登录页面是在B.html，点击
目前在开发APP的时候，有这样的一个需求：需要在登录页面返回后能够刷新父页面。
功能是这样的：在 A.html页面有头像和用户昵称，这些信息需要用户进行登录才能够拿到，登录页面是在B.html，点击A.html页面，跳转到B.html进行登录，在B.html登录成功后返回，返回的时候需要更新A.html的头像和用户昵称。
方法：在B.html页面点击返回的时候，触发A.html页面的自定义方法来实现。
具体看代码：项目是用VUE来做的，所以...
B.html ：添加 beforeback方法：
mounted: function(){
mui.init({
beforeback:function(){
var list = plus.webview.getWebviewById('music-index.html');
mui.fire(list,'refresh');
return true;
},
});
},
A.html 做接受这个方法，当然这个fire还可以进行传递参数
mounted: function() {
window.addEventListener('refresh',()=>{
console.log('refresh fun');
this.initialize(); // 具体方法
});
},
简答示例：a.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">
<ul class="list">
<li v-for="x in list" @tap="details">{{x}}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">
var main = new Vue({
el: "#main",
data: {
list:[],
num:0,
},
mounted: function() {
this.getList();
window.addEventListener('init',()=>{
this.initialize(); // location.reload();
});
},
watch: {},
methods: {
initialize:function(){
this.num ++;
this.getList();
},
getList:function(){
var lists = [];
for(var i=0; i<50; i++){
lists.push("第"+this.num+"个");
};
this.list = lists;
},
details:function(){
mui.openWindow({
url:'./a-details.html',
id:'a.html',
createNew:true,
styles:{top:'0px',bottom:'0px'},
show:{autoShow:true,aniShow:'slide-in-bottom',duration:260},
waiting:{autoShow:false,title:'',options:{}}
});
},
}
});
script>
html>
跳转到详情：a-details.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>Documenttitle>
<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">
<div class="main-scroll">
<button class="mui-action-back">点击返回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:[],
},
mounted: function(){
mui.plusReady(()=>{
var selfWindow = plus.webview.currentWebview();
// 如果是固定的跳转 可以直接返回到固定的页面
// 如果点击进来的页面不固定 需要将点击来的页面ID传递过来
mui.init({
beforeback:function(){
var parent = plus.webview.getWebviewById('a.html');
// 还可以传值 mui.fire('home.html','init',{mid:3});
mui.fire(parent,'init');
return true;
},
});
});
},
watch: {},
methods: {
initialize:function(){
this.getUserInfo();
this.getMusicList();
this.getFigureList();
},
}
});
script>
body>
html>
京公网安备 11010802041100号