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监听输入事件来检查输入的菜单名长度，长度超出上线则显示提示

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

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/" } }] } }

//获取菜单类型 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如何实现微信公众号菜单编辑器功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

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

其他资讯