線上書籍

一、輪播主架構：

1. flex樣版網站
2. 從Showcase，找一個輪播樣版
3. 複製語法
4. flex主架構 //---------------------------------- flex(訂單完成) let messages = [{ "type": "flex", "altText": "訂單完成",//訊息副標題 "contents": flexTemplate() }];

    

二、建立樣版函式

1. 複製
2. 更名為「carouselFlexTemplate()」
3. 將樣版網站複製語法貼上
4. 測試
5. 未來再將需要之「變數」帶入即可
6. 函式 //---------------------------------- flex(商品展示) let messages = [{ "type": "flex", "altText": "商品展示",//訊息副標題 "contents": carouselFlexTemplate() }]; /*============================================ carouselFlexTemplate https://developers.line.biz/flex-simulator/ ============================================*/ function carouselFlexTemplate() { let content = ``; let messages = { "type": "carousel", "contents": [ { "type": "bubble", "size": "micro", "hero": { "type": "image", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip10.jpg", "size": "full", "aspectMode": "cover", "aspectRatio": "320:213" }, "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "Brown Cafe", "weight": "bold", "size": "sm", "wrap": true }, { "type": "box", "layout": "baseline", "contents": [ { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png" }, { "type": "text", "text": "4.0", "size": "xs", "color": "#8c8c8c", "margin": "md", "flex": 0 } ] }, { "type": "box", "layout": "vertical", "contents": [ { "type": "box", "layout": "baseline", "spacing": "sm", "contents": [ { "type": "text", "text": "東京旅行", "wrap": true, "color": "#8c8c8c", "size": "xs", "flex": 5 } ] } ] } ], "spacing": "sm", "paddingAll": "13px" } }, { "type": "bubble", "size": "micro", "hero": { "type": "image", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip11.jpg", "size": "full", "aspectMode": "cover", "aspectRatio": "320:213" }, "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "Brow&Cony's Restaurant", "weight": "bold", "size": "sm", "wrap": true }, { "type": "box", "layout": "baseline", "contents": [ { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png" }, { "type": "text", "text": "4.0", "size": "sm", "color": "#8c8c8c", "margin": "md", "flex": 0 } ] }, { "type": "box", "layout": "vertical", "contents": [ { "type": "box", "layout": "baseline", "spacing": "sm", "contents": [ { "type": "text", "text": "東京旅行", "wrap": true, "color": "#8c8c8c", "size": "xs", "flex": 5 } ] } ] } ], "spacing": "sm", "paddingAll": "13px" } }, { "type": "bubble", "size": "micro", "hero": { "type": "image", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip12.jpg", "size": "full", "aspectMode": "cover", "aspectRatio": "320:213" }, "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "Tata", "weight": "bold", "size": "sm" }, { "type": "box", "layout": "baseline", "contents": [ { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png" }, { "type": "icon", "size": "xs", "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png" }, { "type": "text", "text": "4.0", "size": "sm", "color": "#8c8c8c", "margin": "md", "flex": 0 } ] }, { "type": "box", "layout": "vertical", "contents": [ { "type": "box", "layout": "baseline", "spacing": "sm", "contents": [ { "type": "text", "text": "東京旅行", "wrap": true, "color": "#8c8c8c", "size": "xs", "flex": 5 } ] } ] } ], "spacing": "sm", "paddingAll": "13px" } } ] } return messages; }

    

7.