uniapp使用mixin分享到朋友圈

项目场景：

提示：这里简述项目相关背景：

---

描述

提示：这里描述项目中遇到的问题：

在uniapp的项目中，需要每个页面都可以分享到朋朋友圈，那么一个页面一个页面写太麻烦了，可以使用mixin挂全局

Vue3中分享 功能说明
ShareConfig 接口定义了分享配置的类型，包含：

• title: 分享标题
• path: 分享路径( 确保图片资源已放入 static 目录下，并且路径正确 )
• friendImageUrl: 分享给好友时的图片--建议图片格式 jpg、 5:4 尺寸图片 (500x400)  大小128KB以内
• timelineImageUrl: 分享到朋友圈时的图片--建议图片格式 jpg、1:1 尺寸图片 (400x400)!!!!!  大小128KB以内
• useShare 函数接收一个可选的配置对象，并返回两个分享方法：
• onShareAppMessage: 分享给好友的处理函数
• onShareTimeline: 分享到朋友圈的处理函数

重要提示

定义配置后(路径、图片、名称等), 如果发现分享后的自定义配置没有生效

 那就需要引入 @dcloudio/uni-app

import {  onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";

---

解决方案：

提示：这里填写该问题的具体解决方案：

1：vue2

1：share.js

export default {
    data() {
        return {}
    },
    //1.配置发送给朋友
    onShareAppMessage() {
        return {
            title: '彩云驿出行', //分享的标题
            path: '/pages/index/index', //点击分享链接之后进入的页面路径
            imageUrl: '/static/logo.png', //分享发送的链接图片地址
            success() {
                // 分享完成，请注意此时不一定是成功分享
                uni.showToast({
                    title: "分享成功",
                    duration: 3500,
                    icon: "success"
                });
            },
            fail() {
                // 分享失败
                uni.showToast({
                    title: "分享失败",
                    duration: 3500,
                    icon: "error"
                });
            }
        };
    },
    //2.配置分享到朋友圈
    onShareTimeline() {
        return {
            title: '彩云驿出行', //分享的标题
            query: '/pages/index/index', //点击分享链接之后进入的页面路径
            imageUrl: '/static/logo.png' ,//分享发送的链接图片地址
            success() {
                // 分享完成，请注意此时不一定是成功分享
                uni.showToast({
                    title: "分享成功",
                    duration: 3500,
                    icon: "success"
                });
            },
            fail() {
                // 分享失败
                uni.showToast({
                    title: "分享失败",
                    duration: 3500,
                    icon: "error"
                });
            }
        }
    }
}

2：引入

import share from '@/utils/share'     //我把share.js创建在static目前下的
 
//如果是Vue2
Vue.mixin(share);
 
//如果Vue3
//app.mixin(share);

1：vue3

1：share.ts

@/utils/share.ts

interface ShareConfig {
  title?: string;
  path?: string;
  friendImageUrl?: string;
  timelineImageUrl?: string;
}
 
export function useShare(config: ShareConfig = {}) {
  const defaultConfig = {
    title: '彩云驿出行',
    path: '/pages/index/index',
    friendImageUrl: '/static/shareFriend.jpg',    // 5:4 尺寸图片 (500x400)
    timelineImageUrl: '/static/shareTimeline.jpg'  // 1:1 尺寸图片 (400x400)
  }
 
  // 合并默认配置和自定义配置
  const finalConfig = { ...defaultConfig, ...config }
 
  return {
    onShareAppMessage() {
      return {
        title: finalConfig.title,
        path: finalConfig.path,
        imageUrl: finalConfig.friendImageUrl
      }
    },
    
    onShareTimeline() {
      return {
        title: defaultConfig.title,
        imageUrl: finalConfig.timelineImageUrl
      }
    }
  }
}

2：globalShare.ts

@/utils/globalShare.ts

import { useShare } from "@/composables/useShare";
 
// 全局混入分享功能
export function setupGlobalShare(app: any) {
  // #ifdef MP-WEIXIN
 
  // 全局分享配置
  const shareConfig = useShare();
 
  app.mixin({
    onShareAppMessage: shareConfig.onShareAppMessage,
    onShareTimeline: shareConfig.onShareTimeline,
  });
}

3：main.ts 引入

import { createSSRApp } from 'vue';
import "@/static/fonts/stylesheet.css";
import App from './App.vue';
import { setupGlobalShare } from '@/utils/globalShare'
 
export function createApp() {
  const app = createSSRApp(App);
  setupGlobalShare(app) // 全局分享配置
  
  
  return {
    app,
  };
}