mui页面传值(mui.fire())

本文详细介绍了在HBuilder中利用自定义事件实现A页面跳转到B页面,并将B页面的数据回传给A页面的具体方法。通过使用plus.webview API和mui.fire函数,实现了页面间的数据交互。

假设有A 与 B 俩个页面,如果我想通过连接在a页面进入b页面,然后把b页面的值传递给a页面。下面是我的做法:


A页面代码:
=======================================================================================
					var self = plus.webview.currentWebview();
	
	document.addEventListener("shuju", function(e) {
						address = e.detail.id;
						
					});//相当于b页面返回时自定义了事件,a页面调用

B页面代码
===========================================================================================
	document.getElementById("ensure").addEventListener("tap", function() {	//点击按钮返回A页面	
var detailPage;
             if(!detailPage) {
			detailPage = plus.webview.getWebviewById('signin.html');
							}
               mui.fire(detailPage, 'shuju', {
								id: title,
								lngs: lng,
								lats: lat,
								addresss: address
							});
							mui.back();
						});
	});

==============个人学习总结。

<think>好的,我现在需要解决用户的问题:在MUI框架中,子页面向父页面递多个的最佳实践是什么?用户之前提供的参考信息提到了MUI框架的一些特性,包括优化HTML5、接近原生体验、轻量级以及使用HBuilderX编译器等。此外,引用[2]提到each()方法,但可能和当前问题关联不大。 首先,我需要回忆MUI框架的页面间通信机制。MUI常用于移动端开发,页面结构可能涉及父页面和子页面,比如通过webview管理。通常,在移动端多页面应用中,页面之间的可以通过URL参数、本地存储(如localStorage)、自定义事件或MUI提供的方法来实现。 用户提到递多个参数,所以需要考虑如何高效地递多个。URL参数适合少量数据,但如果有多个参数可能会显得冗长,且安全性不高。本地存储虽然可以存储更多数据,但需要处理存储和读取的时机,可能存在数据竞争的问题。 MUI框架是否有专门的方法?比如,可能提供了自定义事件或消息递的机制。例如,mui.fire方法可以用来触发目标页面的自定义事件,并递数据。这可能是MUI推荐的方式。父页面可以监听某个事件,子页面触发该事件并附带数据。此外,webview之间的通信可能需要获取到父页面的webview对象,然后调用其evalJS方法执行父页面的函数,从而递参数。 接下来,我需要验证这些方法是否适用。例如,使用mui.fire需要目标页面已经创建,并且监听了相应事件。假设子页面在关闭时触发父页面的事件,递数据。或者,在子页面中获取父页面的webview,然后调用evalJS方法递参数。 另外,递多个参数时,可能需要将它们组合成一个对象,然后作为参数递。例如,使用JSON对象来封装多个键对,这样在接收时可以方便地解析。 需要确保递的数据是安全的,并且处理可能的异步问题。比如,父页面是否已经准备好监听事件,子页面在何时触发事件比较合适,比如在页面关闭前或者某个按钮点击时。 现在,根据这些思路,整理步骤: 1. 在父页面中预定义自定义事件监听,例如监听一个名为'childEvent'的事件,并在回调函数中处理递过来的数据。 2. 在子页面中,通过mui.fire方法触发父页面的自定义事件,并递数据对象。 3. 或者,子页面获取父页面的webview对象,使用evalJS方法调用父页面的函数,并入多个参数。 需要检查MUI的文档中关于页面间通信的部分,确认这些方法是否可行。根据用户提供的引用[1],提到HBuilderX的TBS模块用于视频功能,但未直接提及方法。引用[2]的each方法可能无关。 所以,最佳实践可能是使用mui.fire方法,因为它专为跨页面通信设计,支持递JSON数据,适合多个参数。同时,evalJS方法也是一个备选方案,但可能不够优雅,需要手动处理字符串拼接。 总结,步骤应为: - 父页面监听自定义事件,例如在plusReady事件中注册监听。 - 子页面在需要时触发该事件,附带数据对象。 - 使用mui.fire方法,参数包括目标页面的webview对象、事件名称和数据对象。 此外,需注意webview的获取方式,可能需要通过mui.getWebviewById或mui.currentWebview获取正确的实例。 最后,给出示例代码,说明如何在子页面触发事件,父页面接收并处理数据。同时,可能还有其他方法,如通过localStorage,但需注意及时清理数据。</think>在MUI框架中,子页面向父页面递多个参数的最佳实践可以通过**自定义事件触发+JSON数据递**实现。以下是具体步骤和代码示例: --- ### 方法一:使用`mui.fire`触发自定义事件 1. **父页面监听自定义事件** 在父页面初始化时(如`mui.plusReady`回调中),通过`addEventListener`注册自定义事件的监听器: ```javascript mui.plusReady(function() { var currentWebview = mui.currentWebview; currentWebview.addEventListener('childDataEvent', function(e) { console.log('接收到子页面数据:', e.detail); // 处理数据,例如更新UI mui.toast("收到参数:" + JSON.stringify(e.detail)); }); }); ``` 2. **子页面触发事件并递数据** 在子页面中获取父页面的Webview对象,通过`mui.fire`触发事件并递JSON对象: ```javascript // 获取父页面Webview对象(假设父页面是首页) var parent = mui.getWebviewById('父页面Webview的id'); // 触发自定义事件,递多个参数 mui.fire(parent, 'childDataEvent', { param1: 'value1', param2: 123, param3: { key: 'data' } }); ``` --- ### 方法二:通过`evalJS`执行父页面函数 1. **父页面定义全局接收函数** 在父页面中定义一个全局函数用于接收数据: ```javascript window.receiveDataFromChild = function(data) { console.log('子页面递的数据:', data); mui.alert('接收参数:' + JSON.stringify(data)); }; ``` 2. **子页面调用父页面函数** 子页面通过获取父页面的Webview对象,调用`evalJS`执行父页面的函数: ```javascript var parent = mui.getWebviewById('父页面Webview的id'); parent.evalJS(`receiveDataFromChild(${JSON.stringify({ name: '张三', age: 25, items: ['a', 'b'] })})`); ``` --- ### ⭐ 最佳实践建议 1. **优先使用`mui.fire`方法** 该方式通过事件机制解耦父子页面,代码可维护性更高[^1]。 2. **复杂数据使用JSON封装** 递多个参数时,组合成对象并通过`JSON.stringify`序列化。 3. **Webview管理** 若父页面是入口页,可通过`plus.webview.currentWebview().opener()`获取其Webview对象,无需硬编码ID。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值