微信小程序前端開發(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組件:

share

接下來(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ǔ)信息和拉取群成員信息列表的接口。