uniapp 微信小程序webview载入h5 设置分享_嵌套小程序的h5设置小程序的分享

1在H5项目引入微信sdk，比如index.html

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
1

2、在H5需要通信的地方调用 （判断微信小程序）

wx.miniProgram.getEnv((res) => {
 if (res.miniprogram) {
	wx.miniProgram.postMessage({ data: { merber:{imageUrl:"",path:""} } })
 }
})
1
2
3
4
5

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63