微信公衆号之底部菜單

文章目錄

• 簡介
• 代碼
• 其他的按鈕類型

專欄目錄請點選

簡介

1. 我們可以觀看官網的介紹 點選
2. 他的核心是，我們需要調微信的api來進行建立菜單，且菜單的參數，在官網的例子中已經給出
   1. 調用的接口為 https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
   2. 他是一個

      post

      請求，參數放在請求體中(

      body

      )
   3. 參數如下

{
     "button":[
     {	
          "type":"click",
          "name":"今日歌曲",
          "key":"V1001_TODAY_MUSIC"
      },
      {
           "name":"菜單",
           "sub_button":[
           {	
               "type":"view",
               "name":"搜尋",
               "url":"http://www.soso.com/"
            },
            {
                 "type":"miniprogram",
                 "name":"wxa",
                 "url":"http://mp.weixin.qq.com",
                 "appid":"wx286b93c14bbf93aa",
                 "pagepath":"pages/lunar/index"
             },
            {
               "type":"click",
               "name":"贊一下我們",
               "key":"V1001_GOOD"
            }]
       }]
 }
           

在這個參數中，他既有一級菜單，也有二級菜單，并且也有不同功能的按鈕

代碼

1. 我們使用一個檔案來儲存我們定義的按鈕，我們就把它叫做

   menu.js

   ，把他放在

   wechat

   檔案夾下
2. 寫上如下代碼，我們先寫一個簡單的菜單

module.exports = {
    "button": [
        {
            "type": "click",
            "name": "今日歌曲",
            "key": "V1001_TODAY_MUSIC"
        },
        {
            "name": "菜單",
            "sub_button": [
                {
                    "type": "view",
                    "name": "搜尋",
                    "url": "http://www.soso.com/"
                }]
        }]
}
           

1. 我們可以觀看我們調用的接口，我們會發現他需要

   ACCESS_TOKEN

   ，是以我們把請求的放到了擷取

   ACCESS_TOKEN

   的

   WeChat

   類中
2. 我們在

   libs

   檔案夾下建立一個

   api.js

   的檔案，專門用來管理接口，并寫上如下的内容

   

const prefix = "htps://api.weixin.qq.com/cgi-bin/"

module.exports = {
    menu:{
        // 建立菜單 https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html
        create:prefix + "menu/create?",
        // 删除菜單 https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Deleting_Custom-Defined_Menu.html
        delete:prefix +'menu/delete?',
        // 擷取菜單 https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Querying_Custom_Menus.html
        get:prefix +'menu/get?',
        // 個性化菜單相關
    }
}
           

1. 他包括，建立菜單的方法，删除菜單的方法等，我們先寫一個建立和删除的方法，并進行測試

class WeChat {
	// ...

    createMenu(body) {
        // 建立菜單
        return new Promise(async (resolve, reject) => {
            try {
                const { access_token } = await this.fetchAccessToken()
                const url = `${api.menu.create}access_token=${access_token}`
                const res = await rp({ method: "POST", json: true, url, body }) // 請求資料
                resolve(res)
            } catch (error) {
                reject(`createMenu方法處理問題${error}`);
            }
        })
    }

    deleteMenu() {
        return new Promise(async (resolve, reject) => {
            try {
                const { access_token } = await this.fetchAccessToken()
                const url = `${api.menu.delete}access_token=${access_token}`
                const res = rp({ method: "GET", json: true, url })
                resolve(res)
            } catch (error) {
                reject(`deleteMenu方法處理問題${error}`)
            }
        })
    }
}
           

1. 上面的方法是菜單删除和建立的函數，我們測試一下這兩個函數，于是我們在目前檔案下寫一個

   立即執行函數

// 進行測試
(async () => {
    const weChatApi = new WeChat()
    let data = await weChatApi.deleteMenu()
    console.log(data)
    data = await weChatApi.createMenu(menu)
    console.log(data)
})()
           

1. 執行目前的js檔案，如果沒有報錯，那麼就是建立成功了，過兩三分鐘，可以看一下我們的公衆号，發現底部已經有按鈕了

   

其他的按鈕類型

• 通過微信官網，我們可以發現微信提供的按鈕類型有多種 點選，一共有12種菜單
• 同時，我們一定注意不同中的按鈕的相容性