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

下面我將實(shí)現(xiàn)小程序端的從轉(zhuǎn)發(fā)到用戶點(diǎn)擊卡片后獲取信息的這個(gè)過程。

基本思路

開啟

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

1. wx.showShareMenu({
2. withShareTicket: true,
3. })

我一般將其放在頁面onShow中。

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

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

1. open-type="share">share

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

1. onShareAppMessage: function (res) {
2. if (res.from === 'button') {
3. // 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
4. console.log(res.target)
5. }
6. return {
7. title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
8. path: '/pages/test/test?id=123',
9. success: function (res) {
10. // 轉(zhuǎn)發(fā)成功
11. console.log(res)
12. // 只有轉(zhuǎn)發(fā)到群聊中打開才可以獲取到 shareTickets 返回值，單聊沒有 shareTickets
13. if (res.shareTickets && res.shareTickets.length>0) {
14. app.getShareInfo(res.shareTickets[0])
15. }
16. },
17. fail: function (res) {
18. // 轉(zhuǎn)發(fā)失敗
19. console.log(res)
20. }
21. }
22. }

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

群成員點(diǎn)消息卡片

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

app.js:

1. // 在onShow中獲取轉(zhuǎn)發(fā)信息shareTicket
2. onShow: function (options) {
3. console.log(options)
4. let scene = options.scene
5.  
6. // 場景值是1044，帶 shareTicket 的小程序消息卡片
7. if(scene == 1044) {
8. let shareTicket = options.shareTicket
9. // 這里的id根據(jù)自己的具體需求進(jìn)行操作，也可以設(shè)置其他的
10. let id = options.query.id
11. this.getShareInfo(shareTicket)
12. }
13. },
14.  
15. // 獲取加密信息encryptedData, iv
16. getShareInfo: function (shareTicket) {
17. const z = this
18. wx.getShareInfo({
19. shareTicket: shareTicket,
20. success: function (res) {
21. console.log(res)
22. let {encryptedData, iv} = res
23.  
24. if(encryptedData && iv) {
25. z.getDecodeEncryptedData(encryptedData, iv)
26. }
27. },
28. fail: function (res) {
29. console.log(res)
30. }
31. })
32. },
33.  
34. // 獲取解密后的信息
35. getDecodeEncryptedData: function (encryptedData, iv) {
36. // 發(fā)送到后臺解析
37. wx.login({
38. success: function(res) {
39. let code = res.code
40.  
41. // 下面只是演示代碼
42. // post({
43. // url:'https://www.example.com/controller/getDecodeEncryptedData'
44. // data:{
45. // code,
46. // encryptedData,
47. // iv,
48. // }
49. // })
50. }
51. })
52. },

首先，我們通過wx.getShareInfo獲取encryptedData和iv，然后將其傳給后臺進(jìn)行解析。

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

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

類似于下面這樣的一個(gè)接口:

1. // 下面只是演示代碼
2. post({
3. url:'https://www.example.com/controller/bindGroupAndUser'
4. data:{
5. code,
6. openGId
7. }
8. })

其中的code調(diào)用wx.login獲得，后臺根據(jù)這個(gè)code能獲取到openid。然后進(jìn)行綁定。

然后根據(jù)自己的需求，可能還要一個(gè)保存用戶基礎(chǔ)信息和拉取群成員信息列表的接口。

基本思路就是這樣，我將在另一篇文章中描述后端的相關(guān)處理。