步驟01：官方模擬器
網址：﹝https://developers.line.biz/flex-simulator/?status=success﹞
步驟02：可點擊﹝Showcase﹞其他模版
步驟03：任選合適的，點﹝Create﹞
步驟04：想修改圖片
點﹝hero﹞>﹝image﹞> ﹝url﹞>可修改比例
步驟05：往下滑，如果圖片不想要有效果，在type改為﹝空白﹞
步驟06：變更標題名稱
點﹝box﹞>﹝text﹞> ﹝輸入﹞
步驟07：如果還想增加文字，點﹝text﹞> ﹝+號﹞> ﹝span﹞
步驟08：Span在text修改內容
步驟09：點﹝text群組﹞ ，點﹝+號﹞> ﹝span﹞
步驟10：Span在text修改內容
步驟11：Size可修改字體大小
步驟12：想將4星改為5星的話
步驟13：點﹝icon﹞>﹝複製﹞
步驟14：點﹝box群組﹞>﹝貼上﹞
步驟15：點﹝icon﹞> ﹝往上移動﹞
步驟16：把最後一顆星星刪除，點﹝icon﹞> ﹝X﹞
步驟17：Box刪除掉，來自定功能
步驟18：點﹝+號﹞>新增﹝box﹞
步驟19：可在layout﹝改為水平﹞
步驟20：點﹝Box﹞>點﹝+號﹞> ﹝Button﹞
步驟21：針對按鈕進行修改
步驟22：可以發現，2個按鈕擠在一起，可以在margin修改
步驟23：令一顆按鈕也是
步驟24：設計完成之後，點﹝View as JSON﹞查看程式碼
步驟25：點﹝Copy﹞複製
| { "type": "bubble", "hero": { "type": "image", "url": "https://pic.pimg.tw/ccplus2561/1755010008-2120985222-g_q.png", "size": "full", "aspectRatio": "20:13", "aspectMode": "cover" }, "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "程式創造++", "weight": "bold", "size": "xl", "contents": [ { "type": "span", "text": "程式創造++" }, { "type": "span", "text": " @CCplus2561", "size": "md", "weight": "regular", "style": "italic" } ] }, { "type": "box", "layout": "baseline", "margin": "md", "contents": [ { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" }, { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" }, { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" }, { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" }, { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" }, { "type": "text", "text": "5.0", "size": "sm", "color": "#999999", "margin": "md", "flex": 0 } ] }, { "type": "box", "layout": "vertical", "margin": "lg", "spacing": "sm", "contents": [ { "type": "box", "layout": "baseline", "spacing": "sm", "contents": [ { "type": "text", "text": "連結：", "color": "#aaaaaa", "size": "sm", "flex": 1 }, { "type": "text", "text": "youtube.com/@CCplus2561", "wrap": true, "color": "#666666", "size": "sm", "flex": 5 } ] } ] } ] }, "footer": { "type": "box", "layout": "horizontal", "contents": [ { "type": "button", "action": { "type": "uri", "label": "YouTube", "uri": "https://www.youtube.com/@CCplus2561" }, "style": "primary", "margin": "md" }, { "type": "button", "action": { "type": "uri", "label": "Pixnet", "uri": "https://ccplus2561.pixnet.net/blog" }, "style": "secondary", "margin": "md" } ] } } |
步驟26：想測試看看目前效果，可以點﹝Send..﹞分享
步驟26：﹝選擇發送人﹞>﹝Send﹞發送
步驟27：官方就會發送一則給你測試
步驟28：再來可直接貼上，運行
步驟29：在運行之前，先將 真，假改為大寫，快捷建﹝Ctrl+F﹞搜尋> ﹝true改為True ﹞
提示：如果是false也要改為False
[範本程式碼]
|
from flask import Flask, request, abort
from linebot.v3 import (
WebhookHandler
)
from linebot.v3.exceptions import (
InvalidSignatureError
)
from linebot.v3.messaging import (
Configuration,
ApiClient,
MessagingApi,
ReplyMessageRequest,
TextMessage,
FlexMessage,
FlexBubble,
FlexImage,
FlexMessage,
FlexBox,
FlexText,
FlexIcon,
FlexButton,
FlexSeparator,
FlexContainer,
URIAction
)
from linebot.v3.webhooks import (
MessageEvent,
TextMessageContent
)
import json
app = Flask(__name__)
configuration = Configuration(access_token='填入你的Configuration')
handler = WebhookHandler('填入你的WebhookHandler')
@app.route("/callback", methods=['POST'])
def callback():
# get X-Line-Signature header value
signature = request.headers['X-Line-Signature']
# get request body as text
body = request.get_data(as_text=True)
app.logger.info("Request body: " + body)
# handle webhook body
try:
handler.handle(body, signature)
except InvalidSignatureError:
app.logger.info("Invalid signature. Please check your channel access token/channel secret.")
abort(400)
return 'OK'
@handler.add(MessageEvent, message=TextMessageContent)
def handle_message(event):
text = event.message.text
with ApiClient(configuration) as api_client:
line_bot_api = MessagingApi(api_client)
if text == '自訂化訊息':
line_flex_json =
# 貼上JSON程式碼
line_flex_str = json.dumps(line_flex_json)
line_bot_api.reply_message(
ReplyMessageRequest(
reply_token=event.reply_token,
messages=[FlexMessage(alt_text='詳細說明', contents=FlexContainer.from_json(line_flex_str))]
)
)
else:
line_bot_api.reply_message(
ReplyMessageRequest(
reply_token=event.reply_token,
messages=[TextMessage(text=event.message.text)]
)
[完整程式碼]
|
[完整程式碼]
|
from flask import Flask, request, abort
from linebot.v3 import (
WebhookHandler
)
from linebot.v3.exceptions import (
InvalidSignatureError
)
from linebot.v3.messaging import (
Configuration,
ApiClient,
MessagingApi,
ReplyMessageRequest,
TextMessage,
FlexMessage,
FlexBubble,
FlexImage,
FlexMessage,
FlexBox,
FlexText,
FlexIcon,
FlexButton,
FlexSeparator,
FlexContainer,
URIAction
)
from linebot.v3.webhooks import (
MessageEvent,
TextMessageContent
)
import json
app = Flask(__name__)
configuration = Configuration(access_token='填入你的Configuration')
handler = WebhookHandler('填入你的WebhookHandler')
@app.route("/callback", methods=['POST'])
def callback():
# get X-Line-Signature header value
signature = request.headers['X-Line-Signature']
# get request body as text
body = request.get_data(as_text=True)
app.logger.info("Request body: " + body)
# handle webhook body
try:
handler.handle(body, signature)
except InvalidSignatureError:
app.logger.info("Invalid signature. Please check your channel access token/channel secret.")
abort(400)
return 'OK'
@handler.add(MessageEvent, message=TextMessageContent)
def handle_message(event):
text = event.message.text
with ApiClient(configuration) as api_client:
line_bot_api = MessagingApi(api_client)
if text == '自訂化訊息':
line_flex_json = {
"type": "bubble",
"hero": {
"type": "image",
"url": "https://pic.pimg.tw/ccplus2561/1755010008-2120985222-g_q.png",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover"
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "程式創造++",
"weight": "bold",
"size": "xl",
"contents": [
{
"type": "span",
"text": "程式創造++"
},
{
"type": "span",
"text": " @CCplus2561",
"size": "md",
"weight": "regular",
"style": "italic"
}
]
},
{
"type": "box",
"layout": "baseline",
"margin": "md",
"contents": [
{
"type": "icon",
"size": "sm",
"url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png"
},
{
"type": "text",
"text": "5.0",
"size": "sm",
"color": "#999999",
"margin": "md",
"flex": 0
}
]
},
{
"type": "box",
"layout": "vertical",
"margin": "lg",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "連結：",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "youtube.com/@CCplus2561",
"wrap": True,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
}
]
}
]
},
"footer": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "button",
"action": {
"type": "uri",
"label": "YouTube",
"uri": "https://www.youtube.com/@CCplus2561"
},
"style": "primary",
"margin": "md"
},
{
"type": "button",
"action": {
"type": "uri",
"label": "Pixnet",
"uri": "https://ccplus2561.pixnet.net/blog"
},
"style": "secondary",
"margin": "md"
}
]
}
}
line_flex_str = json.dumps(line_flex_json)
line_bot_api.reply_message(
ReplyMessageRequest(
reply_token=event.reply_token,
messages=[FlexMessage(alt_text='詳細說明', contents=FlexContainer.from_json(line_flex_str))]
)
)
else:
line_bot_api.reply_message(
ReplyMessageRequest(
reply_token=event.reply_token,
messages=[TextMessage(text=event.message.text)]
)
)
|
請先 登入 以發表留言。