微信公众号之底部菜单

专栏目录请点击

简介

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/"
                }]
        }]
}

3. 我们可以观看我们调用的接口，我们会发现他需要ACCESS_TOKEN，所以我们把请求的放到了获取ACCESS_TOKEN的WeChat类中
4. 我们在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?',
        // 个性化菜单相关
    }
}

5. 他包括，创建菜单的方法，删除菜单的方法等，我们先写一个创建和删除的方法，并进行测试

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}`)
            }
        })
    }
}

6. 上面的方法是菜单删除和创建的函数，我们测试一下这两个函数，于是我们在当前文件下写一个立即执行函数

// 进行测试
(async () => {
    
    const weChatApi = new WeChat()
    let data = await weChatApi.deleteMenu()
    console.log(data)
    data = await weChatApi.createMenu(menu)
    console.log(data)
})()

7. 执行当前的js文件，如果没有报错，那么就是创建成功了，过两三分钟，可以看一下我们的公众号，发现底部已经有按钮了
   

其他的按钮类型

• 通过微信官网，我们可以发现微信提供的按钮类型有多种 点击，一共有12种菜单
• 同时，我们一定注意不同中的按钮的兼容性