# 支付寶小程式微信小程式分享轉發

由於業務需求最近對支付寶小程式和微信小程式的分享功能做了一些瞭解和嘗試，進而寫撰寫此文作為積累和總結。

微信小程式

微信小程式觸發分享有兩種方式設定onShareAppMessage和button新增open-type="share"屬性

微信 onShareAppMessage

在page中新增onShareAppMessage方法，然後點選右上角選單就會有分享選項，如果沒有定義onShareAppMessage右上角選單就沒有分享選項

微信自定義轉發內容

欄位	說明	預設值	最低版本
title	轉發標題	當前小程式名稱
path	轉發路徑	當前頁面 path ，必須是以 / 開頭的完整路徑
imageUrl	自定義圖片路徑，可以是本地檔案路徑、程式碼包檔案路徑或者網路圖片路徑。支援PNG及JPG。顯示圖片長寬比是 5:4。	使用預設截圖	1.5.0

程式碼示意

page({
  data: {
    shareData: {
      title: '自定義轉發標題',
      imageUrl: 'xxxx.jpeg',
      path: '/page/API/pages/share/share'
    }
  },

  onShareAppMessage() {
    return this.data.shareData
  }
})
複製程式碼

轉發方式

轉發方式只能轉發給朋友或者群聊效果如下

微信動態生成帶有使用者標識的自定義分享圖片

只是單純的將固定圖片分享到群聊顯然不夠酷炫，現在另一個比較流行的做法是生成一個自定義的分享圖片，但是這個流程已經脫離了小程原本的分享功能。 該流程的大體思路是使用者觸發自定義的分享按鈕，然後再小程式端用canvas動態的繪製一個帶有當前使用者標識的圖片儲存到使用者的相簿中，之後使用者在手動的將圖片轉發到朋友圈

微信 open-type="share"

button元件設定open-type="share"點選button觸發分享，open-type="share"模式如果沒有定義onShareAppMessage方法也會觸發分享

支付寶

支付寶小程式觸發分享的方式跟微信小程式相同也是兩種方式設定onShareAppMessage和button新增open-type="share"屬性

支付寶onShareAppMessage

在page中新增onShareAppMessage方法，然後點選右上角選單就會有分享選項，如果沒有定義onShareAppMessage右上角選單也有分享選項

支付寶自定義轉發內容

欄位	型別	必填	描述	最低版本
title	String	是	自定義分享標題	無
desc	String	否	自定義分享描述：由於分享到微博只支援最大長度 140 個字，因此建議長度不要超過該限制。	無
path	String	是	自定義分享頁面的路徑，path中的自定義引數可在小程式生命週期的 onLoad方法中獲取（引數傳遞遵循 http get 的傳參規則）	無
content	String	否	自定義吱口令文案，最多28個字元實際測試無效，諮詢支付寶運營人員說是文字吱口令下線了	1.7.0
imageUrl	String	否	自定義分享小圖 icon 元素，支援：網路圖片路徑；apFilePath 路徑；相對路徑。使用場景詳見下方說明	1.4.0
bgImgUrl	String	否	自定義分享預覽大圖，建議尺寸750x825，支援：網路圖片路徑；apFilePath路徑（客戶端10.1.58版本開始支援）；相對路徑	（客戶端 10.1.58 版本開始支援
success	Function	否	分享成功後回撥	1.4.0
fail	Function	否	分享失敗後回撥	1.4.0

支付寶轉發方式

支付寶轉發方式花樣就比較多了詳情可以參考官方文件

這裡單單提一下分享到微信，當使用者點選微信的時候支付寶會自動將分享圖片存入使用者相簿（此時支付寶還有文案提示告訴你生成了吱口令去微信貼上但是現在並不好使，諮詢運營人員才知道吱口令下線了）

關於動態生成帶有使用者標識的自定義分享圖片的嘗試

因為支付寶分享會自動截圖儲存到相簿中，所以當時思考了一下如果當拉起分享視窗的時候頁面通過顯隱控制的方式，將原本的頁面隱藏將規劃好的個性化分享頁面顯示出來，然後小程式進行截圖儲存，這樣既能生成帶有使用者標識的分享圖片，還能無縫銜接到分享流程中，說幹就幹一頓操作之後在Android手機中測試完美幾乎完美，可以天不遂人願在IOS下失敗了故放棄此方案。

總結

• 支付寶小程式和微信小程式分享API基本相同只是一些細節不太一樣，最大的區別就是微信只能分享到群組或者好友，而支付寶提供了更多的方式
• 遇見問題簡單查查文件如果找不到頭緒首選求助小程式交流群或者運營人員，因為小程式發展太快了有些問題能找到的資源並不多，而且官方文件更新的也不怎麼及時，悶頭踩坑的話有些得不償失。
• 資訊具有實效性本文或者網上的其他文章或者官方文件皆不可全信一切以實踐為準

REF

• 微信小程式之生成圖片分享
• 小程式分享，看這篇就夠了