微信小程序内联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页面,实现分享的主要内容,如果未能解决你的问题,请参考以下文章