切换图文选单

延伸“建立图文选单”文章，LINE 可以设定“多组”图文选单，每一组之间都可透过指令切换 ( 有点类似切换网页选单的概念 )，这篇教学会介绍如何设定多组图文选单、设定图文选单别名 Alias ID，以及切换不同的图文选单。

建议先阅读：建立图文选单

设定图文选单 A

下载图文选单 A 的范例图片，将图片放在与 Colab 程序同样的云端文件夹里。

选单 A 图片：下载

使用 Colab 打开新的程序码，使用下方的程序，输入自己的 access token，设定第一个图文选单 ( 选单 A ) 的内容，设定的重点如下：

• name 设定为 aaa，表示别名 Alias Id。
• 默认有三个按钮，第一个链接到选单 A 按钮行为设定为 postback，点击后会在背后送出 postback，不会有显示的反应。
• 链接到选单 B 和 C 的按钮，设定为 richmenuswitch，richMenuAliasId 设定为 bbb 和 ccc。

import requests, json
headers = {'Authorization':'Bearer 你的 access token','Content-Type':'application/json'}

body = {
    'size': {'width': 2500, 'height': 1200},   # 設定尺寸
    'selected': 'true',                        # 預設是否顯示
    'name': 'aaa',                             # 選單名稱 ( 別名 Alias Id )
    'chatBarText': '選單 A',                    # 選單在 LINE 顯示的標題
    'areas':[                                  # 選單內容
        {
          'bounds': {'x': 0, 'y': 0, 'width': 830, 'height': 280},
          'action': {'type': 'postback', 'data':'no-data'}          # 按鈕 A 使用 postback
        },
        {
          'bounds': {'x': 835, 'y': 0, 'width':830, 'height': 640},
          'action': {'type': 'richmenuswitch', 'richMenuAliasId': 'bbb', 'data':'change-to-bbb'} # 按鈕 B 使用 richmenuswitch
        },
        {
          'bounds': {'x': 1670, 'y': 0, 'width':830, 'height': 640},
          'action': {'type': 'richmenuswitch', 'richMenuAliasId': 'ccc', 'data':'change-to-ccc'} # 按鈕 C 使用 richmenuswitch
        }
    ]
  }
req = requests.request('POST', 'https://api.line.me/v2/bot/richmenu',
                      headers=headers,data=json.dumps(body).encode('utf-8'))
print(req.text)

上方程序码执行后，会得到图文选单 A 的 id，将 id、图片在云端硬盘中的位址、access token 填入下方程序码，执行后就会将图片与图文选单绑定

from linebot import LineBotApi, WebhookHandler
line_bot_api = LineBotApi('你的 access token')
with open("/content/drive/MyDrive/Colab Notebooks/line-rich-menu-switch-demo-a.jpg", 'rb') as f:
    line_bot_api.set_rich_menu_image("圖文選單 id", "image/jpeg", f)

最后执行下方程序码，将图文选单 id 和别名 Alias id 绑定。

import requests
import json
headers = {'Authorization':'Bearer 你的 access token','Content-Type':'application/json'}
body = {
    "richMenuAliasId":"aaa",
    "richMenuId":"圖文選單 id"
}
req = requests.request('POST', 'https://api.line.me/v2/bot/richmenu/alias',
                      headers=headers,data=json.dumps(body).encode('utf-8'))
print(req.text)

最后执行下方程序码，将图文选单传送到对应的 LINE 机器人。

import requests
headers = {"Authorization":"Bearer 你的 access token","Content-Type":"application/json"}
req = requests.request('POST', 'https://api.line.me/v2/bot/user/all/richmenu/圖文選單 id', headers=headers)
print(req.text)

设定图文选单 B

下载图文选单 B 的范例图片，将图片放在与 Colab 程序同样的云端文件夹里。

选单 B 图片：下载

使用 Colab 打开新的程序码，使用下方的程序，输入自己的 access token，设定第一个图文选单 ( 选单 B ) 的内容，设定的重点如下：

• name 设定为 bbb，表示别名 Alias Id。
• 默认有三个按钮，第二个链接到选单 B 按钮行为设定为 postback，点击后会在背后送出 postback，不会有显示的反应。
• 链接到选单 A 和 C 的按钮，设定为 richmenuswitch，richMenuAliasId 设定为 aaa 和 ccc。

import requests, json
headers = {'Authorization':'Bearer 你的 access token','Content-Type':'application/json'}

body = {
    'size': {'width': 2500, 'height': 1200},   # 設定尺寸
    'selected': 'true',                        # 預設是否顯示
    'name': 'bbb',                             # 選單名稱 ( 別名 Alias Id )
    'chatBarText': '選單 B',                    # 選單在 LINE 顯示的標題
    'areas':[                                  # 選單內容
        {
          'bounds': {'x': 0, 'y': 0, 'width': 830, 'height': 280},
          'action': {'type': 'richmenuswitch', 'richMenuAliasId': 'aaa', 'data':'change-to-aaa'} # 按鈕 A 使用 richmenuswitch
        },
        {
          'bounds': {'x': 835, 'y': 0, 'width':830, 'height': 640},
          'action': {'type': 'postback', 'data':'no-data'}          # 按鈕 B 使用 postback
        },
        {
          'bounds': {'x': 1670, 'y': 0, 'width':830, 'height': 640},
          'action': {'type': 'richmenuswitch', 'richMenuAliasId': 'ccc', 'data':'change-to-ccc'} # 按鈕 C 使用 richmenuswitch
        }
    ]
  }
