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

今年最令人期待功能之一 “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