今年 5 月份的時(shí)候，微信宣布：「為了更好的針對(duì)群場(chǎng)景提供個(gè)性化服務(wù)，當(dāng)用戶在群聊中點(diǎn)擊小程序分享卡片時(shí)，小程序支持開(kāi)發(fā)者獲取群 ID 和群名稱」。但隨后沒(méi)多久，發(fā)現(xiàn)小程序只返回了群 ID，并沒(méi)有給我們?nèi)好，F(xiàn)在，終于有方法可以顯示群名稱啦！

前言

直到現(xiàn)在，網(wǎng)上還可以看到很多「開(kāi)發(fā)者可以獲取群名稱」這樣的新聞。在微信剛宣布的時(shí)候確實(shí)同時(shí)返回了群 ID 和 群名稱，但隨后就只能獲取到群 ID 了。估計(jì)會(huì)有很多開(kāi)發(fā)者跟我一樣被文章誤導(dǎo)了，還以為是自己代碼有問(wèn)題。

至于微信為什么這么做，官方也作出了解釋：

 

這就導(dǎo)致了，目前很多和群關(guān)聯(lián)的小程序，一進(jìn)去就要設(shè)置群備注的尷尬現(xiàn)象。

為了保護(hù)用戶的隱私，同時(shí)滿足開(kāi)發(fā)的需求，微信需要找到一種獲取不到，但又允許展示的方法。

現(xiàn)在微信找到方法了。

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

獲取群 ID

顯示群名的前提是，已經(jīng)獲取到了該群的群 ID。要是你之前已經(jīng)對(duì)獲取群 ID 有所了解，可以直接跳到后面看。

我們通過(guò)將小程序轉(zhuǎn)發(fā)到群里，獲取到對(duì)應(yīng)群的群 ID。

首先，需要設(shè)置顯示當(dāng)前頁(yè)面的轉(zhuǎn)發(fā)按鈕，轉(zhuǎn)發(fā)后返回 ShareTicket，有了它才能去獲取群 ID：

wx.showShareMenu({
  withShareTicket: true 
})

在代碼里面添加 onShareAppMessage 方法，它是用來(lái)控制轉(zhuǎn)發(fā)功能的。轉(zhuǎn)發(fā)成功后，拿到 ShareTicket，再調(diào)用 wx.getShareInfo 獲取轉(zhuǎn)發(fā)目標(biāo)的信息。代碼如下：

onShareAppMessage: function () {
  var that = this
  return {
    title: "轉(zhuǎn)發(fā)標(biāo)題",
    path: '頁(yè)面路徑',
    success(res) {
      wx.getShareInfo({
        shareTicket: res.shareTickets[0],
        success(res) {
          console.log(res.encryptedData)
          console.log(res.iv)
          // 后臺(tái)解密，獲取 openGId
        }
      })
    }
  }
}

和 wx.getUserInfo 一樣，微信給了我們一段加密的數(shù)據(jù)，加密的方式也是一樣的，后臺(tái)可以用同一段代碼進(jìn)行解密。解密后的格式如下：

{
    "openGId": "xxxxxxxx",
    "watermark": {
        "appid": "xxxxxxxx",
        "timestamp": 1499841984
    }
}

openGId 就是我們要的群 ID 了，把它保存下來(lái)。

顯示群名

下面我們來(lái)到布局文件。

小程序剛更新，多了一個(gè)新組件 open-data：

 

用起來(lái)很簡(jiǎn)單，在要顯示群名的地方，使用以下代碼：

<open-data type="groupName" open-gid="{{openGId}}" />

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

但這個(gè)東西是基礎(chǔ)庫(kù) 1.4.0 才有的東西，最好還是用 wx.getSystemInfo 獲取到當(dāng)前客戶端的基礎(chǔ)庫(kù)版本，做一下低版本兼容。