Vue仿微信公众号配置页面

1、需求：

一、恰好公司须要自定义微信公众号菜单配置，在vue的后台管理系统写一个页面，进行菜单配置。

2、页面图片：（menu对象值那个地方只是打印出来看而已，自行去掉）

 

3、demo连接

https://summer-lin.github.io/vue-wechat-menu-demo/#/

4、框架

vue + elementUI + mockjs

由于公司是基于vue和elementUI，若是想改其余UI框架，则将el-开头的组件都换了就好了。

5、注意事项：

一、data里面有个menu对象，对象格式必须严格按照微信公众号配置文档进行配置。

连接以下：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141013

 

二、里面采用一个临时对象tempObj，对右边进行赋值和修改，右边选中对应的菜单内容选项，menu对象也会有相应的数据。

三、自定义菜单，一级菜单（4个汉字）最多3个，二级菜单（7个汉字）最多5个，这是微信公众号的配置要求。（我没有对这个进行限制，还有input进行验证）

四、菜单内容，有 tempObj.type 值控制：media_id：发送素材； view：跳转连接； click：发送关键词 ； miniprogram：小程序   对应的值是固定的。

6、代码下载

连接：

https://github.com/Summer-Lin/vue-wechat-menu