uniapp小程序全局分享功能Vue3

问题:在小程序的任何界面都能通过点击右上角三个点进行分享好友/朋友圈功能

目录

1.创建shareMixin文件夹,创建shareMixin.ts文件

2.在main.ts进行挂载

3.在程序任意处即可实现分享


1.创建shareMixin文件夹,创建shareMixin.ts文件

export default {
	data() {
		return {
			share: {
				title: '程序名称',
				path: '/pages/xxx',
				imageUrl: '分享显示的图片链接',
				desc: '简介'
			}
		}
	},
	// 分享到微信好友功能
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			desc: this.share.desc,
			imageUrl: this.share.imageUrl,
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	// 分享到朋友圈功能
	onShareTimeline(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			desc: this.share.desc,
			imageUrl: this.share.imageUrl,
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
}

2.在main.ts进行挂载

import shareMixin from './shareMixin/shareMixin.js'
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.mixin(shareMixin)
  return {
    app
  }
}

只需要导入跟挂载即可,重点app.mixin(sharreMixin),这是vue3的写法,vue2的话是Vue.mixin(shareMixin)

3.在程序任意处即可实现分享