uni-app转微信小程序onShareAppMessage被全局覆盖

5 阅读1分钟

版本:vue3版本 setup语法糖

今天想给微信小程序做单页面分享功能,发现功能不生效,经检查发现全局mixinsetup语法糖存在冲突,全局配置会覆盖单独页面配置。

直接贴解决方案:

全局设置 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()优先级更改