uniapp npm安装形式 全局分享和按钮分享设置

全局分享方法

新建一个shareUtil.ts方法

import { storageConfig } from '@/config/storageConfig';
export default {
  data() {
    return {
      miniShareOptions: {
        title: '标题',
        path: '/pages/tabbar/index?inviteCode=',
        summary: '描述',
        imageUrl: '/userPages/static/img/invitation_h_bg.png',
      },
      shareCover: '/userPages/static/img/invitation_h_bg.png',
    };
  },
  // 发送给朋友
  onShareAppMessage() {
    const userInfoStr = uni.getStorageSync(storageConfig.userStoreKey);
    const userInfo = JSON.parse(userInfoStr);
    console.log(userInfo, 'userInfo');
    const inviteCode = userInfo?.userInfo?.inviteCode || '';
    console.log(inviteCode, 'inviteCode');
    return {
      ...this.miniShareOptions,
      path: `/pages/tabbar/index?inviteCode=${inviteCode}`,
      query: `inviteCodeQQ=${inviteCode}`,
      imageUrl: this.shareCover,
    };
  },
  onShareTimeline() {
    const userInfoStr = uni.getStorageSync(storageConfig.userStoreKey);
    const userInfo = JSON.parse(userInfoStr);
    console.log(userInfo, 'userInfo');
    const inviteCode = userInfo?.userInfo?.inviteCode || '';
    console.log(inviteCode, 'inviteCode');
    return {
      title: '标题',
      path: `/pages/tabbar/index?inviteCode=${inviteCode}`,
      query: `inviteCodeQQ=${inviteCode}`,
      imageUrl: '/userPages/static/img/invitation_h_bg.png',
    };
  },
};

全局配置

import { createSSRApp } from 'vue';
import App from './App.vue';
import './style/pulic.css';
import pinia from './store';
import uviewPlus from 'uview-plus';
import { initRequest } from '@/utlis/http';
import { logEnvInfo } from '@/utlis/envUtils';
import shareUtil from '@/utlis/shareUtil';
export function createApp() {
  const app = createSSRApp(App);

  // 打印环境信息（仅在开发环境）
  logEnvInfo();

  app.use(pinia);
  app.use(uviewPlus);

  initRequest();

  app.mixin(shareUtil);

  return {
    app,
  };
}

页面按钮分享配置

在onLoad中设置onShareAppMessage，不然无法覆盖全局分享设置

import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
onLoad((options) => {
  console.log('页面加载参数:', options);
  if (options.taskId) {
    getFaceSwappingDetail(options.taskId);
  }
  onShareAppMessage((e) => {
    const imageUrl = templateInfo.value.imageWorks[0].fileUrl;
    const title = templateInfo.value.template.name;
    const shareobj = {
      title: title, //分享的标题
      path: `/pages/tabbar/index?inviteCode=${userStore.userInfo.inviteCode}`,
      imageUrl: imageUrl,
    };
    console.log(shareobj, '分享shareobj');
    return shareobj;
  });
});

获取分享参数

如果需要获取参数在app.vue中 onShow中获取options

如下

onShow((options) => {
  console.log(options, 'app   onShow');
  if (options?.query?.inviteCode) {
    userStore.setReInviteCode(options.query.inviteCode);
  }
});