uniapp 微信小程序分享、分享朋友圈功能

页内自定义分享按钮
当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。
如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。

官方文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

方式1:小程序右上角原生菜单自带的分享按钮

在这里插入图片描述
方式2:在页面中放置的分享按钮
在这里插入图片描述
实现如下:
创建一个share.js文件

export default {
	data() {
		return {

		}
	},
	onLoad: function() {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
	},
	onShareAppMessage(res) {
		let that = this;
		let imageUrl = that.shareUrl || '';
		if (res.from === 'button') {
		//这块需要传参,不然链接地址进去获取不到数据
			let path = `/` + that.$scope.route + `?item=` + that.$scope.options.item;
			return {
				title: '商品分享~',
				path: path,
				imageUrl: imageUrl
			};
		}
		if (res.from === 'menu') {
			return {
				title: '商通线上商城',
				path: '/pages/tabBarPro/index/index',
				imageUrl: imageUrl
			};
		}
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '商通线上商城',
			path: '/pages/index/index',
			imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
		};
	},
	methods: {

	}
}

在main.js中引入
在这里插入图片描述
页面内直接这样写就好啦

	<button class="shareBtn" type="default" data-name="shareBtn" open-type="share"> 
				<u-icon name="zhuanfa"></u-icon>分享
				<button>

效果如下:
在这里插入图片描述
注意:
注意:分享朋友圈和微信好友函数和 onLoad 等生命周期函数同级
在这里插入图片描述

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值