前言
在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 标准模块加载方法加载。
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
支付宝端
支付宝小程序可以使用 webview 承载一个 H5 页面,但是不能在 webview 中直接调起支付,需要引入支付宝的 https://appx/web-view.min.js (此链接仅支持在支付宝客户端内访问)文件。
<script>
if (navigator.userAgent.indexOf('AlipayClient') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>')
}
</script>
核心代码
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
<web-view
wx:if="{{ url }}"
src="{{ url }}"
bindmessage="getMessageFromHTML"
binderror="handleWebViewError"
></web-view>
// 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
}
}
使用页面的监听
// confirmOrderLslQueryEstimate是web-view发出的事件名称
async attached() {
EventBus.on('confirmOrderLslQueryEstimate', (data) => {
// doing 监听到该事件时,页面具体做的操作
})
}
// 组件的页面生命周期-监听页面卸载
detached() {
EventBus.un('confirmOrderLslQueryEstimate')
},