支持的jssdk的api比较少,并不包括分享api,分享api对公众号是开放的,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/9904d8d718144721f6142a8f01f9e5b5.png)
结论:
在h5页面中点击按钮来分享是不能实现的
分享到朋友圈目前只在andriod上支持:
![](https://i-blog.csdnimg.cn/blog_migrate/4736b9aa08395d04be4d1d1735b09124.png)
解决办法:
![](https://i-blog.csdnimg.cn/blog_migrate/8d83527065edbee09a5c5e32c18886ce.png)
2、小程序右上角按钮分享
![](https://i-blog.csdnimg.cn/blog_migrate/e7e5fe28d1d8e22bf09662258a08954e.png)
实现代码:
1、h5页面代码:(index.js是小程序的页面中,从分享进入的h5的落地页,对应小程序的share目录)
//该方法在页面create完成之后就可以调用,不需要事件去触发,提前将信息发出去,等到点击分享的时候就可以获取到这个信息了 wx.miniProgram.postMessage({ data: { title: '分享的标题' , desc: '分享的描述' , path: '/pages/share/index.js?data=' + JSON.stringify({ url: encodeURIComponent ( 'http://localhost/page' ) }) } }); |
2、小程序页面代码(小程序需要两个页面来加载web-view:一个是加载显示h5页面-→web目录,一个是点击分享链接打开小程序后显示链接对应的h5的页面 ---->share目录):
web目录:
.wxml文件
< web-view wx:if = "{{url}}" src = "{{url}}" bindmessage = "h5PostMessage" > |
.js文件
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, success: function (res) { // 转发成功之后的回调 if (res.errMsg == 'shareAppMessage:ok' ) { } }, fail: function () { // 转发失败之后的回调 if (res.errMsg == 'shareAppMessage:fail cancel' ) { // 用户取消转发 } else if (res.errMsg == 'shareAppMessage:fail' ) { // 转发失败,其中 detail message 为详细失败信息 } }, complete: function () { // 转发结束之后的回调(转发成不成功都会执行) } } } |
share目录:
.wxml文件
< web-view wx:if = "{{url}}" src = "{{url}}" > |
.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 }; } |