前言
在h5中使用navigateBack回退到微信小程序页面很常见，但是有一种交互需要在回退之后的页面可以得到通知，拿到标识之后，进行某些操作，这样的话，由于微信官方并没有直接提供这样的api，就需要我们开动脑筋曲线救国一下：navigateBack + postMessage
前置资源引入jssdk
微信端
在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
备注：支持使用 AMD/CMD 标准模块加载方法加载。
支付宝端
支付宝小程序可以使用 webview 承载一个 H5 页面，但是不能在 webview 中直接调起支付，需要引入支付宝的 https://appx/web-view.min.js （此链接仅支持在支付宝客户端内访问）文件。
核心代码
H5页面
// 方法封装
export function navigateBackJumpParams(paramObj) {
if (typeof window.my !== 'undefined') {
// 支付宝小程序
window.my.postMessage({
data: JSON.stringify(paramObj)
})
window.my.navigateBack({ delta: 1 })
} else {
// 小程序
window.wx.miniProgram.postMessage({
data: JSON.stringify(paramObj)
})
window.wx.miniProgram.navigateBack({ delta: 1 })
}
}
// 场景触发
const paramObj = {
couponSelectFlag: false,
pageFromKey: "confirmOrderCouponListKey"
}
navigateBackJumpParams(paramObj)
1、支付宝小程序使用window.my对象；微信小程序使用window.wx.miniProgram对象
2、发送消息的方式是调用postMessage方法，该方法接受一个对象作为参数，参数必须使用固定字段【data】；paramObj 必须是一个 JavaScript 对象，否则无法使用 JSON.stringify 函数将其转换为 JSON 字符串。
3、回退到当前小程序页面是调用navigateBack函数，该方法接受一个对象作为参数，delta表示返回的页面数，如果 delta 大于现有页面数，则返回到首页。
微信项目中
承载网页的容器 - web-view
// template
wx:if="{{ url }}" src="{{ url }}" bindmessage="getMessageFromHTML" binderror="handleWebViewError" > // methods async getMessageFromHTML(e) { if(e.detail?.data) { const postMessageInfo = Array.isArray(e.detail.data) ? e.detail.data[0] || '' : e.detail.data || '' let postMessageInfoParse = {} try { postMessageInfoParse = postMessageInfo ? JSON.parse(postMessageInfo) : {} } catch (error) { postMessageInfoParse = postMessageInfo } // 获取与h5页面商定的事件名称逻辑 if(postMessageInfoParse.pageFromKey === 'confirmOrderLslCouponList' && postMessageInfoParse.couponSelectFlag) { EventBus.emit('confirmOrderLslQueryEstimate', { couponSelectLslFlag: true }) return } } 在微信小程序环境，getMessageFromHTML(e){}中对象e的数据结构如下： 注意e.detail.data是数组类型 { "type":"message", "target":{ "dataset":{ }, "id":"", "offsetTop":0, "offsetLeft":0 }, "currentTarget":{ "dataset":{ }, "id":"", "offsetTop":0, "offsetLeft":0 }, "timeStamp":7425, "detail":{ "data":[ "{\"couponSelectFlag\":false,\"pageFromKey\":\"confirmOrderCouponListKey\"}" ] } } 在支付宝小程序环境，getMessageFromHTML(e){}中对象e的数据结构如下： 注意e.detail.data是对象类型 { "type":"message", "timeStamp":1700737905792, "target":{ "id":"appx-native-component-1", "tagName":"web-view", "dataset":{ }, "targetDataset":{ } }, "currentTarget":{ "id":"appx-native-component-1", "tagName":"web-view", "dataset":{ } }, "detail":{ "data":"{\"couponSelectFlag\":false,\"pageFromKey\":\"confirmOrderCouponListKey\"}" } } 使用页面的监听 // confirmOrderLslQueryEstimate是web-view发出的事件名称 async attached() { EventBus.on('confirmOrderLslQueryEstimate', (data) => { // doing 监听到该事件时，页面具体做的操作 }) } // 组件的页面生命周期-监听页面卸载 detached() { EventBus.un('confirmOrderLslQueryEstimate') }, 参考链接 大家都在找： 微信小程序：微信小程序怎么制作自己的程序 小程序：小程序微信认证申请入口 前端：前端web开发 web：webm
您阅读本篇文章共花了：
发表评论