req = requests.request('POST', 'https://api.line.me/v2/bot/richmenu',
                      headers=headers,data=json.dumps(body).encode('utf-8'))
print(req.text)

上方程序码执行后，会得到图文选单 B 的 id，将 id、图片在云端硬盘中的位址、access token 填入下方程序码，执行后就会将图片与图文选单绑定

from linebot import LineBotApi, WebhookHandler
line_bot_api = LineBotApi('你的 access token')
with open("/content/drive/MyDrive/Colab Notebooks/line-rich-menu-switch-demo-b.jpg", 'rb') as f:
    line_bot_api.set_rich_menu_image("圖文選單 id", "image/jpeg", f)

最后执行下方程序码，将图文选单 id 和别名 Alias id 绑定。

import requests
import json
headers = {'Authorization':'Bearer 你的 access token','Content-Type':'application/json'}
body = {
    "richMenuAliasId":"bbb",
    "richMenuId":"圖文選單 id"
}
req = requests.request('POST', 'https://api.line.me/v2/bot/richmenu/alias',
                      headers=headers,data=json.dumps(body).encode('utf-8'))
print(req.text)

执行下方程序码，将图文选单传送到对应的 LINE 机器人。

import requests
headers = {"Authorization":"Bearer 你的 access token","Content-Type":"application/json"}
req = requests.request('POST', 'https://api.line.me/v2/bot/user/all/richmenu/圖文選單 id', headers=headers)
print(req.text)

设定图文选单 C

下载图文选单 C 的范例图片，将图片放在与 Colab 程序同样的云端文件夹里。

选单 C 图片：下载

使用 Colab 打开新的程序码，使用下方的程序，输入自己的 access token，设定第一个图文选单 ( 选单 C ) 的内容，设定的重点如下：

• name 设定为 bbb，表示别名 Alias Id。
• 默认有三个按钮，第三个链接到选单 C 按钮行为设定为 postback，点击后会在背后送出 postback，不会有显示的反应。
• 链接到选单 A 和 B 的按钮，设定为 richmenuswitch，richMenuAliasId 设定为 aaa 和 bbb。

import requests, json
headers = {'Authorization':'Bearer 你的 access token','Content-Type':'application/json'}

body = {
    'size': {'width': 2500, 'height': 1200},   # 設定尺寸
    'selected': 'true',                        # 預設是否顯示
    'name': 'ccc',                             # 選單名稱 ( 別名 Alias Id )
    'chatBarText': '選單 C',                    # 選單在 LINE 顯示的標題
    'areas':[                                  # 選單內容
        {
          'bounds': {'x': 0, 'y': 0, 'width': 830, 'height': 280},
          'action': {'type': 'richmenuswitch', 'richMenuAliasId': 'aaa', 'data':'change-to-aaa'} # 按鈕 A 使用 richmenuswitch
        },
        {
          'bounds': {'x': 835, 'y': 0, 'width':830, 'height': 640},
          'action': {'type': 'richmenuswitch', 'richMenuAliasId': 'bbb', 'data':'change-to-ccc'} # 按鈕 B 使用 richmenuswitch
        },
        {
          'bounds': {'x': 1670, 'y': 0, 'width':830, 'height': 640},
          'action': {'type': 'postback', 'data':'no-data'}          # 按鈕 C 使用 postback
        }
    ]
  }
req = requests.request('POST', 'https://api.line.me/v2/bot/richmenu',
                      headers=headers,data=json.dumps(body).encode('utf-8'))
print(req.text)

上方程序码执行后，会得到图文选单 C 的 id，将 id、图片在云端硬盘中的位址、access token 填入下方程序码，执行后就会将图片与图文选单绑定

from linebot import LineBotApi, WebhookHandler
line_bot_api = LineBotApi('你的 access token')
with open("/content/drive/MyDrive/Colab Notebooks/line-rich-menu-switch-demo-c.jpg", 'rb') as f:
    line_bot_api.set_rich_menu_image("圖文選單 id", "image/jpeg", f)

最后执行下方程序码，将图文选单 id 和别名 Alias id 绑定。

import requests
import json
headers = {'Authorization':'Bearer 你的 access token','Content-Type':'application/json'}
body = {
    "richMenuAliasId":"ccc",
    "richMenuId":"圖文選單 id"
}
req = requests.request('POST', 'https://api.line.me/v2/bot/richmenu/alias',
                      headers=headers,data=json.dumps(body).encode('utf-8'))
print(req.text)

执行下方程序码，将图文选单传送到对应的 LINE 机器人。

import requests
headers = {"Authorization":"Bearer 你的 access token","Content-Type":"application/json"}
req = requests.request('POST', 'https://api.line.me/v2/bot/user/all/richmenu/圖文選單 id', headers=headers)
print(req.text)

执行结果

三个选单都完成后，打开 LINE 机器人，在对话视窗的下方就会出现图文选单，点击按钮就能切换图文选单。

意见反馈