作者：smallerpig，來(lái)自原文地址 
今天得到消息小程序開(kāi)放了分享到微信群的更多功能，正好小豬前一段時(shí)間因?yàn)樘貏e的忙而把本系列文章給耽擱了一點(diǎn)，期間就在想下面怎么來(lái)寫這一系列的blog。今天正好就以此來(lái)開(kāi)始吧。

先說(shuō)點(diǎn)

小豬目前用的最多的小程序的分享是在騎行了摩拜單車以后在結(jié)算頁(yè)面有一個(gè)分享出去搶免費(fèi)騎行天數(shù)。

其實(shí)在此之前公眾號(hào)的分享已經(jīng)做的挺成熟了，用戶可以根據(jù)指引分享自己獨(dú)特的鏈接出去，被分享者打開(kāi)的鏈接是帶著分享者的信息的。這樣的頁(yè)面可以根據(jù)程序邏輯來(lái)做很多事情，例如：為自己拉票，分享自己的經(jīng)驗(yàn)等。

可是在用戶點(diǎn)了公眾號(hào)的分享鏈接之后程序是不會(huì)知道用戶到底是從哪來(lái)的，是從聊天窗口還是朋友圈？是從群聊天還是個(gè)人聊天？

小程序先開(kāi)放了這個(gè)接口

正如官方解釋所說(shuō)：

當(dāng)用戶在群聊中點(diǎn)擊小程序的分享卡片，開(kāi)發(fā)者可獲取群 ID 和群名稱，更好地針對(duì)群場(chǎng)景提供個(gè)性化服務(wù)。

再如官方文檔中的說(shuō)明：

通常開(kāi)發(fā)者希望分享出去的小程序被二次打開(kāi)的時(shí)候能夠獲取到一些信息，例如群聊名字或者是群的標(biāo)識(shí)?，F(xiàn)在通過(guò)調(diào)用 wx.showShareMenu 并且設(shè)置 withShareTicket 為 true ，當(dāng)用戶將小程序分享到任一群聊之后，可以獲取到此次分享的 shareTicket

官方文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html#onshareappmessage

分享動(dòng)作 onShareAppMessage

在公眾號(hào)的頁(yè)面里，很久之前程序是可以通過(guò)調(diào)用接口來(lái)直接引導(dǎo)用戶分享頁(yè)面的。后來(lái)騰訊對(duì)此做了限制，只能通過(guò)頁(yè)面的右上角的目錄按鈕來(lái)點(diǎn)擊分享。

在小程序里同樣有該限制，而且必須要在定義了Page對(duì)象的onShareAppMessage函數(shù)之后，右上角菜單才會(huì)顯示對(duì)應(yīng)的“分享”按鈕。

1. onShareAppMessage: function () {
2. return {
3. title: '這里是機(jī)智life小程序',
4. path: '/page/index/index?id=123',
5. success: function(res) {
6. console.log(res)
7. },
8. fail: function(res) {
9. console.log(res)
10. }
11. }
12. }

運(yùn)行程序結(jié)果可看到: 

定義返回ticket ：wx.showShareMenu

使用如下代碼，來(lái)定義在回調(diào)里是否帶上shareTicket參數(shù)，

1. wx.showShareMenu({
2. withShareTicket: true,
3. success: function (res) {
4. // 分享成功
5. console.log('shareMenu share success')
6. console.log(res)
7. },
8. fail: function (res) {
9. // 分享失敗
10. console.log(res)
11. }
12. })

如下圖， 

  可見(jiàn)ShareTickets是個(gè)數(shù)組，也就是可以將頁(yè)面同時(shí)分享到多個(gè)群，每一個(gè)群對(duì)應(yīng)一個(gè)shareTicket。使用shareTicket可通過(guò)wx.getShareInfo接口獲取本次的分享信息。

獲取本次分享的群信息：wx.getShareInfo

使用下列代碼來(lái)獲取群信息：

1. onShareAppMessage: function () {
2. return {
3. title: '這里是機(jī)智life小程序',
4. path: '/page/index/index?id=123',
5. success: function (res) {
6. console.log(res.shareTickets[0])
7. // console.log
8. wx.getShareInfo({
9. shareTicket:res.shareTickets[0],
10. success:function(res){console.log(res)},
11. fail:function(res){console.log(res)},
12. complete:function(res){console.log(res)}
13. })
14. },
15. fail: function (res) {
16. // 分享失敗
17. console.log(res)
18. }
19. }
20. }

運(yùn)行程序，分享到一個(gè)測(cè)試群(在使用了showShareMenu接口之后，再次點(diǎn)擊右上角的分享之后，《微信web開(kāi)發(fā)者工具》為我們建立了幾個(gè)隨即名稱的群列表供測(cè)試)，可以看到運(yùn)行結(jié)果： 

從上圖中可以看到額外的數(shù)據(jù)：iv、roomTopic、rawData、signature、encryptedData 其中，roomTopic字段就是分享的群的名稱.

如果想獲取該群的ID，那么可以通過(guò)之前小豬介紹的跟著小豬來(lái)做小程序開(kāi)發(fā)吧——解密CryptedData 來(lái)解密encryptedData。

解密完之后可以看到openGId和之前已經(jīng)存在的roomTopic。

大功告成。

在手機(jī)上運(yùn)行查看下效果：