今年 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 獲取到當前客戶端的基礎庫版本,做一下低版本兼容。