mui与预加载页面之间互相传值笔记

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项目开发中遇到的一些问题(如有错误，请告知，嘿嘿)