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

大明發表於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完成相關複雜操作。

小程式向公眾號導流

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

客服會話

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

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

增加接入途徑:從卡包直接進入(髮卡需要註冊並認證)

使用者卡包

相關文章