秋刀鱼在做梦

这个屌丝很懒，什么也没留下！

热门标签

小程序分享功能_h5网站封装的小程序添加分享功能

作者：秋刀鱼在做梦 | 2024-06-24 18:12:41

踩

h5网站封装的小程序添加分享功能

小程序web-view支持的jssdk能力

支持的jssdk的api比较少，并不包括分享api，分享api对公众号是开放的，如下：

结论：

在h5页面中点击按钮来分享是不能实现的

分享到朋友圈目前只在andriod上支持：

解决办法：

1、跳转小程序原声页面，使用小程序原声button按钮实现分享

2、小程序右上角按钮分享

实现代码：

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 };

}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/753558