故事的开始

事情是这样的，有项目（见 juejin.cn/post/724964… ）需要在微信环境下分享时，展示类似如下卡片样式：

包含标题、图片、描述、公司名等信息。

开干

首先我们知道，在微信中分享内容控制样式的话，要用微信提供的 js-sdk，需要一个公众号。

搞个测试号

在这登录，登录之后点击申请，到这个页面：

由于我们只测试分享，不需要拿用户信息，所以url、token这些都是不用填的。我们在本地调试只需要把自己的 IP 设置成安全域名。

找后端

小石，你过来一下，是这样，咱不是要弄那个分享功能吗，我需要一个接口，你得通过公众号的 appid 和密钥拿到微信分享 api 需要的签名信息。接口是这样的：

入参：url
出参：{
        appId: String, // 企业号的appid
        timestamp: String, // 生成签名的时间戳
        nonceStr: String, // 生成签名的随机串
        signature: String, // 签名
      }

你去查查怎么操作一下。

开始写我们的代码

新建文件： useWxShare.ts

import request from '@/common/service' // axios封装方法
import wx from 'weixin-js-sdk' // 在 index.html 里引入 js-sdk 也是一样的

// 调接口
const getWxInfo = (shareUrl: string) =>
  request.get({
    url: `/api/wx-register`,
    params: {
      shareUrl
    }
  })

export const useWxShare = (title: string , desc: string , imgUrl: stirng) => {
  let wxUrl = location.href.split('#')[0]
  getWxInfo(wxUrl).then((res) => {
    if (wx) {
      wx.config({
        debug: true, // 开启调试模式,微信打开时会一顿弹窗告诉你 ok 还是 ko
        appId: res.data.appId, // 企业号的唯一标识
        timestamp: res.data.timestamp, // 生成签名的时间戳
        nonceStr: res.data.nonceStr, // 生成签名的随机串
        signature: res.data.signature, // 签名
        jsApiList: [
          'checkJsApi', // 检查方法能不能用。
          'updateAppMessageShareData', // 分享给朋友时样式设置
          'updateTimelineShareData', // 分享到朋友圈时
          'onMenuShareAppMessage' //这个我这用不到，手动触发分享要用
        ] // 必填，需要使用的js接口列表，具体都是怎么回事去看 sdk 文档就行了。
      })
      wx.checkJsApi({
        jsApiList: [
          'updateAppMessageShareData',
          'updateTimelineShareData'
        ], // 看看这俩方法能用不，debug true 时会弹 ok ok。
        success: function () {
          wx.ready(function () {
            wx.updateAppMessageShareData({
              title, // 分享时的标题
              desc, // 分享描述
              link: wxUrl, // 分享时的链接
              imgUrl,
              success: function () {
                console.log('成功时回调，没有就删了')
              },
              cancel: function () {
                console.log('失败时回调，没有就删了')
              }
            })

            wx.updateTimelineShareData({
              title,
              link: wxUrl,
              imgUrl
            })
          })
        },
        fail: (error: any) => {
          console.log('error', error)
        }
      })
    }
  })
}

使用

import { useWxShare } from '@/xxx'
import TestImg from '@/assets/images/test.png'

useWxShare('我是标题','我是描述',TestImg)

结尾

上线功能时需要公司有个运营的服务号，且是认证过的，不然没有分享接口的使用权限。我们这不愿意花那一年300块钱的认证审核费，所以这个功能毙掉了哈哈哈哈哈
卡片形式分享是有条件的，如果用户是通过链接打开的项目，那分享出去也是链接。因为微信这个就是怎么打开的分享出去就是什么样。
公众号上挂载链接、通过二维码扫描进入项目、收藏链接在收藏里打开，这些方法才可以出现卡片形式。其它的不知道了。
之前做的分享功能都是 web项目挂载在 App 环境中，由 App 进行分享到微信操作，所以分享出来的样式都是 App 控制的。origin 部分显示的是 XXXApp（即 App 的名字）。

如果有问题，欢迎指正，感谢。

记录 Vue3 微信卡片分享问题

故事的开始

开干

搞个测试号

找后端

开始写我们的代码

使用

结尾