小程式分享，看這篇就夠了

大明發表於2018-07-10

官方文件

最近在調研小程式的分享能力，本篇文件主要是調研小程式關於分享方面的玩法，目的是學習小程式在專案應用以及玩法鏈上的擴充套件。

API層面

onShareAppMessage

小程式如果想對外分享，必須在page裡面定義onShareAppMessage函式，來配置頁面分享轉發相關的資訊。

  • 只有定義了此事件處理函式，右上角選單才會顯示 “轉發” 按鈕
  • 使用者點選轉發按鈕的時候會呼叫
  • 此事件需要 return 一個 Object，用於自定義轉發內容

一個頁面可能會有多個分享，可以由插入的引數options來判斷具體是由哪個位置進行分享，從而做不同的邏輯判斷。

return物件的返回函式：

小程式分享，看這篇就夠了

如果定義了該事件，又不想通過頁面menu轉發，可以通過hideShareMenu來隱藏掉

注意事項：

  • 轉發後不新增imageUrl的話，將截圖作為轉發的預設圖片。
  • from 欄位可以通過在轉發成功後調取的 success、complete 來進行對 menu 和 button 的不同操作
  • 如果有攜帶 shareTicket 值，會在 success 回撥產生，返回結果在 shareTickets 欄位中，是一個陣列，可以做一定處理

wx.showShareMenu

一般是用來配置相關的引數，常見的如withShareTicket，用它來獲取群資訊，群的相關標示。

wx.showShareMenu({
  withShareTicket: true
})
複製程式碼

wx.hideShareMenu

隱藏menu級別的轉發功能，但是button中還存在著轉發。

如果先設定 showShareMenu ，並且配置了 withShareTicket，再用 hideShareMenu 方法，通過按鈕轉發，照樣能獲取 shareTicket，如下：

wx.showShareMenu({
  withShareTicket: true
})
wx.hideShareMenu({
})
複製程式碼

wx.updateShareMenu

更新shareMenu資訊需要用update操作哦，這裡需要注意下，一般都是會更新withShareTicket屬性。

wx.getShareInfo

在拿到了shareTicket資訊後，可以由此API獲取轉發詳細資訊

wx.getShareInfo({
    shareTicket: res.shareTickets[0],
    success: ...
    fail: ...
})
複製程式碼

相關回撥的引數

{
    errMsg: "getShareInfo:ok", 
    iv: "gRHeFU+Nhr36RmladCXnRQ==", 
    encryptedData: "IQ/RwZLeQFUGuxv0bBfOrL/KLnXO+bxcyCBru5lB92FkHIg8ae…7TnHwU+rqgerFKvpvS5JbFyh+9liUqyb2bk6/LETYQ+h/FQ=="
}
複製程式碼

由iv和encryptedData進行解密，可以拿到openGId的值。為當前群對當前小程式的唯一值。額外還可以拿到群名稱等更多的開放資料。

button轉發

頁面內需要轉發時，需要給button元件設定open-type="share"，並在觸發的地方判斷來源。

獲取分享連結流程

在小程式中，獲取openGId主要有兩種途徑，也一般圍繞著兩種途徑做分享相關的開發：

  • 當使用者開啟withShareTicket的卡片時，可以在onLauch或者getShareInfo中獲取加密資訊，並且傳給服務端獲得openGId。
  • 當使用者分享成功後，會在回撥裡收到一個shareTicket，然後通過getShareInfo來獲得加密資訊，獲得openGId。

擴充玩法

APP分享到小程式

傳統APP要以小程式卡片的形式分享到微信，需要滿足以下幾個條件：

  • 要求發起分享的App與小程式屬於同一微信開放平臺帳號；

  • 支援分享小程式型別訊息至好友會話，不支援“分享至朋友圈” “收藏”；

  • 微信客戶端版本要求：6.5.6及以上微信客戶端版本，若客戶端版本低於6.5.6，小程式型別分享將自動轉成網頁型別分享。開發者必須填寫網頁連結欄位，確保低版本客戶端能正常開啟網頁連結；

  • 支援分享大圖卡片樣式，自定義圖片建議長寬比是 5:4。6.5.9及以上版本微信客戶端小程式型別分享使用大圖卡片樣式。

  • 支援分享開發版/體驗版小程式，為支援開發者除錯，開發者工具包支援分享開發版/體驗版小程式至微信，開發者可控制分享的小程式版本。

具體流程圖如下：

app分享到小程式

朋友圈開啟小程式

在朋友圈中，釋出圖片附帶小程式二維碼，使用者把圖片分享到朋友圈中，看到的一方即可長恩識別在微信中開啟小程式。通過這個玩法，實現了把小程式「分享」到朋友圈。

至於圖片的生成，canvas和伺服器端生成都是比較成熟的解決方案。

小程式支援開啟APP

這個玩法有一個前提：小程式卡片必須是由APP分享出去，才可以開啟APP

功能流程圖如下：

開啟app

該途徑可以作為小程式對於app的補充：產品可以通過 App 和小程式實現場景互補。

比如使用者 Sherry 將一個文件分享給使用者 Kevin，Kevin 可以在小程式內直接檢視。如果需要編輯，則可以直接開啟 App 完成協同處理。這樣一來，小程式不需要做的很重，只需滿足基本功能，更多功能由 App 來補充。

case舉例：使用者代叫車，使用者A想讓使用者B代叫車，使用者A將行程分享給使用者B，使用者B微信開啟小程式之後，跳轉美團叫車APP完成相關複雜操作。

小程式向公眾號導流

在小程式中，可以利用一些引導性文案指引使用者點選進入客服會話頁面，然後客服自動回覆一條公眾號圖文訊息，而圖文訊息則有引導關注公眾號獲取更多服務的指引文案。（經典用法，但是小心被封）

客服會話

小程式和微信卡劵能力結合

比較小眾的玩法：使用者可以從小程式中快速領取會員卡和優惠券，也可以從卡包中的會員卡直達小程式。

增加接入途徑：從卡包直接進入（髮卡需要註冊並認證）

使用者卡包

相關文章