计算机毕业设计中小程序webview中使用分享功能

 

注意：因为为小程序原生组件，会铺满整个页面，所以不能通过按钮来触发分享，用户只能通过右上角的三个点来主动分享，关键是一般需求都是需要自定义其分享的参数的，包括分享卡片的标题、图片、页面路径，所以h5需要向小程序传递数据，h5内需两个操作：

1 引入微信官方js文件

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

2 向小程序发送数据

// 向小程序发送消息
let postData = {
     url: window.location.href,
     title: Response.username + ":" + Response.title,
     image: Response.image
   };
 wx.miniProgram.postMessage({ data: JSON.stringify(postData) });

因为参数较多，所以写在对象里，再转成字符串发过去

3 小程序接受数据
下面的都是在小程序操作的，首先根据文档来，给webview添加接收数据的属性

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

然后写上回调函数

//接收h5发送的数据
  getMessage(e){
    console.log(e)
    let that =this;
    let shareUrl = e.detail.data[e.detail.data.length-1];
    that.shareUrl = JSON.parse(shareUrl);
  },
  注意：每次发送数据后数据会添加到e.detail.data中的数组，并不会清除掉上一次传递的数据，所以我们取数组的最后一位元素，转成json

不要忽略的是，这个函数只会在特定的条件下才会触发，具体可以看文档，而我们的分享刚好满足这一条件，在用户点击右上角三个点中的转发后，我们就会拿到传过来的数据了

4 分享参数赋值

onShareAppMessage: function (options) {
    let that =this;
    console.log(that.shareUrl)
    return {
      title: that.shareUrl.title,
      path: '/pages/index/index?url=' + encodeURIComponent(that.shareUrl.url),
      imageUrl: that.shareUrl.image
    }
  }
  这里把网址编码了下，用户分享的卡片进去的时候会在onload中得到webview的网址，解码后赋值给src属性就行了

因为如果只是分享当前页面的话，只需在onShareAppMessage中的options获取当前webview的url就行了，但是这里有个坑，ios并不能实时的获取到webview的url，所以此路不通（更新：后发现ios不能获取webview 的url是因为ios会忽略url#后面的字符串。所以ios实施获取url可以尝试去掉网址中的#）。