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

下面我將實現小程序端的從轉發到用戶點擊卡片后獲取信息的這個過程。

基本思路

開啟

首先我們要調用wx.showShareMenu進行設置，來開啟是否使用帶shareTicket的轉發，這個shareTicket是開發群功能的關鍵:

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

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

觸發轉發事件

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

1. open-type="share">share

接下來在頁面中設置分享函數onShareAppMessage:

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

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

群成員點消息卡片

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

app.js:

1. // 在onShow中獲取轉發信息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根據自己的具體需求進行操作，也可以設置其他的
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. // 發送到后臺解析
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，然后將其傳給后臺進行解析。

在getDecodeEncryptedData中，當后臺解析成功后，就會返回一個openGId。

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

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

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

其中的code調用wx.login獲得，后臺根據這個code能獲取到openid。然后進行綁定。

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

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