uniapp小程序全局分享功能Vue3

小程序 0

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

目录

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.在程序任意处即可实现分享

也许您对下面的内容还感兴趣: