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


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 相关文章推荐
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
JavaScript继承的三种方法实例
May 12 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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 iconv函数的使用详解
2013/06/09 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
php 中的closure用法详解
2017/06/12 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python3 cvs将数据读取为字典的方法
2018/12/22 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python中count函数简单用法
2020/01/05 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
python 实现控制鼠标键盘
2020/11/27 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
使用C#编写创建一个线程的代码
2013/01/22 面试题
就业自荐书
2013/12/05 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2014年教研室工作总结
2014/12/06 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers