uniapp-vue3语法实现小程序全局分享（setup，mixin）

uniapp-vue3语法实现小程序全局分享（setup，mixin）

随着vue3的普及uniapp官方也支持了vue3语法的编写

相信大家在开发过程中肯定碰到过小程序所有页面都要开启分享功能的需求；指定的页面(如：文章详情页)有单独的配置，而非单独配置的页面(如：付费的订单详情页)都是统一跳转到首页

我的做法如下：

1. 创建share.js

// utils/share.js
export default {
	onLoad(){ // 创建时设置统一页面的默认值
		uni.$mpShare = {
			title: 'xxxx',
			desc: 'yyyy',
			path: '/pages/tabList/index',
			imageUrl: 'https://zzzzzzz.com/images/fx.jpg'
		}
	},
	onShareAppMessage() { //发送给朋友
		console.log(uni.$mpShare);
		return uni.$mpShare
	},
	onShareTimeline() { //分享到朋友圈
		return uni.$mpShare
	},
    onUnload(){ // 关闭页面时重置
		uni.$mpShare = {
			title: 'xxxx',
			desc: 'yyyy',
			path: '/pages/tabList/index',
			imageUrl: 'https://zzzzzzz.com/images/fx.jpg'
		}
	}
};

2. main.js引入share.js文件

// main.js
import App from './App'
import {
	createSSRApp
} from 'vue'

import share from '/utils/share' // 引入share.js

export function createApp() {
	const app = createSSRApp(App)
	app.mixin(Share) // 使用mixin全局混入
	uni.$u.config.unit = 'rpx'
	return {
		app
	}
}

此时小程序所有页的分享功能都打开并且都统一跳转到首页分享的图片也是统一的

3. 修改需要单独配置分享的页面

// pages/news/news.vue

<script setup>
import { computed, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { Get_newsDetails } from '../../config/api'; // 文章详情接口

const detail= reactive({}); // 文章详情


const shareData = computed(()=>{ // 分享的数据
	return {
		title: data.detail.title,
		desc: data.detail.title,
		path: '/pages/news/detail?id=' + data.detail.id,
		imageUrl: data.detail.cover
	}
})

async function getDetail() { // 获取新闻详情
	const res = await Get_newsDetails({
		id: data.id
	});
	
	detail.value = res.data
}

onLoad(async (options) => {
	data.id = options.id;
	await getDetail();
    uni.$mpShare = shareData.value // 修改uni.$mpShare的值
});

onShow(()=>{
    uni.$mpShare = shareData.value // 修改uni.$mpShare的值
})
</script>

在页面你想要修改的地方修改uni.$mpShare的值就可实现差异化, 上面代码在页面onLoad时会将其设置为初始的统一页面的值，并且在页面onUnload时也会被设置为初始的统一页面