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