微信公众号之底部菜单

文章目录

• 简介
• 代码
• 其他的按钮类型

专栏目录请点击

简介

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种菜单
• 同时，我们一定注意不同中的按钮的兼容性