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

官方菜单功能介绍

请求接口: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>

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

成功了哦。

(0)

相关推荐

  • 微信公众号菜单配置微信小程序实例详解

    先提条件是你的公众号版定了小程序 第一种:直接配置     第二张:代码配置 1.进入在线接口调试工具        2.选择自定义菜单 菜单body为json格式: { "button": [ { "type": "miniprogram", "name": "合作", "url": "http://form.mikecrm.com/2xb9aT", "a

  • 微信小程序实现弹出菜单动画

    微信小程序动画之弹出菜单,供大家参考,具体内容如下 效果图 js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.setData(

  • 微信小程序实现炫酷的弹出式菜单特效

    今天给大家带来一个微信小程序的弹出是菜单效果,老规矩先上效果图.(录制的gif动画有点卡,实际真机或是模拟器上很顺畅) 先简单说下思路: 1.首先在屏幕的某个位置放几个悬浮按钮,放几个看你需要的功能 2.点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩,这个遮罩在我前面自定义modal弹框时有用到 3.分别对按钮做旋转和移动动画和透明度,造成动画差异就是位移的动画距离不同 4.收起的时候回到原来位置并且让透明度变成0就ok了 思路说完了,下面开始上实现代码,这里同样也是封装成了组

  • 微信公众号点击菜单即可打开并登录微站的实现方法

    本文实例讲述了微信公众号点击菜单即可打开并登录微站的实现方法.分享给大家供大家参考.具体分析如下: 总体来说,微信公众号点击菜单即可打开并登录微站实现步骤比较复杂,但很多微站在己用上了,本文对此进行整理归纳,相信可以给大家带来一定的参考借鉴价值. 现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打开网页就能获取这个openid,实现自动登录. 这里

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

  • 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch

  • 微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

    本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标MUI的off canvas效果 点击列表 -- 右侧展示页面不动,左侧导航滑动 -- 点击右侧遮罩层或者左侧选项 -- 左侧还原,右侧去掉遮罩层 实现方案2:左右分上下两层,左侧滑动,右侧不动 WXML <view class="page"> <view class="page-top {{open ? 'page-top-show' : ''}}">

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

    官方菜单功能介绍 请求接口: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 MenuTwoLayerMode

  • 微信公众号平台接口开发 获取access_token过程解析

    新建Asp.net MVC 4.0项目 WeChatSubscript是项目UI层 WeChatTools是封装操作访问公众号接口的一些方法类库 获取AccssToken 我们要的得到AccessToken,这是所有接口访问的基础,我们看看官方给出的接口调用文档 很简单明了,grant_type=client_credential,这是固定的不会变 appid与secret就是前面一章我叫大家记起来的那个认证口令数据. 下边我们来实现这个功能,新建WeCharBase.cs public cla

  • 微信公众号平台接口开发 获取微信服务器IP地址方法解析

    官方说明 目前看不出来这个接口有哪些具体运用,但是既然有这个接口,那我们就试试能不能用 访问接口 修改WeCharBase.cs,新增以下2个方法 public static string ServerIPs { get { return GetServerIPs(); } } /// <summary>获取所有服务器IP</summary> /// <returns></returns> private static string GetServerIPs

  • 微信公众号测试账号自定义菜单的实例代码

    自定义菜单接口可实现多种类型按钮,如下: 1.click:点击推事件 用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event 的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互: 2.view:跳转URL 用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息. 3.scancode_push:扫码推事件 用户点击按钮后,微信客户

  • Thinkphp微信公众号支付接口

    本文实例为大家分享了Thinkphp微信公众号支付接口,供大家参考,具体内容如下 第一步  先把文件夹的那两个图片 配置成一样的路径 除了域名要改 其他保持一致. 第二步  把 Weixinpay 这个文件夹放在 \ThinkPHP\Library\Vendor  将Weixinpay文件夹放置到这个Vendor文件夹中 第三步  把  WxJsAPIController.class.php 这个php文件  \Home\Controller  这里面 第四步  把 WxJsAPI这个文件夹 

  • java微信公众号企业付款开发

    本文为大家分享了java微信公众号企业付款的开发代码,供大家参考,具体内容如下 详情参照微信开发者文档 企业付款文档 java代码 定义所传递的参数 @RequestMapping(value = "zhifu", method = RequestMethod.GET) public @ResponseBody String getWeixinOpenid(String code, HttpServletRequest request) { // 订单号 自定义 生成32位uuid S

  • 微信公众平台接口开发入门示例

    本文实例讲述了微信公众平台接口开发入门示例.分享给大家供大家参考.具体如下: 微信公众平台的接口开发是一个现在比较常用的功能了,很多的人都会去了解一下微信公众平台一些简单开发应用,这里就来给大家介绍一个入门示例. 这段时间都在忙于微信公众号平台来发,现在已经接近尾声了,所以对于微信开发平台的接口如何使用,在这里也唠刀一两句. 微信平台的开发并不像你想像的那么难,无非就是数据的存取处理罢了,对于数据的存取,简单如留言板,存数据,我们通过表单向数据库提交数据以存入;取数据,通过查询语句从数据库取得,

  • 微信公众号开发客服接口实例代码

    最近,开发微信公众号,负责开发客服功能,这里简单记录下: Kf_account.cs代码: public partial class Kf_account : Form { private readonly DataTable adt_user = new DataTable(); private readonly string as_INIFile = Application.StartupPath + "\\user.ini"; public Kf_account() { Bind

  • php微信公众号开发模式详解

    学习步骤:分四章来讲述这部分内容,下面是每章的大致内容. 1.了解开发模式与编辑模式,开发前的一些准备. 2.开发模式用户.微信服务器.个人服务器是如何交互的.什么是接口. 3.各种接口功能的调用与实现. 4.js-SDK的调用 微信公众号开发两种模式:编辑模式和开发模式.编辑模式比较简单,你不需要操作任何的代码,只需要借助微信提供的功能来管理自己的微信公众号.这种方式开发的页面比较简单,主要用来实现文章的推送等功能.开发者模式则能通过自己的后台服务器与微信关注用户实现更多的交互作用,调用微信的

  • java微信公众号开发案例

    微信公众号开发一般是针对企业和组织的,个人一般只能申请订阅号,并且调用的接口有限,下面我们就来简单的描述下接入公众号的步骤: 1.首先你需要一个邮箱在微信公众号平台进行注册:      注册的方式有订阅号.公众号.小程序和企业号,个人我们这里只能选择订阅号 2.注册完后,我们登录到公众号平台--->开发--->基本配置,这里需要填写URL和token,URL就是我们使用服务器的接口: 3.Java Web服务器程序编译好且在服务器上部署可以运行的话,可在微信公众号进行在线接口调试: 1).选择

随机推荐