实现微信小程序分享朋友圈及好友

您所在的位置：网站首页 › pages怎么发送给微信好友 › 实现微信小程序分享朋友圈及好友

实现微信小程序分享朋友圈及好友

2024-06-01 05:33| 来源: 网络整理| 查看: 265

显示分享按钮

首先需要通过wx.showShareMenu实现在当前页面显示分享按钮。如不实现该代码，分享按钮为灰色不可用状态。showShareMenu微信小程序API文档链接

注意事项显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮

onLoad() { // "shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮 wx.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'],// 需要显示的转发按钮名称列表.合法值包含 "shareAppMessage"、"shareTimeline" success(res) { console.log(res); }, fail(e) { console.log(e); } }); }, 实现好友分享

添加Page.onShareAppMessage事件(与onLoad同级)，来监听用户点击转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。onShareAppMessage微信小程序API文档链接

注意事项只有定义了onShareAppMessage事件处理函数，右上角菜单才会显示“转发”按钮

onShareAppMessage() { return { title: '邀请您使用XXX小程序', // 分享出的卡片标题 path: 'pages/index/index', // 他人通过卡片进入小程序的路径，可以在后面拼接URL的形式带参数 imageUrl: '/static/mainImg/logosareas.jpg', // 分享出去的图片，默认为当前页面的截图。图片路径可以是本地文件路径或者网络图片路径。支持PNG及JPG。 }; },

分享按钮注意事项触发分享的容器需要经过button标签的包裹，并设置 open-type=“share”

由于button带有自定义样式，往往与需要实现的样式有冲突，此时需要清理原有的样式

.clear-style { border: none; border-radius: 0; background-color: transparent !important; padding: 0rpx !important; margin: 0rpx !important; text-align: left; height: 140rpx; } .clear-style::after { border: none; } 实现朋友圈分享

添加Page.onShareTimeline事件(与onLoad同级)，来监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。onShareTimeline微信小程序API文档链接。注意事项从基础库 2.11.3 开始Android平台支持朋友圈分享

onShareTimeline() { return { title: '邀请您使用XXX小程序', // 分享出的卡片标题 path: 'pages/index/index', // 他人通过卡片进入小程序的路径，可以在后面拼接URL的形式带参数 imageUrl: '/static/mainImg/logosareas.jpg', // 分享出去的图片，默认为当前页面的截图。图片路径可以是本地文件路径或者网络图片路径。支持PNG及JPG。 }; },

【本文地址】

实现微信小程序分享朋友圈及好友

实现微信小程序分享朋友圈及好友

今日新闻

推荐新闻