前言

在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')

},

参考链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: