Vue3 项目设置微信H5、微信小程序全局分享

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