作者:smallerpig,來自原文地址
今天得到消息小程序開放了分享到微信群的更多功能,正好小豬前一段時間因為特別的忙而把本系列文章給耽擱了一點,期間就在想下面怎么來寫這一系列的blog。今天正好就以此來開始吧。
先說點
小豬目前用的最多的小程序的分享是在騎行了摩拜單車以后在結算頁面有一個分享出去搶免費騎行天數。
其實在此之前公眾號的分享已經做的挺成熟了,用戶可以根據指引分享自己獨特的鏈接出去,被分享者打開的鏈接是帶著分享者的信息的。這樣的頁面可以根據程序邏輯來做很多事情,例如:為自己拉票,分享自己的經驗等。
可是在用戶點了公眾號的分享鏈接之后程序是不會知道用戶到底是從哪來的,是從聊天窗口還是朋友圈?是從群聊天還是個人聊天?
小程序先開放了這個接口
正如官方解釋所說:
當用戶在群聊中點擊小程序的分享卡片,開發者可獲取群 ID 和群名稱,更好地針對群場景提供個性化服務。
再如官方文檔中的說明:
通常開發者希望分享出去的小程序被二次打開的時候能夠獲取到一些信息,例如群聊名字或者是群的標識。現在通過調用 wx.showShareMenu 并且設置 withShareTicket 為 true ,當用戶將小程序分享到任一群聊之后,可以獲取到此次分享的 shareTicket
官方文檔地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html#onshareappmessage
分享動作 onShareAppMessage
在公眾號的頁面里,很久之前程序是可以通過調用接口來直接引導用戶分享頁面的。后來騰訊對此做了限制,只能通過頁面的右上角的目錄按鈕來點擊分享。
在小程序里同樣有該限制,而且必須要在定義了Page對象的onShareAppMessage函數之后,右上角菜單才會顯示對應的“分享”按鈕。
-
onShareAppMessage: function () {
-
return {
-
title: '這里是機智life小程序',
-
path: '/page/index/index?id=123',
-
success: function(res) {
-
console.log(res)
-
},
-
fail: function(res) {
-
console.log(res)
-
}
-
}
-
}

運行程序結果可看到:

使用如下代碼,來定義在回調里是否帶上shareTicket參數,
-
wx.showShareMenu({
-
withShareTicket: true,
-
success: function (res) {
-
// 分享成功
-
console.log('shareMenu share success')
-
console.log(res)
-
},
-
fail: function (res) {
-
// 分享失敗
-
console.log(res)
-
}
-
})
如下圖,
可見ShareTickets是個數組,也就是可以將頁面同時分享到多個群,每一個群對應一個shareTicket。使用shareTicket可通過wx.getShareInfo接口獲取本次的分享信息。
獲取本次分享的群信息:wx.getShareInfo
使用下列代碼來獲取群信息:
-
onShareAppMessage: function () {
-
return {
-
title: '這里是機智life小程序',
-
path: '/page/index/index?id=123',
-
success: function (res) {
-
console.log(res.shareTickets[0])
-
// console.log
-
wx.getShareInfo({
-
shareTicket:res.shareTickets[0],
-
success:function(res){console.log(res)},
-
fail:function(res){console.log(res)},
-
complete:function(res){console.log(res)}
-
})
-
},
-
fail: function (res) {
-
// 分享失敗
-
console.log(res)
-
}
-
}
-
}

運行程序,分享到一個測試群(在使用了showShareMenu接口之后,再次點擊右上角的分享之后,《微信web開發者工具》為我們建立了幾個隨即名稱的群列表供測試),可以看到運行結果:

從上圖中可以看到額外的數據:iv、roomTopic、rawData、signature、encryptedData 其中,roomTopic字段就是分享的群的名稱.
如果想獲取該群的ID,那么可以通過之前小豬介紹的跟著小豬來做小程序開發吧——解密CryptedData 來解密encryptedData。
解密完之后可以看到openGId和之前已經存在的roomTopic。
大功告成。
在手機上運行查看下效果:

|