uniapp实现小程序分享功能

40 篇文章 1 订阅
文章介绍了如何在uniapp中对分享功能进行封装,以简化在每个页面重复编写分享代码的过程。通过创建一个share.js文件,设置默认分享参数,并在main.js中全局挂载,实现了动态获取当前页面栈并自定义分享内容的功能。
摘要由CSDN通过智能技术生成

一般情况下是这样来写的,不过感觉太麻烦,每个页面都要写一次

<template>
<view></view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {},
		// 分享给好友
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'title', //自定义分享标题
				path: 'path', // '/pages/...'分享页面路径(打开分享时进入页),以/开头
				imageUrl: '', //可设置默认分享图,不设置默认截取头部5:4
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			console.log(res);
			return {
				//同上
			}
		}
	}
</script>
<style></style>

所以这里我进行了封装

 封装share.js代码

export default {
	data() {
		return {
			//设置默认的分享参数
			//如果页面不设置share,就触发这个默认的分享
			share: {
				title: '',//自定义标题
				path: `/pages/index/index`,  //默认跳转首页
				imageUrl: '',  //可设置默认分享图,不设置默认截取头部5:4
			}
		}
	},
    onShareAppMessage(res) { //发送给朋友
		let that = this
		// 动态获取当前页面栈
		let pages = getCurrentPages(); //获取所有页面栈实例列表
		console.log(pages,'所有页面')
		let nowPage = pages[pages.length - 1]; //当前页页面实例
		// let prevPage = pages[pages.length - 2]; //上一页页面实例
		that.share.path = `/${nowPage.route}`
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log('success(res)==', res);
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				console.log('fail(res)==', res);
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	onShareTimeline(res) { //分享到朋友圈
	let that = this
		// 动态获取当前页面栈
		let pages = getCurrentPages(); //获取所有页面栈实例列表
		let nowPage = pages[pages.length - 1]; //当前页页面实例
		// let prevPage = pages[pages.length - 2]; //上一页页面实例
		that.share.path = `/${nowPage.route}`
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log('success(res)==', res);
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				console.log('fail(res)==', res);
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
}

挂载到main.js

// 全局分享
// 小程序分享的封装
import share from "./utils/share.js"
Vue.mixin(share)

这样就实现了效果图如下!!!

uniapp编译判断

https://blog.csdn.net/weixin_41891519/article/details/104365609

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱池鱼的酱酱仔

您的鼓励是我前进的动力哦~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值