uniapp小程序全局分享功能Vue3-Toy模板网

这篇具有很好参考价值的文章主要介绍了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)