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

Posted abc1234_abc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序内联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中的方法

wx.miniProgram.postMessage({
    data: {
                title: 分享的标题,
                desc:分享的描述,
                path:/pages/share/share.js?data=+JSON.stringfy({url:encodeURIComponent(当前h5页面的url地址)}) //重点,share.js是小程序文件中从分享进入的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 }; 
}

 






以上是关于微信小程序内联h5页面,实现分享的主要内容,如果未能解决你的问题,请参考以下文章

h5分享微信小程序到朋友圈

微信小程序webview内页面分享

微信小程序嵌套h5页面,h5页面返回小程序,小程序和h5的页面和交互方法,h5点击分享小程序页面

微信H5页面里面可以做一个按钮直接分享到朋友圈吗

微信h5网页如何实现跳转到手机默认浏览器

微信小程序web-view嵌入H5页面, H5页面向小程序页面传值