小程序中分享功能需要在button组件中添加open-type:“share”,当点击button的时候就会调用onShareAppMessage函数。

1、自定义按钮实现分享,在页面中使用按钮来实现分享功能

	//必须是按钮中添加 open-type="share"  
	<button open-type="share" class="pic_r3">
		<text class="tit">人员自助入场</text>
	</button>

2、js文件中分享的方法

	//分享---this.shareId就是要传的参数
	onShareAppMessage(e) {
		let shareobj = {
			title: '人员自助入场', //分享的标题
			path: '/pages/admission/admission?shareId=' + this.shareId, //好友点击分享之后跳转的页面
			//path: '/pages/admission/admission?shareId=' + encodeURIComponent(JSON.stringify(this.shareId)), //如果传的参数是对像或者数组
			encodeURIComponent(JSON.stringify(item))
			//imageUrl: "https://****.com/banner.jpg", //分享的图片  支持PNG及JPG。显示图片长宽比是 5:4。
			imageUrl: this.shareImg, //内容图片
		}
		return shareobj //一定要返回对象
	},

ps:分享的中用的imageUrl是静态地址,如上面,方法如下

<script>
	export default {
		data() {
		return {
			shareImg: require("@/static/img/pic-ry9.jpg"),
			}
		}
	}
</script>

3、获取分享的参数

进入分享页面, 通过onLoad(e)中的e来查看传递过来的参数:

	onLoad(e) {
		this.shareId = e.shareId   //这就是我们从分享按钮传过来的参数
	},

4、小程序的原生菜单中隐藏分享按钮

在js文件中onLoad方法中加入下面代码,就可关闭左上角三个点中的分享按钮

	uni.hideShareMenu()

5、小程序 分享卡片 禁止个人及群聊二次转发

在onShareAppMessage方法中 加uni.showShareMenu和 wx.updateShareMenu这两个方法

	//分享---this.shareId就是要传的参数
	onShareAppMessage(e) {
		//禁止二次转发--
		uni.showShareMenu({
			withShareTicket: true
		});
		wx.updateShareMenu({
			isPrivateMessage: true,
			withShareTicket: true,
			success(res) {
				console.log('updateShareMenu: ', res);
			},
			fail() {}
		}); //禁止二次转发--end
		let shareobj = {
			title: '人员自助入场', //分享的标题
			path: '/pages/admission/admission?shareId=' + this.shareId, //好友点击分享之后跳转的页面
			//imageUrl: "https://****.com/banner.jpg", //分享的图片  支持PNG及JPG。显示图片长宽比是 5:4。
			imageUrl: this.shareImg, //内容图片
		}
		return shareobj //一定要返回对象
	},

6、uniapp全局分享onShareAppMessage方法(新增)

编写全局通用分享方法,实现根据不同页面返回不同的转发信息

//通用分享JS
export default {
	data() {
		return {
			//设置默认的分享参数
			share: {
				title: '某某平台',
				imageUrl: '',
				desc: '提高安全技能',
				content: ''
			}
		}
	},
	onShareAppMessage(res) {
		//实现根据不同页面返回不同的转发信息
		let pages = getCurrentPages();
		let routerUrl = pages[0].route //获取当前页的路径
		return {
			title: this.share.title,
			path: '/' + routerUrl, // 路径前面必须要加'/'
			imageUrl: this.share.imageUrl,
			desc: this.share.desc,
			content: this.share.content,
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	onShareTimeline() {},
}

在main.js中调用

//分享---在main.js中调用
import share from './utils/share.js'
Vue.mixin(share)

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