本篇文章為翻譯文章：原文(泰文）

今年最令人期待功能之一 “Share Target Picker” 自從 LINE 開發團隊於 2019 年底的 LINE Developer Day 公布了這個功能之後，終於發布了。它允許您從 LIFF 分享不同類型的消息給您的朋友或群組。

自 LIFF v1 時代以來透過 liff.sendMessages（） 將消息發送回聊天室（以用戶的名義）或的功能，僅打開該LIFF的聊天室。

不少開發者建議 LINE 增加 LIFF 與朋友或群組分享消息的能力。這就是 liff.shareTargetPicker（）。

開發前需要了解的五件事

從 10.3.0 版開始，LINE App 將支持 “Share Target Picker” 。 (註解：如果在外部瀏覽器，則不需要等待 LINE App 更新）
“Share Target Picker” 僅在 LIFF v2 中可用。
來自 “Share Target Picker” 的消息將代表用戶發送。（就像我們向朋友發送消息一樣）
純文字，圖像，視頻，音頻，位置，Template Message（僅URI操作）和Flex消息是可以通過 “Share Target Picker” 發送的消息。
可以在外部瀏覽器中使用 “Share Target Picker” ，但必須先使用LINE Login 進行身份驗證

開始做吧

Share Target Picker 的開發過程並不複雜，但是讀者需要仔細閱讀下面文章中的步驟。關於建立 LIFF App 的相關參考，可以參考文章：在 LIFF v2 中如何取得用戶電子郵件的解決方案（泰文）

建立好 LIFF App 之後，請在我們建立的 “Login Channel” 中選擇名為 LIFF 的標籤。您會看到有一個選項可以啟用 “Share Target Picker” ，點擊後會有使用者條款需要開發者們先閱讀並接受。接下來，這個 channel 中的所有 LIFF App 會開啟這個功能。

這次，讓我們進入程式碼部分。使用命令 liff.init（） 初始化 LIFF 後，必須以下兩種情況下登入。

如果僅在 LINE 中支持 LIFF ，則無需執行任何操作，因為在 LINE 中打開LIFF會自動登入。
如果支持外部瀏覽器，請首先呼叫liff.login（）。

// 要在 LINE 和外部瀏覽器中都支持 LIFF，請依照以下方式
await liff.init（ {liffId：“ YOUR-LIFF-ID”} ）
if（liff.isLoggedIn（））{ 
  //已經登入
}} else { 
  liff.login（）
 }

接下來，我們透過呼叫 “Share Target Picker” liff.shareTargetPicker（）來傳送訊息，最多可以對目標傳送五個的消息。

//發送兩個訊息
await liff.shareTargetPicker（ [ 
  {
     “ type”：“ text”，
    “ text”：“ Hello World！” 
  }，
  {
     “ type”：“ text”，
    “ text”： “Messages from Share Target Picker” 
  }
 ] ）

完成。

但為了更好地理解，以下有完整的程式碼以備使用。

從上面的程式碼中，一打開 LIFF 首先透過liff.isLoggedIn（）來檢查用戶是否登入。如果

未登入：將顯示“登入”按鈕（僅在從外部瀏覽器啟用 LIFF 的情況下才會發生）。
登入：將顯示 “Share Target Picker” 按鈕和 “Logout” 按鈕，並附帶一些其他條件。如果使用者從外部瀏覽器打開，透過檢查是否使用命令打開 LINE 應用程序。liff.isInclient（）來確定是否顯示 “Logout”按鈕 (僅顯示在外部瀏覽器)。

對於分享消息來說，我認為純文字訊息不是挑戰，但是能為朋友和群組共享 Flex Message 應該更加令人興奮。

總結

“Share Target Picker” 很簡單對嗎？那什麼時候該使用呢? 可以說這是一筆非常值得的投資。很快地想到了幾個應用場景，例如我們開發票卷預訂系統的時候，當用戶購買五張門票並希望與朋友分享時，然後可以 Flex Message 與朋友共享票卷資訊（包括 QR code) ，而不必截圖。這麼一來將會非常方便。希望開發者們有一些使用 “Share Target Picker” 想法，並使 LINE 更容易使用。

#LIFF #LINE #LINE Frontend Framework #Share Target Picker

開發前需要了解的五件事

開始做吧

總結

Related Posts