h5页面调用小程序分享方法_微信h5页面自定义分享能用小程序appid吗

小程序端

<web-view src="{{path}}" bindmessage="handleWebviewMessage"></web-view>
1

data: {
    path: '',
    shareOptionsObj: {},
  },
  onLoad(options: { webview: string }) {
    this.setData({
      path: decodeURIComponent(options.webview)
    })
  },
  onShareAppMessage() {
    const _this = this
    return _this.data.shareOptionsObj
  },
  handleWebviewMessage(e: WechatMiniprogram.CustomEvent) {
    const obj = e.detail.data[e.detail.data.length - 1]
    if (obj.type === 'share') {
      this.setData({
        shareOptionsObj: e.detail.data[e.detail.data.length - 1].config,
      })
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

H5端

<div class="page-transfer-page-container">
    <div @click="onShare" class="btn-share">国民家</div>
</div>
1
2
3

import wx from 'weixin-js-sdk' // 引入微信sdk依赖 版本： "weixin-js-sdk": "^1.6.0"
methods: {
    onShare() {
      wx.miniProgram.postMessage({
        data: {
          type: 'share',
          config: {
            title: '国民家',
            path: `/pages/webview/index?webview=${encodeURIComponent(
              'https://ai.insurtechbank.net/pa-health-ui/#/transferPage',
            )}`,
            imageUrl:
              'https://wallet-minio.lianft.com/picc/miniapp/share/share.png',
          },
        },
      })
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18