Hbuilder MUI 页面刷新及页面传值问题

最新推荐文章于 2023-10-16 10:33:27 发布

__心诺

最新推荐文章于 2023-10-16 10:33:27 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： MUI HBuilder

本文链接：https://blog.youkuaiyun.com/moxiaoya1314/article/details/72457521

HBuilder 同时被 2 个专栏收录

4 篇文章

订阅专栏

MUI

3 篇文章

订阅专栏

本文探讨了在Hbuilder MUI框架中遇到的页面刷新和页面间数据传递的问题。首先，介绍了如何在子页面修改数据后返回父页面并确保父页面数据刷新。接着，展示了具体的代码实现，包括父页面A的处理逻辑。内容详细阐述了在页面跳转过程中保持数据同步的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、页面刷新问题
1.父页面A跳转到子页面B，B页面修改数据后再跳回A页面，刷新A页面数据
(1).父页面A代码

window.addEventListener(“pageflowrefresh”, function (e) { 
location.reload(); 
});

(2).子页面B代码

var main = plus.webview.currentWebview().opener();//获取父页面A对象 
var main = plus.webview.getWebviewById(‘A’);//或者通过A页面id获取A页面对象 
mui.fire(main, “pageflowrefresh” );//出发A页面的pageflowrefresh方法 
mui.redirect(‘A’,’A.html’);//跳转到A页面

二、页面间传值问题
1.从A页面传值到B页面(mui.fire()方式)
(1).A页面代码

var main = plus.webview.getWebviewById(‘B’); 
mui.fire(main, “pageflowrefresh”,{ 
id:100 
})

(2).B页面代码

window.addEventListener(“pageflowrefresh”, function (e) { 
//获得事件参数 
var id = e.detail.id; 
});

2.从A页面传值到B页面(mui.方式)
(1).A页面代码

var param = { //这是要传的数据 
userId: ‘userId11111111111’, 
toKen: ‘toKen’, 
userRole: ‘userRole’ 
}; 
mui.openWindow({//目标页面 
url: ‘second.html’, 
id: ‘second.html’, 
extras: param 
});

(2).B页面代码（plus必须要放在plusReady里）

mui.plusReady(function() { 
var self = plus.webview.currentWebview(); //获取当前窗体对象 
alert(self.userId); //接收A页面传入的id参数值 
});

三、提交成功后跳转页面，并刷新
A页面：

//获得列表界面的webview 
var i = plus.webview.getWebviewById(“ArticleExamine.html”); 
//触发前往页面的自定义事件（例：AddNew）,从而进行数据刷新 
mui.fire(i,’AddNew’); 
if(i){ 
//触发列表界面的自定义事件（refresh）,从而进行数据刷新 
i.evalJS(“ArticleList(1, 10);”); 
}

B页面：

//添加AddNew自定义事件监听 
window.addEventListener(‘AddNew’,function(){ 
document.getElementById(“news”).innerHTML = “”; 
});