WebView内嵌H5实现小程序分享

小小的问题网上说的乱七八糟，解决后自己记录一下，简单明了。不懂可以留言。

    <web-view :src=url bindmessage="h5PostMessage"> </web-view>

bindmessage 属性是在用户进行分享时主动触发

js:

export default {
		data() {
			return {  
				url:'你的内嵌H5链接'
			}; 
		},
		onLoad:	function(e){ 
			if(e.url != "")
			{ 
				this.url=e.url;
			}  
		}
		    ,
		methods:{
 			//h5向小程序发送的数据
			h5PostMessage: function (e) {
			    this.h5Data=  e.detail.data;  //当用户点击这个h5页面的分享时获取到 
			}, 
			onShareAppMessage(options) {
			    console.log(options);
			    const { webViewUrl } = options;
			     
			    let search = '',
			      url = webViewUrl; 
				 console.log(url);
			    const shareObj = {
			      title: "分享的标题",        // 默认是小程序的名称(可以写slogan等)
			      path: '/pages/index/index?url='+url,        // 默认是当前页面，必须是以‘/’开头的完整路径，通过拼接的方式，把需要分享的web-view的url以及参数拼接进去，然后在该`web-view`的页面中去做参数判断，一旦传入了对应的url和参数，就进入对应的url并携带对应的参数
			      // imageUrl: '',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			      success: function (res) {
			        // 转发成功之后的回调
			        if (res.errMsg == 'shareAppMessage:ok') {
			        }
			      },
			      fail: function () {
			        // 转发失败之后的回调
			        if (res.errMsg == 'shareAppMessage:fail cancel') {
			          // 用户取消转发
			        } else if (res.errMsg == 'shareAppMessage:fail') {
			          // 转发失败，其中 detail message 为详细失败信息
			        }
			      },
			      complete: function () {
			        // 转发结束之后的回调（转发成不成功都会执行）
			      }
			    }
			    // 来自页面内的按钮的转发
			    if (options.from == 'button') {
			      var data= options.target.dataset;
			      console.log(data.name);     // shareBtn
			      // 此处可以修改 shareObj 中的内容
			      // shareObj.path = '/pages/index' + data.name;
			    }
			    // 返回shareObj
			    return shareObj;
			  }
 
			 
		} }