Vue仿微信公眾號配置頁面

一、需求：

1、剛好公司需要自定義微信公眾號菜單配置，在vue的后台管理系統寫一個頁面，進行菜單配置。

二、頁面圖片：（menu對象值那個地方只是打印出來看而已，自行去掉）

 

三、demo鏈接

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

四、框架

vue + elementUI + mockjs

因為公司是基於vue和elementUI，如果想改其他UI框架，則將el-開頭的組件都換了就行了。

五、注意事項：

1、data里面有個menu對象，對象格式必須嚴格按照微信公眾號配置文檔進行配置。

鏈接如下：

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

 

2、里面采用一個臨時對象tempObj，對右邊進行賦值和修改，右邊選中對應的菜單內容選項，menu對象也會有相應的數據。

3、自定義菜單，一級菜單（4個漢字）最多3個，二級菜單（7個漢字）最多5個，這是微信公眾號的配置要求。（我沒有對這個進行限制，還有input進行驗證）

4、菜單內容，有 tempObj.type 值控制：media_id：發送素材； view：跳轉鏈接； click：發送關鍵詞 ； miniprogram：小程序   對應的值是固定的。

六、代碼下載

鏈接：

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