版本:vue3版本 setup语法糖
今天想给微信小程序做单页面分享功能,发现功能不生效,经检查发现全局mixin与setup语法糖存在冲突,全局配置会覆盖单独页面配置。
直接贴解决方案:
全局设置 main.js
app.mixin({
onShareAppMessage() {
return this.$pageShare?.() || {
title: '欢迎使用小程序',
path: '/pages/index/index', // 默认首页路径
imageUrl: '/static/default-share.png'
};
},
onShareTimeline() {
return {
title: '欢迎使用小程序',
query: '',
imageUrl: '/static/default-share.png'
};
}
})
封装工具
import { getCurrentInstance } from "vue";
export function useShare() {
const initShare = (config) => {
const instance = getCurrentInstance();
if (!instance) return;
instance.proxy.$pageShare = () => {
return config;
};
};
return {
initShare,
};
}
需要特殊处理分享的页面
import { useShare } from "@/composables/share/useShare";
const { initShare } = useShare();
initShare({
title: "小程序分享",
path: `/pages/share/shareRegist/index`,
});
原因
- onShareAppMessage
- 不属于Vue组件声明周期
- setup不能对此进行覆盖
- app.mixin()优先级更改