微信小程序內聯h5頁面，實現分享

在小程序內直聯h5的頁面（pages/webview/webview.js），該頁面為<web-view>的容器，使用<web-view>組件

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

需要bindmessage事件和postMessage方法

bindmessage:網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發並收到消息。e.detail = { data }

也就是說，該事件的觸發時機只有三種，是延遲的。

可以將分享的數據通過該事件獲取。

1、如何分享這個h5頁面

在pages/webview/webview.js這個容器頁面需要定義兩個事件：

//h5向小程序發送的數據
h5PostMessage: function (e) {
    this.h5Data=  e.detail.data;  //當用戶點擊這個h5頁面的分享時獲取到
},

// 用戶點擊右上角分享
onShareAppMessage: function (options) {
    return {
      title: this.h5Data.title,
      desc: this.h5Data.desc,,
      path: this.h5Data.path
    }
}

h5.js 中使用微信提供的jssdk中的方法

//該方法在頁面create完成之后就可以調用，不需要事件去觸發，提前將信息發出去，等到點擊分享的時候就可以獲取到這個信息了
wx.miniProgram.postMessage({
    data: {
                title: '分享的標題',
                desc:'分享的描述',
                path:'/pages/share/share.js?data='+JSON.stringfy({url:encodeURIComponent('當前h5頁面的url地址')}) //重點，share.js是小程序的頁面中，從分享進入的h5的落地頁
        
});

在小程序中需要兩個頁面，來做web-view 的容器，一個是內聯的h5頁面，一個是分享出去后，從分享進入的頁面

以上是分享的流程

2、怎么從分享進入時，使頁面顯示的是分享的h5頁面

在/pages/share/share.wxml中

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

在/pages/share/share.js中：

onLoad: function (options) {
        var data = options.data;//postMessage path中帶的url 參數
        var url =decodeURIComponent(data.url);
        this.setData({url:url});
        
},

// 用戶點擊右上角分享 
  onShareAppMessage: function (options) {
　　　　var path = '/pages/share/share.js';

　　　　var url = encodeURIComponent(options.webViewUrl); 
       path += '?data=' + JSON.stringify({ url: url }); 

　　　　return { path: path }; 
}