在開發 Line Bot 時,若有使用到 Flex Message,可能會踩到這個坑。
Android 上正常執行#
我自己本身是 Android 用戶,某次當我在開發一個 Line Bot 應用時,我使用了 Flex Message 如下:
1{
2 "type": "bubble",
3 "body": {
4 "type": "box",
5 "layout": "vertical",
6 "contents": [
7 {
8 "type": "button",
9 "action": {
10 "type": "postback",
11 "label": 1,
12 "data": "hello"
13 }
14 }
15 ]
16 }
17}
後端我是用 Python 製作,在迴圈中我創建了多個如上的按鈕,用來做分頁的換頁功能,所以會顯示「1」、「2」、「3」…
乍看之下似乎沒問題,若你嘗試將這段 json 放到Flex Simulator上執行也會正常顯示,且在 Android 裝置上也能正常看到該 Flex Message 樣板。
iPhone 上出現「錯誤 無法正常執行!」#
奇怪的是,當我在測試 iPhone 裝置時,該模板卻一直造成 iPhone 端的 Line 顯示如下錯誤:
而我的應用上並沒有寫到關於回傳該錯誤的部份,所以這是 Line 那邊傳的…
爬文後發現相關話題幾乎沒有人在討論(?)
自己逐步測試後,才發現問題。
Android 與 iPhone 在解析時遇到問題的呈現方式不同#
直接說上述的 flex message 問題,其實是在於那顆按鈕的label
屬性只能是String型態。
改成這樣後就正常了:
1{
2 "type": "button",
3 "action": {
4 "type": "postback",
5 "label": "1",
6 "data": "hello"
7 }
8}
Line 的 Flex Message 其實不在意該問題;
而傳送至客戶端後,Android 會選擇忽略該問題,仍會正常顯示;
但 iPhone 則是選擇直接顯示錯誤…
所以這到底算不算錯誤呢… 只能說是平台方型態沒有定義嚴格會衍生的狀況。
其他可能狀況#
爬文時,只有找到一篇 Facebook 上的貼文在討論,但似乎問題是出在圖片路徑有中文導致的:https://www.facebook.com/groups/linebot/posts/2798380053825896/