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

显示分享按钮

首先需要通过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 type="default" open-type="share" class="clear-style">分享</button>

由于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。
	};
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值