混入（mixin）

Vue3 和 Vue2 的混入有较大的差别，下列以微信小程序通用分享为例做个示范；

mixin.ts

import type { App } from "vue";

// 分享配置
const config = {
    title: "默认分享标题",
    imageUrl: "", // 可空, 默认分享图片
};

/**
 * 对象到查询参数
 */
function objectToQuery(params: AnyObject) {
    return Object.keys(params)
        .map((key) => key + "=" + params[key])
        .join("&");
};

/**
 * 小程序分享混入
 */
const mixin = {
    // 分享给朋友
    onShareAppMessage() {
        // 获取当前页面路径与参数
        // @ts-ignore
        const route = ["/", this.$scope.route].join("");
        // @ts-ignore
        const options = this.$scope.options;
        const query = objectToQuery(options);
        const path = route + "?" + query;

        const shareData = { ...config, ...{ path } };
        return shareData;
    },

    // 分享到朋友圈
    onShareTimeline() {
        // 获取当前页面参数
        // @ts-ignore
        const options = this.$scope.options;
        const query = objectToQuery(options);
        const shareData = { ...config, ...{ query, imageUrl: "" } }; // 默认 imageUrl 为空（使用小程序 logo）

        return shareData;
    }
};

export default mixin

main.ts

import { createSSRApp } from "vue";
import App from "./App.vue";
import mixin from "./mixin.ts";

export function createApp() {
    const app = createSSRApp(App);
    app.mixin(mixin);
    return { app };
}

Tip

如何自定义某个页面的分享参数?

答：在 onLoad 事件里自己使用 onShareAppMessage 进行配置；

onLoad(() => {
    onShareAppMessage(() => {
        return { ... };
    });
});