pc端分享微信卡片链接

pc端分享微信卡片的实现

目前讲如果想通过分享链接到微信上，方式只有通过微信扫码后，从微信打开文章之后，通过微信内部的分享，实现分享给个人和朋友圈。
这里，我们介入的方式主要有两地方，一个就是在文章被分享时通过调用微信的sdk，来实现分享后的卡片效果。
另一个就是生成一个url的二维码。

生成二维码

我们目前基于vue3生成二维码，需要依赖第三方的插件QRCode。
安装 npm install qrcodejs2-fix --save 注意是这个，这个实际开发中没有问题。
使用方式vue3：

const creatQrCode = (res) => {
    if (temporaryVar.value) {
      temporaryVar.value.clear(); //清除二维码
      qrcodeRef.value.innerHTML = ""; //清除二维码
      temporaryVar.value = null;
      return;
    } else {
    }
    const qrCodeURL = res.link; // 赋值(这里的地址你自己定义)
    let qrcode = new QRCode(qrcodeRef.value, {
      text: qrCodeURL, //页面地址 ,如果页面需要参数传递请注意哈希模式#
      width: 200,
      height: 200
    });
    temporaryVar.value = qrcode;
  };

我的实际业务是，先调用一个接口，通过接口返回一个分享数据。然后生成二维码。
提示微信扫码，扫码后跳转到链接上。
这里需要以企业身份申请一个公众号（配置安全域名）。主要用途在于后面的分享看片的实现。这里主要是为了保证你的链接可以正常打开。

打开链接之后，页面内实现对看片分享的实现。

由于微信内的安全机制，分享后的图片如果是需要进行定制或者说，你需要调用微信提供的分享接口，而不是默认自带的分享功能的话(title和cover都不能按照自己的效果设置)。

需要调用微信的签名校验。这有后端提供一个接口，返回校验所需的配置。

需要对微信公众号的配置项进行设置。这里不再详述。

timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名

这样就可以校验微信的token,才可以调用微信的分享接口。
根据官方文档，就可以继续做后续的分享操作了。