自定義QQ和微信分享卡片

祥雲西里發表於2020-12-14

本文介紹自定義微信分享卡片和自定義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)
}

在需要自定義分享卡片的頁面，引入並使用這個方法即可。

參考文章

完整程式碼

完整程式碼連結

相關文章