微信小程序前端開發(fā)群功能教程
我們?cè)谝恍┪⑿湃褐锌吹竭^這樣的小程序分享卡片:當(dāng)你點(diǎn)進(jìn)去后,會(huì)看到一個(gè)列表,里面有其他群成員的頭像和相關(guān)信息。比如《王者榮耀群排行》,但是段位信息是騰訊私有的接口,我們只能拿到頭像和昵稱等基礎(chǔ)信息。
首先我們要調(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組件:
接下來(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 返回值,單聊沒有 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中,通過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)沒有保存過頭像昵稱信息,此時(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ǔ)信息和拉取群成員信息列表的接口。
第二部分:如何開通一個(gè)小商店