微信小程序前端開發(fā)群功能教程

我們在一些微信群中看到過這樣的小程序分享卡片：當(dāng)你點進去后，會看到一個列表，里面有其他群成員的頭像和相關(guān)信息。比如《王者榮耀群排行》，但是段位信息是騰訊私有的接口，我們只能拿到頭像和昵稱等基礎(chǔ)信息。

首先我們要調(diào)用wx.showShareMenu進行設(shè)置，來開啟是否使用帶shareTicket的轉(zhuǎn)發(fā)，這個shareTicket是開發(fā)群功能的關(guān)鍵:

wx.showShareMenu({

withShareTicket: true,

})

一般將其放在頁面onShow中。

觸發(fā)轉(zhuǎn)發(fā)事件

如果要自定義轉(zhuǎn)發(fā)按鈕而不是有默認右上角的轉(zhuǎn)發(fā)按鈕，需要在頁面中放置一個open-type=share的button組件:

share

接下來在頁面中設(shè)置分享函數(shù)onShareAppMessage:

onShareAppMessage: function (res) {

if (res.from === \'button\') {

// 來自頁面內(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)在就可以進行轉(zhuǎn)發(fā)了，在群聊中將會看到此次分享的小程序消息卡片。每個shareTicket對應(yīng)每個群并且單聊不會有該值。這里只選擇一個轉(zhuǎn)發(fā)，所以直接取第一個。至于app.getShareInfo是用來獲取群id(openGId)的函數(shù)，我們放到后面介紹。

群成員點消息卡片

當(dāng)群成員點消息卡片進入小程序后，在app.js的onShow/onLaunch的options中可以獲取到shareTicket，shareTicket每次都是不一樣的，比分你分享的時候獲取到的跟這里獲取到的不是同一個，但是會對應(yīng)同一個openGId。

在app.js中，通過wx.getShareInfo獲取encryptedData和iv，然后將其傳給后臺進行解析。

在getDecodeEncryptedData中，當(dāng)后臺解析成功后，就會返回一個openGId。

此時就可以將群openGId與用戶openid進行綁定了，這個綁定信息也是要保存到后臺的。如果后臺沒有保存過頭像昵稱信息，此時也可以將用戶頭像和昵稱一起保存到后臺。

類似于下面這樣的一個接口:

// 下面只是演示代碼

post({

 url:\'https://www.example.com/controller/bindGroupAndUser\'

  data:{

      code,

      openGId

}

})

其中的code調(diào)用wx.login獲得，后臺根據(jù)這個code能獲取到openid。然后進行綁定。然后根據(jù)自己的需求，可能還要一個保存用戶基礎(chǔ)信息和拉取群成員信息列表的接口。