简介

我们可以观看官网的介绍点击
他的核心是，我们需要调微信的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"}]}]}

在这个参数中，他既有一级菜单，也有二级菜单，并且也有不同功能的按钮

代码

我们使用一个文件来保存我们定义的按钮，我们就把它叫做menu.js，把他放在wechat文件夹下
写上如下代码，我们先写一个简单的菜单

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

我们可以观看我们调用的接口，我们会发现他需要ACCESS_TOKEN，所以我们把请求的放到了获取ACCESS_TOKEN的WeChat类中
我们在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.htmlcreate:prefix + "menu/create?",// 删除菜单 https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Deleting_Custom-Defined_Menu.htmldelete:prefix +'menu/delete?',// 获取菜单 https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Querying_Custom_Menus.htmlget:prefix +'menu/get?',// 个性化菜单相关}
}

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

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

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

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

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

其他的按钮类型

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

微信公众号之底部菜单相关推荐

微信公众号聊天底部菜单动画
为什么80%的码农都做不了架构师?>>> AnimationSet animationSet = new AnimationSet(false);Animation hideA ...
微信公众号编辑底部自定义菜单解决方案
微信公众号编辑底部自定义菜单解决方案 1.需求背景最近开发公众号项目,关于公众号里面底部的菜单栏设置一般常用有两种方法. 1,是进入公众号后台,找到自定义菜单,点击后进入编辑页面,进行编辑即可. 2 ...
微信公众号自动回复-底部菜单栏-关键字回复-回复2条消息(1文字,1图片)
微信公众号自动回复-底部菜单栏-关键字回复-回复2条消息(1文字,1图片)JAVA 主要实现: 1.关注后自动回复文字内容 2.关键字回复图文消息 3.实现公众号自定义底部菜单栏 - 点击菜单栏进入链 ...
php创建菜单_php实现微信公众号创建自定义菜单功能的实例代码
目的创建自定义菜单,实现菜单事件. 首先获取Access_Token 接口: 我用的是测试号,修改APPID和APPSECRET,然后浏览器访问上面这个Url即可生成Access_Token 然后配 ...
php 微信开发菜单,微信公众号中个性化菜单的开发实例
微信公众号中个性化菜单的开发实例个性化菜单让公众号的不同用户群体看到不一样的自定义菜单.该接口开放给已认证订阅号和已认证服务号,个性化菜单要求用户的微信客户端版本在iPhone6.2.2,Andro ...
java自定义菜单跳转页面_微信公众号开发自定义菜单跳转页面并获取用户信息实例详解...
微信公众号开发自定义菜单请先读完本文再进行配置开发请先前往微信平台开发者文档阅读"网页授权获取用户基本信息"的接口说明在微信公众账号开发中,往往有定义一个菜单,然后用户点击 ...
android 微信公众号开发教程,微信公众号-开发者-自定义菜单，公众开发者
微信公众号-开发者-自定义菜单,公众开发者我是个初学者,网上找了看了好多,都是第三方实现的,考虑到安全问题,不敢用! 今天终于摸索出了实现方法. 官方api:http://mp.weixin.qq. ...
怎样实现微信公众号点击菜单自动回复文字信息
为了满足微信公众号点击菜单自动回复文字信息的需要,第三方平台微号帮提供了粉丝点菜单定时推送功能实现,粉丝点击公众号菜单栏可以自动回复文字信息,可以更改回复信息的昵称和头像,回复信息内容可以显示粉丝昵称 ...
微信公众号开发--自定义菜单跳转页面并获取用户信息(续)
之前写过一篇微信公众号开发–自定义菜单跳转页面并获取用户信息由于当时是刚学习微信公众号开发当时的思路虽然可行,不过不是最好的,最近也用到了需要获取用户信息的地方,再次整理一下. 流程注意点 ### ...

微信公众号之底部菜单

文章目录

简介

代码

其他的按钮类型

微信公众号之底部菜单相关推荐

最新文章

热门文章