小程序内嵌web-view，web-view与微信小程序通信传值_小程序webview传值

业务场景

小程序内部嵌套web-view,所有业务逻辑都在h5页面中处理；现在需要通过转发分享好友来实现绑定邀请人这个功能。

使用

webview向小程序传数据

需要在小程序触发分享操作，来获取网页向小程序端传递的数据。

网页端

1. 安装微信sdk包

 pnpm add weixin-js-sdk
1

2. 引入

import wx from "weixin-js-sdk";
1

3. 使用

wx.miniProgram.postMessage({ data: { inviteId } });
1

小程序端

<web-view src="{{webUrl}}" bindmessage="getMessage"/>
1

//接收网页数据
 getMessage: function (res) {
    let inviteId = res.detail.data;
    this.setData({ inviteId });
  },
 //邀请好友
 onShareAppMessage: function () {
    return {
      title: "分享Title",
      path: `/pages/index/index?inviteId=${this.data.inviteId}`,
      imageUrl: "",
    };
 }
1
2
3
4
5
6
7
8
9
10
11
12
13

小程序向webview传数据

通过更改当前web-view的URL来实现。

this.setData({
  webUrl: `https://×××××××××?inviteId=${inviteId}`
})
1
2
3