mui与预加载页面之间互相传值
在 A 页面中预加载了 B 页面,如果要在 B 页面中拿到数据,并将数据传回给A页面,要怎么做呢?
实例:在 A 页面中点击获取位置的按钮,显示 B 页面,在 B 页面中选择地址后 将 经纬度等一些信息传回给 A 页面中。
代码
注意放进 , mui.plusReady 中
注意:在预加载的页面头部需自己创建(hbuilder 触发字符 mhe)
这是A页面
//预加载地图选择
var selectionLocationMap2 = mui.preload({
url: '/page/map/selectionLocationMap2.html',
id: 'selectionLocationMap2', //默认使用当前页面的url作为id
styles: {}, //窗口参数
extras: {} //自定义扩展参数
});
//监听自定义事件,用于接收传过来的值
window.addEventListener('changeAddress', function(event) {
//通过event.detail可获得传递过来的参数内容
console.log('监听到自定义事件')
console.log('JSON.stringify(event.detail): {}', JSON.stringify(event.detail))
//修改地址
currentAddressSpan.innerText = event.detail.selectedAddress
currentAddress.value = event.detail.selectedAddress
currentLongitude.value = event.detail.lng
currentLatitude.value = event.detail.lat
});
这里 selectionLocationMap2 就是 预加载页面的webview,所以显示/隐藏地图就如下即可
//显示
selectionLocationMap2.show()
//隐藏
selectionLocationMap2.hide()
在B页面取值
//地址选择
function selectAddress(ele) {
//addDynamic为上个页面的id,可以打印 JSON.stringify(webview)来查看,一般都是文件名
var p = plus.webview.getWebviewById('addDynamic')
console.log('jQuery(ele).text(): {}', jQuery(ele).text())
console.log('currentLng: {}', jQuery(ele).find("input[name='currentLng']").val())
console.log('currentLat: {}', jQuery(ele).find("input[name='currentLat']").val())
//触发自定义事件
mui.fire(p, 'changeAddress', {
selectedAddress: jQuery(ele).text().trim(),
lng: jQuery(ele).find("input[name='currentLng']").val(),
lat: jQuery(ele).find("input[name='currentLat']").val()
});
//隐藏页面
plus.webview.currentWebview().hide()
}
这里还有个问题,在A页面返回到首页或其他页后,B页面还会一直存在,下次进去B页面的值还停留在上一次的结果
可以通过重写 A页面的 mui.back() 函数来实现 A返回事件触发后 关闭B页面
//重写返回事件
mui.back = function() {
//关闭地图页
selectionLocationMap2.close()
//关闭当前页
webview.close()
}
仅作笔记,记录在h5项目开发中遇到的一些问题(如有错误,请告知,嘿嘿)