Vue仿微信公众号配置页面

Posted 笑笑~上善若水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 

以上是关于Vue仿微信公众号配置页面的主要内容,如果未能解决你的问题,请参考以下文章

推荐一款精仿微信公众号样式的管理系统

vue中通过WeixinJSBridge关闭微信公众号当前页面,返回微信公众号首页

微信公众号开发之vue整理

公众号开发 vue项目 微信授权一直不通过

vue h5 公众号支付

如何为微信公众号配置接口?