H5 与微信小程序交互控制分享内容

第一步

在微信小程序web-view 组件中添加监听

<web-view wx:if="{{h5url}}" src="{{h5url}}" bindmessage="h5PostMessage" ></web-view>
           

其中  bindmessage="h5PostMessage"  意思是当收到来自h5端推送过来的消息的时候，将由小程序函数h5PostMessage 方法进行后续处理

第二步

在小程序中，添加h5PostMessage方法，用于获取h5端收到的信息。

Page({
    data: {},
	shareData : {
		title : '',
		picUrl: '',
		path  : '',
		retUrl: ''
	},
    onLoad: function(e) {
        
    },
    onShow: function() {
        
    },
	
    //h5向小程序发送的数据
	h5PostMessage:function(e)
	{
		var res = e.detail.data;//传送的数据由这个变量接受
		var data = res[res.length - 1];
		var page_path = "";					//进入当前含有web-view 组件的page路径  如 /pages/web/web
		this.shareData.title  = data.title,
		this.shareData.picUrl = data.picUrl,
		this.shareData.retUrl = data.retUrl,
		this.shareData.path   = page_path + "?url=" + encodeURIComponent(data.picUrl),//好友点击进入的页面链接，默认为当前h5链接
		
	},
	
	//微信小程序分享监听
	onShareAppMessage:function()
	{
		//转发时携带 shareTicket才能在回调中获取到shareTickets
		wx.showShareMenu({
			withShareTicket: true
		});
	
		return {
		  title: this.shareData.title,
		  desc :  this.shareData.desc,
		  path :  this.shareData.path,
		  success : function(){
			 console.log('用户分享成功');
		  },
		  fail    : function(){
			console.log('share app fail');
		  }
		};
	},
});
           

更新上去，测试调试