小程式可以顯示群名稱啦！

SouthernBox發表於2019-02-28

今年 5 月份的時候，微信宣佈：「為了更好的針對群場景提供個性化服務，當使用者在群聊中點選小程式分享卡片時，小程式支援開發者獲取群 ID 和群名稱」。但隨後沒多久，發現小程式只返回了群 ID，並沒有給我們群名。現在，終於有方法可以顯示群名稱啦！

前言

直到現在，網上還可以看到很多「開發者可以獲取群名稱」這樣的新聞。在微信剛宣佈的時候確實同時返回了群 ID 和 群名稱，但隨後就只能獲取到群 ID 了。估計會有很多開發者跟我一樣被文章誤導了，還以為是自己程式碼有問題。

至於微信為什麼這麼做，官方也作出瞭解釋：

這就導致了，目前很多和群關聯的小程式，一進去就要設定群備註的尷尬現象。

為了保護使用者的隱私，同時滿足開發的需求，微信需要找到一種獲取不到，但又允許展示的方法。

現在微信找到方法了。

下面我們看看如何在小程式裡面顯示群名稱。

獲取群 ID

顯示群名的前提是，已經獲取到了該群的群 ID。要是你之前已經對獲取群 ID 有所瞭解，可以直接跳到後面看。

我們通過將小程式轉發到群裡，獲取到對應群的群 ID。

首先，需要設定顯示當前頁面的轉發按鈕，轉發後返回 ShareTicket，有了它才能去獲取群 ID：

wx.showShareMenu({
  withShareTicket: true 
})複製程式碼

在程式碼裡面新增 onShareAppMessage 方法，它是用來控制轉發功能的。轉發成功後，拿到 ShareTicket，再呼叫 wx.getShareInfo 獲取轉發目標的資訊。程式碼如下：

onShareAppMessage: function () {
  var that = this
  return {
    title: "轉發標題",
    path: `頁面路徑`,
    success(res) {
      wx.getShareInfo({
        shareTicket: res.shareTickets[0],
        success(res) {
          console.log(res.encryptedData)
          console.log(res.iv)
          // 後臺解密，獲取 openGId
        }
      })
    }
  }
}複製程式碼

和 wx.getUserInfo 一樣，微信給了我們一段加密的資料，加密的方式也是一樣的，後臺可以用同一段程式碼進行解密。解密後的格式如下：

{
    "openGId": "xxxxxxxx",
    "watermark": {
        "appid": "xxxxxxxx",
        "timestamp": 1499841984
    }
}複製程式碼

openGId 就是我們要的群 ID 了，把它儲存下來。

顯示群名

下面我們來到佈局檔案。

小程式剛更新，多了一個新元件 open-data：

用起來很簡單，在要顯示群名的地方，使用以下程式碼：

<open-data type="groupName" open-gid="{{openGId}}" />複製程式碼

將 openGId 傳入，就會顯示出群名稱了。妥妥的。

但這個東西是基礎庫 1.4.0 才有的東西，最好還是用 wx.getSystemInfo 獲取到當前客戶端的基礎庫版本，做一下低版本相容。

相關文章