Vue3 项目设置微信H5、微信小程序全局分享。
该方法为使用 mixins 解决全局分享。
虽然在Vue3中新增了组合式API，理应使用组合式API解决问题，但是的确没有想到更好的解决方法。
第一步：新建设置全局分享的 mixin 文件；share/mixin.ts
import { last, map, join } from 'lodash';
export default {
// #ifdef MP
// 设置该页面的分享信息 share
onShareAppMessage() {
let view = last(getCurrentPages());
let mp = view?.$vm.shareData.mp;
return {
title: mp.title,
path: mp.path,
imageUrl: mp.imgUrl,
};
},
// 监听用户点击右上角转发到朋友圈
onShareTimeline() {
let view = last(getCurrentPages());
let mp = view?.$vm.shareData.mp;
return {
title: mp.title,
query: join(map(mp.query, (value, key) => {
return `${key}=${value}`;
}), '&'),
imageUrl: mp.imgUrl,
};
},
// #endif
onLoad() {
this.shareData = {
h5: {
// 分享标题
title: '',
// 分享描述
des: '',
// 分享图标
imgUrl: '',
// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: '',
},
mp: {
// 转发标题 默认值(当前小程序名称)
title: '',
// 转发路径 必须是以 / 开头的完整路径
path: '',
// 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
imgUrl: '',
// 自定义页面路径中携带的参数
query: {},
},
};
},
onShow() {
// #ifdef H5
let view = last(getCurrentPages());
let shareData = view?.$vm.shareData;
if (shareData) {
wx.onMenuShareTimeline(shareData.h5)
wx.onMenuShareAppMessage(shareData.h5);
wx.updateAppMessageShareData(shareData.h5);
wx.updateTimelineShareData(shareData.h5);
}
// #endif
},
};
第二步，在 main.ts 文件中使用分享mixin.ts
// 项目文件路径
import shareMixin from '@/common/mixin/share/mixin';
export function createApp() {
const app = createSSRApp(App);
app.mixin(shareMixin);
return {
app,
};
}
第三步，新建用于更新页面分享的函数。/share/index.ts
import { each, assign, last, } from 'lodash';
import { nextTick } from 'vue';
interface shareDataType {
h5?: {
// 分享标题
title?: string,
// 分享描述
des?: string,
// 分享图标
imgUrl?: string,
// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link?: string,
},
mp?: {
// 转发标题 默认值(当前小程序名称)
title?: string,
// 转发路径 必须是以 / 开头的完整路径
path?: string,
// 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
imgUrl?: string,
// 自定义页面路径中携带的参数
query?: object,
},
}
export const defineShare = async function (options: shareDataType) {
// 用于规避 setup 直接调用的情况
await nextTick();
let view = last(getCurrentPages());
let shareData = view?.$vm.shareData;
each(options, (value, key) => {
assign(shareData[key], value);
})
// #ifdef H5
wx.onMenuShareTimeline(shareData.h5)
wx.onMenuShareAppMessage(shareData.h5);
wx.updateAppMessageShareData(shareData.h5);
wx.updateTimelineShareData(shareData.h5);
// #endif
}
第四步，使用更新分享的函数
import { defineShare } from '@/common/mixin/share/index';
defineShare({
mp: {
title: 'title'
}
});
