Line LIFF

2022/06/13

LIFF

Line frontend framework

為Line Webview的專用SDK

可於LIFF模式下使用一些特殊功能或取得特定資料

設定

Endpoint URL: LIFF網頁網址
Size: 依照需求可自行設定以下三種尺寸
- Full
- Tall
- Compact
Scopes: 權限, 若有需要傳送訊息必須啟用

LIFF與一般Webview的差異

LIFF是設定一個指定網頁的網址

例如LIFF URL為https://liff.line.me/123ABC

指向的網址為https://foobar.com

即使最後導向的都是同一個網址

但用LIFF開頭的網址(liff.line.me)在Line訊息中開啟

才會啟用LIFF模式

若直接點擊同樣的目標網址(https://foobar.com)

Line只會以一般Webview模式開啟

在一般Webview模式下

將無法使用特殊的LIFF功能(例如取得accessToken、QR Code掃描、發送訊息)

安裝

可直接使用CDN載入

<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

或是使用yarn安裝透過ES Module載入

yarn add @line/liff

import liff from '@line/liff'

init

參考文件

需要設定LIFF ID(可在Line Developer Console的LIFF設定中取得)

liff.init({
  liffId: 'your-liff-id',
})

常用功能

getProfile

取得user資訊(userId, username、頭像url)

scanCode

此method將回傳一個Promise

可開啟Line Camera Scanner

掃描後將可取得值(目前測試僅能掃描網址類型的QR Code)

sendMessages

需要帶入Message Object陣列參數

import liff from '@line/liff'
export default {
  async sendMessage() {
    try {
      await liff.sendMessages([
        {
          type: 'text',
          text: 'message',
        },
      ])
    } catch (error) {
      console.warn(error)
    }
  },
}

shareTargetPicker

此method為使用Line的"選擇傳送對象"

參數一樣要帶入Message Object陣列參數來設定要分享的訊息

import liff from '@line/liff'
export default {
  async share() {
    try {
      await liff.shareTargetPicker([
        {
          type: 'text',
          text: 'Hello, World!',
        },
        {
          type: 'template',
          altText: 'text',
          template: {
            type: 'buttons',
            thumbnailImageUrl: 'https://foobar.com/foobar.jpg',
            title: 'title...',
            text: 'text...',
            actions: [
              {
                type: 'uri',
                label: 'https://foobar.com',
                uri: this.url,
              }
            ],
          },
        },
      ])
    } catch (error) {
      console.warn(error)
    }
  },
}

closeWindow

關閉視窗

openWindow

另開外部視窗(非Line Webview)