iT邦幫忙

0

用 Python 暢玩 Line bot - 14:Flex Message(一)

  • 分享至 

  • xImage
  •  

有些非官方 line bot 會有像(圖一)的 message,讓使用者可以有較彈性的方式去使用該 bot,或是讓 line bot 可以更多元的宣傳自身的功能。

(圖一)

而這類型的 message 叫做 Flex message,Line 官方有提供一個FLEX MESSAGE SIMULATOR讓使用者可以以圖形化介面的方式來製作,接下來會介紹這個模擬器。

首先,最要注意的事情是,這個模擬器並不會幫你自動存檔,所以如果沒有一次做完,在關掉前可以找到 View as JSON 將 JSON 檔給複製下來備份。

FLEX MESSAGE SIMULATOR 分為兩種類型:bubble 和 carousel,bubble 是像(圖一)單一個區塊,carousel則是如(圖二),會有多個區塊並列。

(圖二)

bubble

bubble 分為四個結構:header、hero、body、footer,我們現在就由上往下來一一介紹。統一都有的部分則是在下章會一併介紹。

(圖三)

bubble

bubble 的參數調整會對整個區塊造成影響
direction(內容的置左置右):

參數:ltr(置左)、rtl(置右)

size(整個 bubble 的寬度):

參數:giga、mega(預設)、kilo、micro、nano

action(點選到該 bubble 執行的動作,不會與後續其他部分的 action 重疊):

參數:postback、uri、message、datetimepicker

header

主要用來放置整個區塊的標題
backgroundColor 和 separatorColor 的顏色需要輸入 16進位的色碼才能使用,不過需要在該區段增加 box 才看的出來它的作用。separator 則是跟下一個區段的分隔線。

hero

這個區段可以放置 text 或 image,可以用來放置整個區塊的描述。

body

這個區段可以放置 box、image、text、button、filler、separator,可以用來放置這區塊的內容或是選項。

footer

這個區段可以放置 box、image、text、button、filler、separator,可以用來放置頁尾資訊。
(圖四)

(圖五 各區段的 action 不會互相衝突)
https://ithelp.ithome.com.tw/upload/images/20211019/201425641nZxWkCsHM.png


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言