关于uniapp分享功能实现

创建一个混入

javascript 复制代码
export default {
	data() {
		return {
			//设置默认的分享参数
			//如果页面不设置share,就触发这个默认的分享
			share: {
				title: '商会宝',//自定义标题
				path: `/pages/home/home?appId=${uni.getStorageSync("appid")}`,  //默认跳转首页
				imageUrl: '',  //可设置默认分享图,不设置默认截取头部5:4
			}
		}
	},
    onShareAppMessage(res) { //发送给朋友
		// let that = this;
		console.log(this.share)
		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文件里面进入引入挂载

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

然后在每个页面使用this.share就可以获取混入的data,进行修改即可

相关推荐
掘金安东尼15 分钟前
仅仅是发送一封邮件?暴露安全边界!
javascript·vue.js·面试
bo5210027 分钟前
突破性能瓶颈:基于虚拟滚动的大数据需求文档方案——告别卡顿与分页,实现Word级流畅体验
javascript·vue.js
小张快跑。34 分钟前
【Vue3】(三)vue3中的pinia状态管理、组件通信
前端·javascript·vue.js
一颗奇趣蛋42 分钟前
vue性能优化(响应数据&静态数据)
vue.js·性能优化
Hilaku1 小时前
用好了 defineProps 才叫会用 Vue3,90% 的写法都错了
前端·javascript·vue.js
Dignity_呱1 小时前
vue3对组件通信做了哪些升级?
前端·vue.js·面试
独立开阀者_FwtCoder2 小时前
最全301/302重定向指南:从SEO到实战,一篇就够了
前端·javascript·vue.js
说私域3 小时前
基于定制开发开源AI智能名片S2B2C商城小程序的首屏组件优化策略研究
人工智能·小程序·开源·零售
TE-茶叶蛋13 小时前
Vue Fragment vs React Fragment
javascript·vue.js·react.js
Angindem13 小时前
从零搭建uniapp项目
前端·vue.js·uni-app