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);}
});