微信小程序群功能開發(fā)-后端篇
微信小程序群功能開發(fā)-前端篇
我們?cè)谝恍┪⑿湃褐锌吹竭^(guò)這樣的小程序分享卡片：當(dāng)你點(diǎn)進(jìn)去后雕什，會(huì)看到一個(gè)列表扁位，里面有其他群成員的頭像和相關(guān)信息王悍。比如《王者榮耀群排行》，但是段位信息是騰訊私有的接口闻坚，我們只能拿到頭像和昵稱等基礎(chǔ)信息。
下面我將實(shí)現(xiàn)小程序端的從轉(zhuǎn)發(fā)到用戶點(diǎn)擊卡片后獲取信息的這個(gè)過(guò)程逝她。
開啟
首先我們要調(diào)用wx.showShareMenu進(jìn)行設(shè)置浇坐，來(lái)開啟是否使用帶shareTicket的轉(zhuǎn)發(fā)，這個(gè)shareTicket是開發(fā)群功能的關(guān)鍵:
wx.showShareMenu({
withShareTicket: true,
})
我一般將其放在頁(yè)面onShow中黔宛。
觸發(fā)轉(zhuǎn)發(fā)事件
如果要自定義轉(zhuǎn)發(fā)按鈕而不是有默認(rèn)右上角的轉(zhuǎn)發(fā)按鈕近刘，需要在頁(yè)面中放置一個(gè)open-type="share"的button組件:
<button open-type="share">share</button>
接下來(lái)在頁(yè)面中設(shè)置分享函數(shù)onShareAppMessage:
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕
console.log(res.target)
}
return {
title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
path: '/pages/test/test?id=123',
success: function (res) {
// 轉(zhuǎn)發(fā)成功
console.log(res)
// 只有轉(zhuǎn)發(fā)到群聊中打開才可以獲取到 shareTickets 返回值，單聊沒(méi)有 shareTickets
if (res.shareTickets && res.shareTickets.length>0) {
app.getShareInfo(res.shareTickets[0])
}
},
fail: function (res) {
// 轉(zhuǎn)發(fā)失敗
console.log(res)
}
}
}
現(xiàn)在就可以進(jìn)行轉(zhuǎn)發(fā)了臀晃，在群聊中將會(huì)看到此次分享的小程序消息卡片觉渴。每個(gè)shareTicket對(duì)應(yīng)每個(gè)群并且單聊不會(huì)有該值。這里只選擇一個(gè)轉(zhuǎn)發(fā)徽惋，所以直接取第一個(gè)案淋。至于app.getShareInfo是用來(lái)獲取群id(openGId)的函數(shù)，我們放到后面介紹险绘。
群成員點(diǎn)消息卡片
當(dāng)群成員點(diǎn)消息卡片進(jìn)入小程序后踢京，在app.js的onShow/onLaunch的options中可以獲取到shareTicket，shareTicket每次都是不一樣的隆圆，比分你分享的時(shí)候獲取到的跟這里獲取到的不是同一個(gè)漱挚，但是會(huì)對(duì)應(yīng)同一個(gè)openGId。
app.js:
// 在onShow中獲取轉(zhuǎn)發(fā)信息shareTicket
onShow: function (options) {
console.log(options)
let scene = options.scene
// 場(chǎng)景值是1044渺氧，帶 shareTicket 的小程序消息卡片
if(scene == 1044) {
let shareTicket = options.shareTicket
// 這里的id根據(jù)自己的具體需求進(jìn)行操作旨涝，也可以設(shè)置其他的
let id = options.query.id
this.getShareInfo(shareTicket)
}
},
// 獲取加密信息encryptedData, iv
getShareInfo: function (shareTicket) {
const z = this
wx.getShareInfo({
shareTicket: shareTicket,
success: function (res) {
console.log(res)
let {encryptedData, iv} = res
if(encryptedData && iv) {
z.getDecodeEncryptedData(encryptedData, iv)
}
},
fail: function (res) {
console.log(res)
}
})
},
// 獲取解密后的信息
getDecodeEncryptedData: function (encryptedData, iv) {
// 發(fā)送到后臺(tái)解析
wx.login({
success: function(res) {
let code = res.code
// 下面只是演示代碼
// post({
// url:'https://www.example.com/controller/getDecodeEncryptedData'
// data:{
// code,
// encryptedData,
// iv,
// }
// })
}
})
},
首先，我們通過(guò)wx.getShareInfo獲取encryptedData和iv侣背，然后將其傳給后臺(tái)進(jìn)行解析白华。
在getDecodeEncryptedData中，當(dāng)后臺(tái)解析成功后贩耐，就會(huì)返回一個(gè)openGId弧腥。
此時(shí)就可以將群openGId與用戶openid進(jìn)行綁定了，這個(gè)綁定信息也是要保存到后臺(tái)的潮太。如果后臺(tái)沒(méi)有保存過(guò)頭像昵稱信息管搪，此時(shí)也可以將用戶頭像和昵稱一起保存到后臺(tái)。
類似于下面這樣的一個(gè)接口:
// 下面只是演示代碼
post({
url:'https://www.example.com/controller/bindGroupAndUser'
data:{
code,
openGId
}
})
其中的code調(diào)用wx.login獲得铡买，后臺(tái)根據(jù)這個(gè)code能獲取到openid更鲁。然后進(jìn)行綁定。
然后根據(jù)自己的需求奇钞，可能還要一個(gè)保存用戶基礎(chǔ)信息和拉取群成員信息列表的接口澡为。
基本思路就是這樣，我將在另一篇文章中描述后端的相關(guān)處理景埃。
