小程序：webview如何进行分享_小程序 webview 分享

背景

小程序的分享只能从小程序触发，webview中的h5页面没法直接触发小程序分享。

由于要分享的页面是webview中的某个页面，而webview作为一个容器，它是一个整体（不管webview内部的页面层级）作为小程序的一个页面的，我们所看到的页面跳转都是在这个容器中进行的。

所以为了实现webview中的页面分享，需要先从嵌套在webview里的h5页面传递分享参数，并在小程序的webview页面中进行数据获取，把h5页面传递的数据作为小程序分享的参数。

步骤

1、h5通过postMessage给小程序发送需要分享的消息（以下是一篇专区文章的详情页面，拿到文章详情后，传递给小程序）

const ua = window.navigator.userAgent.toLowerCase()
if (ua.indexOf('micromessenger') > -1) { 
  // 判断是否是微信环境
  wx.miniProgram.getEnv(function (res) {
    if (res.miniprogram) { // 小程序环境
      const message = {
        title: '......'
        desc: '.....'
      }
      wx.miniProgram.postMessage({
        data: {
          message
        }
      })
    } else {
      // 非小程序环境下逻辑
      // console.log('不在小程序中')
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、小程序端对webview传递的参数进行处理。（注意：小程序只会在特定时机（小程序后退、组件销毁、分享）触发并收到消息）

<web-view
  src="{{ url }}"
  bindmessage="handleWebviewMessage"
  bindload="handleWebviewLoad"
/>

handleWebviewMessage (e) {
  //h5每次传递的值，都会存在e.$wx.detail.data，根据需要去处理相关值
  const payloadFromWebview = e.$wx.detail.data[e.$wx.detail.data.length - 1]['message']
  this.shareConfig = { ...this.shareConfig, ...payloadFromWebview }
}
1
2
3
4
5
6
7
8
9
10
11

3、小程序端调用分享方法

onShareAppMessage: function (options) {
  const webViewUrl = options.webViewUrl
  const orgCode = wx.getStorageSync('orgCode')
  const wxId = wx.getStorageSync('wxId')
  return {
    title: this.$wepy.shareConfig.title,
    path: '/pages/web-view/tab-web-view?url=' + encodeURIComponent(webViewUrl) + '&orgCode=' + orgCode + '&wxId=' + wxId
   }
 }
1
2
3
4
5
6
7
8
9