专栏目录请点击
简介
- 我们可以观看官网的介绍 点击
- 他的核心是,我们需要调微信的api来进行创建菜单,且菜单的参数,在官网的例子中已经给出
- 调用的接口为 https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
- 他是一个
post
请求,参数放在请求体中(body
) - 参数如下
{
"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.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?',
// 个性化菜单相关
}
}
- 他包括,创建菜单的方法,删除菜单的方法等,我们先写一个创建和删除的方法,并进行测试
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种菜单
- 同时,我们一定注意不同中的按钮的兼容性