vue开发微信公众号可视化配置菜单

                                         vue开发微信公众号可视化配置菜单

        其实一开始我也是懵逼的，我搞不懂微信公众号后台其实已经很好用了，为什么还需要开发一个模仿微信公众号后台的系统呢？而且微信公众号可以绑定多个运营者，都可以和管理员一样可以通过扫码登录来修改微信菜单配置，唯一想明白的就是如果有什么特殊功能需要开启第三方服务（开发者配置）的时候，才需要开发自定义菜单和自动回复。既然有如此需求，那么我们就来看看vue是如何实现微信公众号的可视化配置菜单的。菜单数据使用mock.js模拟，安装命令是，前端框架采用vue + element

npm install mockjs --save-dev

       一、效果图：

二、采用的是vue-cli 2.0版本，菜单目录结构如图所示：

三、对应文件分别写入

1、views目录下menu的index.vue,我这边使用的是scss,css根据个人需要调整，图片路径也自己更改,所使用的图片地址是：

http://pri3p9w51.bkt.clouddn.com/iphone_backImg.png

2、wxmenu.js放置与根目录mock下

import Mock from 'mockjs';

// 素材内容
export var tableData = Mock.mock('/api/data',
  [{
    name: 'Vue',
  }, {
    name: 'angular',
  },{
    name: 'react',
  },
  ]
  );

// 配置菜单
export var menu = Mock.mock('/api/menu',
  {
  // 一级菜单
  button:[
    {
      type: "click",
      name: "菜单1",
      key: "menu1", // 关键词
      url: "", // 跳转链接
      media_id:"", // 素材名称--图文消息
      sub_button: [
        {
         //type: "",//media_id:素材内容; view:跳转链接
          name: "子菜单1",
         // url: "",//跳转链接
         // media_id:"",//素材名称--图文消息
        },
      ]
    }
  ]
}
);

3、main.js中写入

require('../mock/wxmenu')

至此，恭喜您，可视化菜单就ok了