资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Vue.js如何实现微信公众号菜单编辑器功能

这篇文章将为大家详细讲解有关Vue.js如何实现微信公众号菜单编辑器功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

为广信等地区用户提供了全套网页设计制作服务,及广信网站建设行业解决方案。主营业务为成都网站设计、成都做网站、广信网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

实现菜单删除方法

在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除。

methods: {
 //删除菜单
 delMenu:function(){
  //删除主菜单
  if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){
   if(this.selectedMenuIndex===0){
    this.menu.button.splice(this.selectedMenuIndex, 1);
    this.selectedMenuIndex = 0;
   }else{
    this.menu.button.splice(this.selectedMenuIndex, 1);
    this.selectedMenuIndex -=1;
   }
   if(this.menu.button.length==0){
    this.selectedMenuIndex = ''
   }
  //删除子菜单
  }else if(this.selectedMenuLevel()==2){
   if(this.selectedSubMenuIndex===0){
    this.menu.button[this.selectedMenuIndex].sub_button.splice(this.selectedSubMenuIndex, 1);
    this.selectedSubMenuIndex = 0;
   }else{
    this.menu.button[this.selectedMenuIndex].sub_button.splice(this.selectedSubMenuIndex, 1);
    this.selectedSubMenuIndex -= 1;
   }
   if(this.menu.button[this.selectedMenuIndex].sub_button.length==0){
    this.selectedSubMenuIndex = ''
   }
  }
 },
}

将方法绑定了菜单编辑界面


 
 
  {{menu.button[selectedMenuIndex].name}}
   删除菜单
  
   

检查菜单名称输入长度

用v-model指令在输入框绑定菜单名,@input监听输入事件来检查输入的菜单名长度,超出上限则显示提示

data:{
 menuNameBounds:false,//菜单长度超出上限标记
},
methods:{
 //判断菜单名长度
 checkMenuName:function(val){
  if(this.selectedMenuLevel()==1&&this.getMenuNameLen(val)<=8){
   this.menuNameBounds=false
  }else if(this.selectedMenuLevel()==2&&this.getMenuNameLen(val)<=16){
   this.menuNameBounds=false
  }else{
   this.menuNameBounds=true
  }
 },
 //获取字符串中文字符长度
 getMenuNameLen: function (val) {
  var len = 0;
  for (var i = 0; i < val.length; i++) {
   var a = val.charAt(i);
   a.match(/[^\x00-\xff]/ig) != null?len += 2:len += 1;
  }
  return len;
 }
}

添加菜单编辑界面和事件监听

v-model指令用来绑定菜单名输入框的值,@input监听输入事件来检查输入的菜单名长度,长度超出上线则显示提示


 
  菜单名称
  
   
   
   字数超过上限

   字数不超过4个汉字或8个字母

    

截图工具不显示删除的弹框,将就一下吧...

Vue.js如何实现微信公众号菜单编辑器功能

实现选择菜单类型方法

微信菜单有多种类型所以需要做个下拉列表,选中下拉项后显示该项的内容

先给每个菜单添加下类型

data:{
 "menu": {
  "button": [
  {
   "type": "click",
   "name": "主菜单1",
   "key": "测试key",
   "sub_button": []
  },
  {
   "name": "主菜单2",
   "sub_button": [
   {
    "type": "view",
    "name": "子菜单",
    "url": "https://cn.vuejs.org/v2/guide/"
   }]
  },
  {
   "name": "主菜单3",
   "sub_button": [
   {
    "type": "view",
    "name": "子菜单",
    "url": "https://cn.vuejs.org/v2/guide/"
   }
  }]
 }
}

创建的下拉列表也使用v-model指令来绑定选中的菜单类型

//获取菜单类型 1. view网页类型,2. media_id类型和view_limited类型 3. click点击类型,4.miniprogram表示小程序类型
methods: {
 selectedMenuType: function () {
  switch (this.menu.button[this.selectedMenuIndex].type) {
   case 'view':return 1;
   case 'media_id':return 2;
   case 'click':return 3;
   case 'miniprogram':return 4;
  }
 }
}

 
  菜单内容
  
   
    跳转网页(view)
    发送消息(media_id)
    打开指定小程序(miniprogram)
    自定义点击事件(click)
   
  
 
 
 
  
   用于消息接口推送,不超过128字节

   菜单KEY值                  

Vue.js如何实现微信公众号菜单编辑器功能

菜单的添加、编辑、删除功能基本完成了,总结一下学习到的知识

弹窗组件使用的是layer

素材列表使用的模版是art-template

关于“Vue.js如何实现微信公众号菜单编辑器功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页名称:Vue.js如何实现微信公众号菜单编辑器功能
网页链接:http://cdkjz.cn/article/pchgdo.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220