1. 程式人生 > >微信小程式分享開發

微信小程式分享開發

Page.onShareAppMessage(Object)

在 Page 中定義 onShareAppMessage 事件處理函式,自定義該頁面的轉發內容。

onShareAppMessage(Object)

監聽使用者點選頁面內轉發按鈕(<button> 元件 open-type="share")或右上角選單“轉發”按鈕的行為,並自定義轉發內容。

注意:只有定義了此事件處理函式,右上角選單才會顯示“轉發”按鈕

Object 引數說明:

引數 型別 說明 最低版本
from String 轉發事件來源。
button:頁面內轉發按鈕;
menu:右上角轉發選單
1.2.4
target Object 如果 from 值是 button,則 target 是觸發這次轉發事件的 button,否則為 undefined 1.2.4
webViewUrl String 頁面中包含<web-view>
元件時,返回當前<web-view>的url
1.6.4

此事件需要 return 一個 Object,用於自定義轉發內容,返回內容如下:

自定義轉發內容

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

示例程式碼

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123'
    }
  }
})

wx.showShareMenu(OBJECT)

顯示當前頁面的轉發按鈕

OBJECT引數說明:

引數 型別 必填 說明
withShareTicket Boolean 是否使用帶 shareTicket 的轉發
success Function 介面呼叫成功的回撥函式
fail Function 介面呼叫失敗的回撥函式
complete Function 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行)

示例程式碼:

wx.showShareMenu({
  withShareTicket: true
})

wx.hideShareMenu(OBJECT)

隱藏轉發按鈕

OBJECT引數說明:

引數 型別 必填 說明
success Function 介面呼叫成功的回撥函式
fail Function 介面呼叫失敗的回撥函式
complete Function 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行)

示例程式碼:

wx.hideShareMenu()

wx.updateShareMenu(OBJECT)

更新轉發屬性

OBJECT引數說明:

引數 型別 必填 說明
withShareTicket Boolean 是否使用帶 shareTicket 的轉發
success Function 介面呼叫成功的回撥函式
fail Function 介面呼叫失敗的回撥函式
complete Function 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行)

示例程式碼:

wx.updateShareMenu({
  withShareTicket: true,
  success() {
  }
})

wx.getShareInfo(OBJECT)

獲取轉發詳細資訊

OBJECT引數說明:

引數 型別 必填 說明 最低版本
shareTicket String shareTicket
timeout Number 超時時間,單位 ms
success Function 介面呼叫成功的回撥函式
fail Function 介面呼叫失敗的回撥函式
complete Function 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行)

CALLBACK 引數說明:

引數 型別 說明
errMsg String 錯誤資訊
encryptedData String 包括敏感資料在內的完整轉發資訊的加密資料
iv String 加密演算法的初始向量

encryptedData 解密後為一個 JSON 結構,包含欄位如下:

欄位 說明
openGId 群對當前小程式的唯一 ID

獲取更多轉發資訊

通常開發者希望轉發出去的小程式被二次開啟的時候能夠獲取到一些資訊,例如群的標識。現在通過呼叫 wx.showShareMenu 並且設定 withShareTickettrue ,當用戶將小程式轉發到任一群聊之後,此轉發卡片在群聊中被其他使用者開啟時,可以在 App.onLaunch()App.onShow 獲取到一個 shareTicket。通過呼叫 wx.getShareInfo() 介面傳入此 shareTicket 可以獲取到轉發資訊。

頁面內發起轉發

通過給 button 元件設定屬性 open-type="share",可以在使用者點選按鈕後觸發 Page.onShareAppMessage() 事件,如果當前頁面沒有定義此事件,則點選後無效果。相關元件:button

使用指引

轉發按鈕,旨在幫助使用者更流暢地與好友分享內容和服務。轉發,應是使用者自發的行為,且在需要時觸手可及。開發者在使用時若遵從以下指引,會得到更佳的使用者體驗。

  1. 含義清晰:明確、一目瞭然的圖形按鈕,將為使用者減少理解的時間。在我們的資源下載中心,你可以找到這樣的按鈕素材並直接使用。或者你可以根據自己業務的設計風格,靈活設計含義清晰的按鈕的樣式。當然,你也可以直接使用帶文案的按鈕,“轉發給好友”,它也足夠明確。
  2. 方便點選:按鈕點選熱區不宜過小,亦不宜過大。同時,轉發按鈕與其他按鈕一樣,熱區也不宜過密,以免使用者誤操作。
  3. 按需出現:並非所有頁面都適合放置轉發按鈕,涉及使用者隱私的非公開內容,或可能打斷使用者完成當前操作體驗的場景,該功能並不推薦使用。同時,由於轉發過程中,我們將擷取使用者螢幕影象作為配圖,因此,需要注意幫助使用者遮蔽個人資訊。
  4. 尊重意願:理所當然,並非所有的使用者,都喜歡與朋友分享你的小程式。因此,它不應該成為一個誘導或強制行為,如轉發後才能解鎖某項功能等。請注意,這類做法不僅不被推薦,還可能違反我們的《運營規範》,我們強烈建議你在使用前閱讀這部分內容。

以上,我們陳列了最重要的幾點,如果你有時間,可以完整瀏覽《設計指南》,相信會有更多的收穫。

Bug & Tip

  1. tip: 不自定義轉發圖片的情況下,預設會取當前頁面,從頂部開始,高度為 80% 螢幕寬度的影象作為轉發圖片。
  2. tip: 轉發的除錯支援請檢視 普通轉發的除錯支援帶 shareTicket 的轉發
  3. tip: 只有轉發到群聊中開啟才可以獲取到 shareTickets 返回值,單聊沒有 shareTickets
  4. tip: shareTicket 僅在當前小程式生命週期內有效
  5. tip: 由於策略變動,小程式群相關能力進行調整,開發者可先使用wx.getShareInfo介面中的群ID進行功能開發。