vue2/vue3-h5微信分享卡片,使用微信JS-SDK，可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，在H5网页中改变在微信

借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，在H5网页中改变在微信

看效果

JSSDK使用步骤

步骤一：绑定域名

1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，不需要填写协议http或者https。

2.在“开发者中心”查看对应的接口权限，确保公众号能使用微信分享、扫一扫等功能。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问： res2.wx.qq.com/open/js/jweixin-1.6.0.js（支持https）

引入成功之后会在window上挂载wx对象，从而使用wx中的方法进行校验和后续的操作。

步骤三：权限验证

当网页需要以卡片形式分享时，在页面加载时先注入配置信息，进行校验，否则将无法成功调用后续的分享等功能。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['updateAppMessageShareData','updateTimelineShareData',...] // 必填，需要使用的JS接口列表,可参考开发文档中的列表
});

步骤四：注册事件

当wx.config注册成功后,会返回errMsg: "config:ok" 信息,以及有权限调用的jsApiList列表;

如果返回的jsApiList为空,请核对公众号是否有对应事件的权限

{
  errMsg: "config:ok",
  jsApiList: ['updateAppMessageShareData','updateTimelineShareData',....]
}

配置成功后,开始注册事件

const setting = {
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: () => {
          if (success && typeof success === 'function') success();
    },
    cancel: () => {
         if (cancel && typeof cancel === 'function') cancel();
    },
};

window.wx.ready(() => {
 // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    window.wx.updateAppMessageShareData(setting);
    window.wx.updateTimelineShareData(setting);
});

完整代码示例

/**
 * 微信分享组件
 */
import { get } from './request';

export default class WXShare {
    constructor(config) {
        this.config = {
            // 标题
            title: '',
            // 描述
            desc: '',
            // 注册链接
            link: '',
            // 分享链接
            sharkLink: '',
            // 图片
            imgUrl: '',
            ...config,
        };

        this.init();
    }

    // 注册微信配置
    setConfig(configData) {
        window.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数。
            appId: configData.appId, // 必填，公众号的唯一标识
            timestamp: configData.timestamp, // 必填，生成签名的时间戳
            nonceStr: configData.nonceStr, // 必填，生成签名的随机串
            signature: configData.signature, // 必填，签名，见附录1
            jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone',
            ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        window.wx.error((err) => {
            window.console.log('err', err);
        });

        const { title, desc, sharkLink, imgUrl, success = null, cancel = null } = this.config;
        const setting = {
            title,
            desc,
            link: sharkLink,
            imgUrl,
            success: () => {
                if (success && typeof success === 'function') success();
            },
            cancel: () => {
                if (cancel && typeof cancel === 'function') cancel();
            },
        };
        window.wx.ready(() => {
            window.wx.updateAppMessageShareData(setting);
            window.wx.updateTimelineShareData(setting);
            window.wx.onMenuShareQQ(setting);
            window.wx.onMenuShareWeibo(setting);
            window.wx.onMenuShareQZone(setting);
        });
    }

    // 获取微信配置
    init() {
        get(`/*******?url=${this.config.link}`)
            .then((res) => {
                const { code, data } = res || {};
                if (code === 0) {
                    this.setConfig(data);
                }
            })
            .catch((err) => {
                window.console.log('err', err);
            });
    }
}

环境判断以及调用

import WxShare from './wxShare';

/**
 * 是否在微信中打开
 * @return {Boolean} true-是 false-否
 */
export const isWxOpen = () => {
    const isWx = window.navigator.userAgent.match(/MicroMessenger/i);
    // 是否在微信中打开
    if (isWx && isWx[0] === 'MicroMessenger') {
        return true;
    }
    return false;
};

/**
 * 配置微信分享
 * @param {Object} params 配置信息
 * @param {String} params.title 标题
 * @param {String} params.desc 简介
 * @param {String} params.sharkLink 分享的链接，可以与注册的链接不一致，但需要是相同域名下的
 * @param {String} params.imgUrl 缩略图
 * @param {Function} params.success 成功回调
 * @param {Function} params.cancel 失败回调
 */
export const registerWx = (params) => {
    // 优先注册
    if (isWxOpen()) {
        const {
            title = '蝶恋花',
            desc = '衣带渐宽终不悔,为伊消得人憔悴',
            imgUrl = '',
            success = null,
            cancel = null,
            sharkLink = window.location.href // 分享链接,
        } = params || {};
        const config = {
            title,
            desc,
            link: encodeURIComponent(window.location.href), // 注册的链接
            sharkLink,
            imgUrl:
                imgUrl ||  'https://****favicon.ico',
            success,
            cancel,
        };
        // eslint-disable-next-line no-new
        new WxShare(config);
    }
};