通信方式

• 微信小程序向H5

通过webview的src参数，修改state.url实现传递，将需要传递的信息拼接在url后面

<web-view src="{{state.url}}" ></web-view> 

🌰 在微信小程序webview.ts中将token传给H5

H5

const url = new URL(window.location.href)  
    let token;  
    if (url.searchParams.get('token')) {  
    token = 'Bearer ' + url.searchParams.get('token')  
}

微信小程序

state.url = `${state.originUrl}`.replace('needToken=1', `token=${token}`)

会使用到的字符串方法 juejin.cn/post/701092…

• H5向微信小程序

通过weixin-js-sdk的postMessage方法传递参数，小程序bindmessage绑定函数进行接收，bindmessage:网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息

H5

wx.miniProgram.postMessage({ data: infoList });// 必须使用 {data:infoList} 格式

微信小程序

<web-view src="{{state.url}}" bindmessage="handlePostMessage"></web-view>

🌰 H5向微信小程序传递分享参数

H5

// 提前发送消息给小程序，初始化分享参数

   function postToWechat(e) {
       let infoList = {
        type: "share",// H5消息的消息类型  
            messageData: {  
            shareTitle: "我是标题",// 分享标题  
            shareImageUrl: "",// 分享截图(小程序可以截当前分享页面图，当然也可以使用传过去的图)  
            sharePathUrl: `/pages/index/index`,// 分享小程序页面(如需要参数则此地址需要拼接，注意这里的参数有长度限制)  
            }
        }
        wx.miniProgram.postMessage({ data: infoList });// 必须使用 {data:infoList} 格式
    }

微信小程序

// 接收H5页面传来的信息 触发时机：用户分享

function handlePostMessage(e) {
    let resObj = e.detail.data[e.detail.data.length - 1];  
    //多次传递会是数组的形式，传递一次会push进数组，所以我们需要拿到最新的数据，也就是数组的最后一个子集  
    state.title = resObj.messageData.shareTitle  
    state.image = resObj.messageData.shareImageUrl  
    state.path = resObj.messageData.sharePathUrl
}