1在H5项目引入微信sdk,比如index.html
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
2、在H5需要通信的地方调用 (判断微信小程序)
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
wx.miniProgram.postMessage({ data: { merber:{imageUrl:"",path:""} } })
}
})
3、小程序webview载入h5
在点击右上角三个点时候会触发receiveMessage,然后触发onShareAppMessage
<template>
<web-view :src="src" @message="receiveMessage"> </web-view>
</template>
<script lang="ts">
export default {
data() {
return {
src: '',
shareData: {
imageUrl:'',
},
}
},
onLoad(e: any) {
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage'],
success(res) {
console.log('mixin share success', res ? JSON.stringify(res) : res)
},
fail(err) {
console.log('mixin share fail', err ? JSON.stringify(err) : err)
},
})
},
onShow() {
cfg.mpSrcP = this.srcP
App.shareData = {}
},
onShareAppMessage(res: any) {
console.log(res)
if (res.from === 'button') {
return this.shareData
}
if (res.from === 'menu') {
return this.shareData || {}
}
},
methods: {
// 监听h5 消息
receiveMessage(e: any) {
let arr = e?.detail?.data
let data = arr && arr.length > 0 ? arr[arr.length - 1] : null
if (data && data?.merber?.id) {
url = data?.path ? data.path : '/pages/home/home'
this.shareData = {
path: url,
imageUrl: data?.imageUrl
? data.imageUrl
: 'imageUrl',
title: data?.title ? data.title : '小程序名字',
desc: data?.desc ? data.desc : '',
}
}
},
},
}
</script>
<style></style>