小程序内嵌H5页面分享

项目需求

H5构建的列表页和详情页通过web-view插入小程序；
客户希望可以通过小程序的分享给朋友功能将详情页分享给微信好友

难点：小程序和内嵌H5之间的通信

---

解决方案：

H5端：

引入jweixin.js
（注意：至少1.3.2版本：引入的位置要靠前，不然会出现调用的相关函数的时候js还没有解析完成）
Js中加入以下代码：
这里我是将详情页的地址传递到小程序端

var send =function(){
			wx.miniProgram.postMessage({ data:{foo:'传递的数据'}})
		  }
send()

postMessage()用于向小程序端传递信息，这里我是将详情页的地址传递到小程序端

小程序端：（基于原生构建）

HTML

<view class="page-body">
  <view class="page-section page-section-gap">
    <web-view id="myWebView" src="{{url}}" bindmessage='getUrl'></web-view>
  </view>
</view>

bindMessage是web-view的自带属性，网页向小程序 postMessage 时，会在以下特定时机触发bindMessage并收到消息：小程序后退、组件销毁、分享、复制链接；

getUrl:function(data){
    this.data.redirectUrl=data.detail.data[0].foo
  },

到这一步，小程序已经拿到从H5 页面传来的信息；
接下来，我们需要让小程序在分享的时候把信息带上
有些小程序点上面的三个点是没有分享的，这个需要我们自己配置一下

分享触发的函数有两个，根据自己的需要写

onShareAppMessage () {
    return {
      title: this.data.Title,
      path: 'pages/index/index?params='+this.data.redirectUrl
    }
  },

因为H5的页面不是小程序中的，程序没法找到对应页面，所以H5 的网址只能是以参数的形式被分享

在小程序页面加载的时候拿到参数并赋值给web-view绑定的url

onLoad:function(options){
      if(options.params!=undefined){
        this.setData({
          url:options.params
        })
      }
  },

这样，用户就可以通过小程序的分享功能将详情页分享给微信好友了