iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
Modern Web

認識LIFF容易嗎?系列 第 2

[Day02] LIFF SDK

前言

本篇將介紹開始寫程式前,如何將LIFF SDK整合至LIFF APP。

兩種方式嵌入SDK

  • CDN path
  • npm package

CDN path

從 LIFF v2.1.13 後,CDN path 分成兩種路徑,edge 路徑與固定路徑。

CDN edge 路徑

指定主要版本,例如指定v2版本:

https://static.line-scdn.net/liff/edge/2/sdk.js

路徑會自動更新成最新版本的LIFF SDK,除非版本須升級到下個MAJOR,如v3。

CDN 固定路徑

指定至修訂版本,例如指定v2.1.13版本:

https://static.line-scdn.net/liff/edge/versions/2.1.13/sdk.js

相較於指定主要版本,這個方法不會自動更新,所以不會受到LIFF SDK升級的影響。

引用範例

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

留意LIFF SDK是以utf-8為編碼。

npm package

今年7月推出可以用npm安裝的LIFF SDK,可用版本為 v2.3.0 以上,並支援 TypeScript 的型別定義。

  1. 可透過npm或yarn指令安裝
$ npm install --save @line/liff
$ yarn add @line/liff

image

  1. 接著將SDK引用進APP
import liff from '@line/liff';
liff.init({ liffId: 'myLiffId' });

這裡的liffId,即是在註冊LIFF APP取得的LIFFID。

接下來就開始研究LIFF API吧!

參考資料


上一篇
[Day01] 註冊LIFF APP
下一篇
[Day03] LIFF Init 與 URL們
系列文
認識LIFF容易嗎?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言