微信公众号平台接口开发 菜单管理的实现


Posted in Javascript onAugust 14, 2019

官方菜单功能介绍

微信公众号平台接口开发 菜单管理的实现

微信公众号平台接口开发 菜单管理的实现

请求接口:https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN

微信公众号平台接口开发 菜单管理的实现

微信公众号平台接口开发 菜单管理的实现

新增菜单管理类

public class MenuFirstLayerModel
  {
    public string name { get; set; }
    public List<MenuTwoLayerModel> sub_button { get; set; }
  }

  public class MenuTwoLayerModel
  {
    public string type { get; set; }
    public string name { get; set; }
    public string key { get; set; }
    public string url { get; set; }
  }

  public class WXMenu 
  {
    public List<MenuFirstLayerModel> button { get; set; }

    public string Create()
    {
      try
      {
        var requestUri = string.Format(@"https://api.weixin.qq.com/cgi-bin/menu/create?access_token={0}", WeCharBase.AccessToken);
        
        return WeCharBase.Post(requestUri, new StringContent(JsonConvert.SerializeObject(new
        {
          button = button
        })));
      }
      catch (Exception ex)
      {
        return ex.Message;
      }
    }
  }

新增控制器MenuController.cs

public ActionResult ViewMenu()
    {
      return View();
    }

    public ActionResult CreateMenu()
    {
      var wxMenu = new WXMenu()
      {
        button = new List<MenuFirstLayerModel>()
        {
          new MenuFirstLayerModel()
          {
             name="扫码",
             sub_button = new List<MenuTwoLayerModel>()
             {
              new MenuTwoLayerModel()
              {
                type = "scancode_waitmsg",
                name = "扫码带提示", 
                key = "rselfmenu_0_0"
              },
              new MenuTwoLayerModel()
              {
                type = "scancode_push",
                name = "扫码推事件", 
                key = "rselfmenu_0_1"
              }
             },
          },
          new MenuFirstLayerModel()
          {
             name = "发图",
             sub_button = new List<MenuTwoLayerModel>()
             {
              new MenuTwoLayerModel()
              {
                type = "pic_sysphoto",
                name = "系统拍照发图", 
                key = "rselfmenu_1_0"
              },
              new MenuTwoLayerModel()
              {
                type = "pic_photo_or_album",
                name = "拍照或者相册发图", 
                key = "rselfmenu_1_1"
              },
              new MenuTwoLayerModel()
              {
                type = "pic_weixin",
                name = "微信相册发图", 
                key = "rselfmenu_1_2"
              }
             }
          },
          new MenuFirstLayerModel()
          {
            name = "其他",
            sub_button = new List<MenuTwoLayerModel>()
            {
              new MenuTwoLayerModel()
              {
                type = "location_select",
                name = "发送位置", 
                key = "rselfmenu_2_0"
              },
              new MenuTwoLayerModel()
              {
                type = "click",
                name = "今日歌曲", 
                key = "V1001_TODAY_MUSIC"
              },
              new MenuTwoLayerModel()
              {
                type = "view",
                name = "百度", 
                url = "http://www.baidu.com"
              }
            }
          }
        }
      };

      return Content(wxMenu.Create());
    }

新增视图ViewMenu.cshtml

<script type="text/javascript" language="javascript">
  $(document).ready(function () {
    $("#btnCreate").click(function () {
      $.ajax({
        type: "POST",
        url: "/Menu/CreateMenu",
        data: { id: $("#textContent").val() },
        success: function (responseTest) {
          $("#resultMesage").text(responseTest);
        }
      });
    });
  });
</script>

<table>
  <tr>
    <td>
      <div class="title">菜单创建</div>
      <textarea id="textContent" name="textContent" rows="20" cols="100">
        button = new[]
        {
          new
          {
            name="扫码",
            sub_button = new[]
            {
              new
              {
                type = "scancode_waitmsg",
                name = "扫码带提示",
                key = "rselfmenu_0_0"
              },
              new
              {
                type = "scancode_push",
                name = "扫码推事件",
                key = "rselfmenu_0_1"
              }
            }
          },
          new
          {
            name = "发图",
            sub_button = new[]
            {
              new
              {
                type = "pic_sysphoto",
                name = "系统拍照发图",
                key = "rselfmenu_1_0"
              },
              new
              {
                type = "pic_photo_or_album",
                name = "拍照或者相册发图",
                key = "rselfmenu_1_1"
              },
              new
              {
                type = "pic_weixin",
                name = "微信相册发图",
                key = "rselfmenu_1_2"
              }
            }
          },
          new
          {
            name = "其他",
            sub_button = new[]
            {
              new
              {
                type = "location_select",
                name = "发送位置",
                key = "rselfmenu_2_0"
              },
              new
              {
                type = "click",
                name = "今日歌曲",
                key = "V1001_TODAY_MUSIC"
              },
              new
              {
                type = "view",
                name = "百度",
                url = "http://www.baidu.com"
              }
            }
          }
        }

      </textarea>
    </td>
    <td><input class="btncss" id="btnCreate" type="button" value=" 创建 " /></td>
    <td id="resultMesage" class="resultMesage"></td>
  </tr>
</table>

有效代码写完了,看看效果

微信公众号平台接口开发 菜单管理的实现

微信公众号平台接口开发 菜单管理的实现

成功了哦。

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 #Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 #Javascript
vue filter 完美时间日期格式的代码
Aug 14 #Javascript
如何对react hooks进行单元测试的方法
Aug 14 #Javascript
vue 中 命名视图的用法实例详解
Aug 14 #Javascript
详解vue 命名视图
Aug 14 #Javascript
浅谈JS中this在各个场景下的指向
Aug 14 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php处理复杂xml数据示例
2016/07/11 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python实现简单的代理服务器
2015/07/25 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Python LMDB库的使用示例
2021/02/14 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
法人委托书
2014/07/31 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis