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

原文地址:https://www.cnblogs.com/xiaoxiaossrs/p/9537778.html

时间: 2024-11-05 14:55:34

Vue仿微信公众号配置页面的相关文章

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

这是一个十分有趣微信公众号样式主题,它能够将你的需要的HTML页面变成一个微信公众号文章的样式,而你站点的所有内容都和微信公众号的文章样式展示在一个微信框中.同时还有返回功能等等. 十分适合做微信公众号展示的朋友. 当然稍加修改也能让它有其他的这是一个十分有趣微信公众号样式主题,它能够将你的需要的HTML页面变成一个微信公众号文章的样式,而你站点的所有内容都和微信公众号的文章样式展示在一个微信框中.同时还有返回功能等等. 产品功能 1.支持一键采集,只需输入公众号的文章链接,即可一键生成一篇百分

仿微信公众号文章实现微信营销活动推广页面的方法

精仿公众号文章不是传统意义上的微信防封系统了,这是一款营销推广系统.因为对比普通网页和微信公众号文章,微信公众号文章的可信度.认知度的优势明显,于是仿公众号文章系统可以解决广大广告业主和公众号运营者在活动推广.营销推广上的问题.并且精仿公众号文章系统可实现所有内容皆可自定义和随时修改.阅读数.点赞数.留言内容等所有数据可随意设置,在灵活性上大大超越了公众号文章.   演示地址:http://www.188tool.cn/copy-articel 适用场景:分享活动,展销会活动,微信H5页面文章等

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

之前有个需求,点击菜单进入到微信公众号模块,然后点击返回的时候不知道到哪里去,后来觉得点返回的时候直接关闭页面,但是window.close()并不能关闭页面,然后经过查找资料,发现通过以下方法可以 setTimeout(function() { //这个可以关闭安卓系统的手机 document.addEventListener( "WeixinJSBridgeReady", function() { WeixinJSBridge.call("closeWindow"

vue之微信公众号开发

最近使用vue开发了一个购物类的微信公众号项目,将遇到的问题及大致的流程都给记录一下. 使用的是vue+vuex+vue-router+axios,样式用的是YDUI. 项目是需要做一个扫码之后通过微信openid做用户标识,然后让用户能够购买商品的小型购物网站,开始是仿照的慕课上某老师的回龙观项目,后来就加入了许多东西. 正文之前写说句感慨,没有系统学习vue就直接做vue项目简直是一直折磨.还有就是基础知识学的不扎实导致遇到一些问题浪费大量时间也不一定能搞出来. 首先先来看vue-route

微信公众号申请页面获取验证码BUG

环境 操作系统: 浏览器: 网络:wifi 步骤 1.注册成功后,进入微信公众号 2.选择订阅号,下面的[选择并继续],点击确认 3.选择[个人]后,会让你填写个人信息 4.填写完姓名和身份证号码后,填写手机号后,[获取验证码]的按钮应该由灰色转为高亮,但是却没有,但是这个时候却可以点击,正确获取验证码. 频率 必现(3/3) 危害 轻微,反正不影响使用,但是用户体验较差,也不满足需求,因为当你点击获取,一分钟后的正常显示如下: 原因分析 JS对输入框的判断逻辑出现问题.

tp5配置微信公众号配置的注意

在使用TP5做微信开发时大家一定遇到过配置失败或者token验证失败的情况,而且使用日志打印参数进行签名算法验证都是真确的. 这个问题让我苦恼了好久.最终发现,在我们验证签名是输出了随机字符串  echo $echoStr;时如果没有关闭trace就会出现如下的输出 这个就是罪魁祸首,万一你不小心没有改配置那就会输出trace分析页面的html,而不仅仅是echoStr,所以微信服务器接收到消息后会报错,而且是抓狂的一直报错. 解决办法: 关闭 trace 另外附上tp5验证url有效性的代码.

Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究

ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index-tab页面 406 not accessable http请求头问题 1 $httpProvider.interceptors.push(function() { 2 return { 3 "request": function(config) { 4 //console.log(conf

利用H5开发微信公众号

一. 首先授权配置 公众号设置 -->功能设置 设置业务域名!  这里的MP_verify_w7tdZrafqhkK9Mcj.txt文件,需要放到你项目的根目录下,例子:你的项目war包叫 test.war ,里面包含了src,WEB-INFO两个文件夹,则把MP_verify_w7tdZrafqhkK9Mcj.txt放到这两个文件夹的同级目录下;即现在test.war下有两个文件夹一个txt文件:src,WEB-INFO,MP_verify_w7tdZrafqhkK9Mcj.txt. 后面就需

如何进行微信公众号开发的本地调试

微信团队为广大的开发者提供了一个测试账号.该帐号无需公众账号,快速申请接口测试,直接体验和测试公众平台所有高级接口.这么好用的功能,只需要要你有一个手机,手机上安装了一个微信即可. 地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 登录后,会得到一个微信号,和测试好的相关信息.appID,appsecret. 接口配置信息,js接口安全域名配置按照生产环境的配置即可. 下面重点开始了.已经有了一个可供测试的公众号,