自定义QQ和微信分享卡片

本文介绍自定义微信分享卡片和自定义QQ分享卡片分别所用的两种方式，完整代码链接放在文章末尾。

自定义分享卡片有两种方式：通过JS-SDK实现和通过修改meta标签实现。
实践证明，使用JS-SDK的方式适用且仅适用于自定义微信分享卡片，修改meta标签的方式适用且仅适用于自定义qq分享卡片。特此美文，献给想两全其美的你。

自定义微信分享卡片

自定义微信分享卡片使用JS-SDK的方式，总共分三步：

1. 引入weixin-js-sdk

import wx from 'weixin-js-sdk' // npm i -S weixin-js-sdk

这里是在vue项目中的引入方式，其它方式可百度。

2.后端开发你喝茶

function getWxConfigData() {
  // TODO 从后端请求并返回{ appId, timestamp, nonceStr, signature }
}

如果后端找不到 JS-SDK说明文档，你可以发给他。

3.粘贴以下代码

async function setWxShareCard(shareConfig) {
  let { imgUrl, desc, title, link } = shareConfig
  let messageConfig = { imgUrl, desc, title, link }
  let timelineConfig = { imgUrl, title, link } // 朋友圈没有desc
  let { appId, timestamp, nonceStr, signature } = await getWxConfigData()
  wx.config({
    debug: false,
    appId,
    timestamp,
    nonceStr,
    signature,
    jsApiList: [
      'updateAppMessageShareData', // 聊天消息
      'updateTimelineShareData' // 朋友圈
    ]
  });
  wx.ready(function () {
    wx.updateAppMessageShareData(messageConfig)
    wx.updateTimelineShareData(timelineConfig)
  })
}

更多使用和配置，详读JS-SDK说明文档。

自定义QQ分享卡片

自定义QQ分享卡片使用自定义meta标签的方式，设置效果如下：

<meta itemprop="name" content="我是标题">
<meta name="description" itemprop="description" content="我是描述">
<meta itemprop="image" content="我是图片链接">

自定义的过程包括dom元素的增删改查四大操作，代码如下：

// QQ通过动态设置meta自定义分享卡片
function setQQShareCard(shareConfig) {
  let { title, desc, imgUrl } = shareConfig
  let metaArr = [
    {
      attriKeyArr: ['itemprop'],
      attriVal: 'name',
      content: title
    },
    {
      attriKeyArr: ['name', 'itemprop'],
      attriVal: 'description',
      content: desc
    },
    {
      attriKeyArr: ['itemprop'],
      attriVal: 'image',
      content: imgUrl
    }
  ]
  metaArr.forEach(metaData => resetMeta(metaData))
}
function resetMeta(metaData) {
  let { attriKeyArr, attriVal, content } = metaData
  let headDom = document.getElementsByTagName('head')
  let metaDom = document.querySelector(`meta[${attriKeyArr[0]}="${attriVal}"]`)
  if (metaDom) headDom[0].removeChild(metaDom)
  metaDom = document.createElement('meta')
  attriKeyArr.forEach(attriKey => {
    metaDom.setAttribute(attriKey, attriVal)
  })
  metaDom.content = content
  headDom[0].appendChild(metaDom)
}

其中之所以有metaDom = document.createElement('meta')这一步删除的操作，是因为在实践中发现：当需要修改的某个属性的标签已经存在时，再添加或直接修改没有生效。本人胸怀似海，其中缘由并未深究。

自定义QQ和微信分享卡片

最后，把两种方式直接整合，并设置默认值：

export const setShareCard = function (shareConfig) {
  let { imgUrl, desc, title, link } = shareConfig
  // 设置默认值
  shareConfig = {
    imgUrl: imgUrl || DEFAULT_SHARE_COVER,
    desc: desc || DEFAULT_SHARE_DESC,
    title: title || DEFAULT_SHARE_TITLE,
    link: link || window.location.href
  }
  setQQShareCard(shareConfig)
  setWxShareCard(shareConfig)
}

在需要自定义分享卡片的页面，引入并使用这个方法即可。

参考文章

完整代码

完整代码链接