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

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

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

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

我的做法如下：

1. 创建share.js

// utils/share.jsexport 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.jsimport App from './App'import {createSSRApp} from 'vue'import share from '/utils/share' // 引入share.jsexport function createApp() {const app = createSSRApp(App)app.mixin(Share) // 使用mixin全局混入uni.$u.config.unit = 'rpx'return {app}}

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

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

// pages/news/news.vueimport { 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的值})

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