微信小程序内联h5页面，实现分享

时间：2022-03-21 16:22:19

在小程序内直联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 }; 
}

相关文章