UDN-企业互联网技术人气社区

板块导航

浏览  : 2106
回复  : 3

[原生js] java微信开发API第四步 微信自定义个性化菜单实现

[复制链接]
西北的风的头像 楼主
发表于 2017-1-17 17:13:53 | 显示全部楼层 |阅读模式
本帖最后由 西北的风 于 2017-1-17 17:13 编辑

  这篇文章主要为大家详细介绍了java微信开发API第四步,自定义菜单以及个性化菜单实现 ,感兴趣的小伙伴们可以参考一下

  微信如何实现自定义个性化菜单,下面为大家介绍
  
  一、全局说明
  
  详细说明请参考前两篇文章。
  
  二、本文说明
  
  本文分为五部分:
  
  * 工具类AccessTokenUtils的封装
  
  * 自定义菜单和个性化菜单文档的阅读解析
  
  * 菜单JSON的分析以及构建对应bean
  
  * 自定义菜单的实现
  
  * 个性化菜单的实现
  
  微信自定义菜单所有类型菜单都给出演示
  
  本文结束会给出包括本文前四篇文章的所有演示源码
  
  工具类AccessTokenUtils的封装
  
  在上文中关于AccessToken的获取和定时保存已经详细介绍过,此处直接给出处理过之后封装的AccessTokenUtils,实现原理以及文档阅读不再给出。
  1. package com.gist.utils;

  2. import java.io.File;
  3. import java.io.FileInputStream;
  4. import java.io.FileOutputStream;
  5. import java.io.IOException;
  6. import java.io.InputStreamReader;
  7. import java.net.URL;

  8. import javax.net.ssl.HttpsURLConnection;

  9. import com.gist.bean.Access_token;
  10. import com.google.gson.Gson;

  11. /**
  12. * @author 高远</n> 邮箱:wgyscsf@163.com</n> 博客 http://blog.csdn.net/wgyscsf</n>
  13. *   编写时期 2016-4-7 下午5:44:33
  14. */
  15. public class AccessTokenUtils {
  16. private static final long MAX_TIME = 7200 * 1000;// 微信允许最长Access_token有效时间(ms)
  17. private static final String TAG = "WeixinApiTest";// TAG
  18. private static final String APPID = "wx889b020b3666b0b8";// APPID
  19. private static final String SECERT = "6da7676bf394f0a9f15fbf06027856bb";// 秘钥

  20. /*
  21.   * 该方法实现获取Access_token、保存并且只保存2小时Access_token。如果超过两个小时重新获取;如果没有超过两个小时,直接获取。该方法依赖
  22.   * :public static String getAccessToken();
  23.   *
  24.   * 思路:将获取到的Access_token和当前时间存储到file里,
  25.   * 取出时判断当前时间和存储里面的记录的时间的时间差,如果大于MAX_TIME,重新获取,并且将获取到的存储到file替换原来的内容
  26.   * ,如果小于MAX_TIME,直接获取。
  27.   */
  28. // 为了调用不抛异常,这里全部捕捉异常,代码有点长
  29. public static String getSavedAccess_token() {
  30.   Gson gson = new Gson();// 第三方jar,处理json和bean的转换
  31.   String mAccess_token = null;// 需要获取的Access_token;
  32.   FileOutputStream fos = null;// 输出流
  33.   FileInputStream fis = null;// 输入流
  34.   File file = new File("temp_access_token.temp");// Access_token保存的位置
  35.   try {
  36.    // 如果文件不存在,创建
  37.    if (!file.exists()) {
  38.     file.createNewFile();
  39.    }
  40.   } catch (Exception e1) {
  41.    e1.printStackTrace();
  42.   }
  43.   // 如果文件大小等于0,说明第一次使用,存入Access_token
  44.   if (file.length() == 0) {
  45.    try {
  46.     mAccess_token = getAccessToken();// 获取AccessToken
  47.     Access_token at = new Access_token();
  48.     at.setAccess_token(mAccess_token);
  49.     at.setExpires_in(System.currentTimeMillis() + "");// 设置存入时间
  50.     String json = gson.toJson(at);
  51.     fos = new FileOutputStream(file, false);// 不允许追加
  52.     fos.write((json).getBytes());// 将AccessToken和当前时间存入文件
  53.     fos.close();
  54.     return mAccess_token;
  55.    } catch (Exception e) {
  56.     e.printStackTrace();
  57.    }
  58.   } else {
  59.    // 读取文件内容
  60.    byte[] b = new byte[2048];
  61.    int len = 0;
  62.    try {
  63.     fis = new FileInputStream(file);
  64.     len = fis.read(b);
  65.    } catch (IOException e1) {
  66.     // TODO Auto-generated catch block
  67.     e1.printStackTrace();
  68.    }
  69.    String mJsonAccess_token = new String(b, 0, len);// 读取到的文件内容
  70.    Access_token access_token = gson.fromJson(mJsonAccess_token,
  71.      new Access_token().getClass());
  72.    if (access_token.getExpires_in() != null) {
  73.     long saveTime = Long.parseLong(access_token.getExpires_in());
  74.     long nowTime = System.currentTimeMillis();
  75.     long remianTime = nowTime - saveTime;
  76.     // System.out.println(TAG + "时间差:" + remianTime + "ms");
  77.     if (remianTime < MAX_TIME) {
  78.      Access_token at = gson.fromJson(mJsonAccess_token,
  79.        new Access_token().getClass());
  80.      mAccess_token = at.getAccess_token();
  81.      return mAccess_token;
  82.     } else {
  83.      mAccess_token = getAccessToken();
  84.      Access_token at = new Access_token();
  85.      at.setAccess_token(mAccess_token);
  86.      at.setExpires_in(System.currentTimeMillis() + "");
  87.      String json = gson.toJson(at);
  88.      try {
  89.       fos = new FileOutputStream(file, false);// 不允许追加
  90.       fos.write((json).getBytes());
  91.       fos.close();
  92.      } catch (IOException e) {
  93.       // TODO Auto-generated catch block
  94.       e.printStackTrace();
  95.      }
  96.      return mAccess_token;
  97.     }

  98.    } else {
  99.     return null;
  100.    }
  101.   }

  102.   return mAccess_token;
  103. }

  104. /*
  105.   * 获取微信服务器AccessToken。该部分和getAccess_token() 一致,不再加注释
  106.   */
  107. public static String getAccessToken() {
  108.   String urlString = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="
  109.     + APPID + "&secret=" + SECERT;
  110.   String reslut = null;
  111.   try {
  112.    URL reqURL = new URL(urlString);
  113.    HttpsURLConnection httpsConn = (HttpsURLConnection) reqURL
  114.      .openConnection();
  115.    InputStreamReader isr = new InputStreamReader(
  116.      httpsConn.getInputStream());
  117.    char[] chars = new char[1024];
  118.    reslut = "";
  119.    int len;
  120.    while ((len = isr.read(chars)) != -1) {
  121.     reslut += new String(chars, 0, len);
  122.    }
  123.    isr.close();
  124.   } catch (IOException e) {

  125.    e.printStackTrace();
  126.   }
  127.   Gson gson = new Gson();
  128.   Access_token access_token = gson.fromJson(reslut,
  129.     new Access_token().getClass());
  130.   if (access_token.getAccess_token() != null) {
  131.    return access_token.getAccess_token();
  132.   } else {
  133.    return null;
  134.   }
  135. }
  136. }
复制代码

  自定义菜单和个性化菜单文档的阅读解析
  
  •        自定义菜单
  •   自定义菜单创建接口
  •   自定义菜单查询接口
  •   自定义菜单删除接口
  •   自定义菜单事件推送
  •   个性化菜单接口
  •   获取公众号的菜单配置

  文档地址:http://mp.weixin.qq.com/wiki/10/ ... a7d23595c6b40a.html
  
  ?官网文档给出这样解释:
  
  * 自定义菜单接口可实现多种类型按钮,如下:1、click:点击事件...;2、view:跳转事件...;3、...(关于自定义菜单)
  
  * 接口调用请求说明 http请求方式:POST(请使用https协议) https://api.weixin.qq.com/cgi-bi ... _token=ACCESS_TOKEN(关于自定义菜单)
  
  * click和view的请求示例 {"button":[...]}  (关于自定义菜单)
  
  * 参数说明...(关于自定义菜单)
  
  * 创建个性化菜单http请求方式:POST(请使用https协议)https://api.weixin.qq.com/cgi-bi ... _token=ACCESS_TOKEN(关于个性化菜单)
  
  * 请求示例: {"button":[...],"matchrule":{...}}(关于个性化菜单)
  
  * 参数说明...(关于个性化菜单)
  
  * 开发者可以通过以下条件来设置用户看到的菜单(关于个性化菜单):
  
  1、用户分组(开发者的业务需求可以借助用户分组来完成)
  
  2、性别
  
  3、手机操作系统
  
  4、地区(用户在微信客户端设置的地区)
  
  5、语言(用户在微信客户端设置的语言)
  
  •   理解:
  
  •   又是熟悉的POST请求,但是,关于调用貌似说的含糊其辞,不太明白。只是知道我们需要使用“?access_token=ACCESS_TOKEN”这个参数,这个参数我们在上篇文章已经获取到了。假如我们将微信文档给的那个请求地址中“ACCESS_TOKEN”换成我们获取到的自己的ACCESS_TOKEN,访问该网址,会看到“{“errcode”:44002,”errmsg”:”empty post data hint: [Gdveda0984VR23]”}”。大概意思是,空的post请求数据。所以,我们要通过POST请求的形式传递参数给微信服务器,在文档下面还给出了参数的格式:{“button”:[…]},所以,我们要按照该格式给微信服务器进行传递参数。
  
  关于参数说明,我们可以看到在自定义菜单创建中有七个参数。在个性化菜单接口中除去这七个参数之外,另外多个八个参数。简单查看此部分文档,我们可以了解到这个八个参数是为了个性化菜单做匹配筛选用的。
  
  现在,我们需要按照微信文档的要求构造json通过post的请求向微信服务器发送这一串json数据,json里面就包括我们创建的各种类型的按钮事件。
  
  菜单JSON的分析以及构建对应bean
  
  自定义菜单json分析(不包括个性化菜单)。下面这段代码是微信文档给的示例。
  
  click和view的请求示例
  1. {
  2.   "button":[
  3.   {
  4.    "type":"click",
  5.    "name":"今日歌曲",
  6.    "key":"V1001_TODAY_MUSIC"
  7.   },
  8.   {
  9.    "name":"菜单",
  10.    "sub_button":[
  11.    {
  12.     "type":"view",
  13.     "name":"搜索",
  14.     "url":"http://www.soso.com/"
  15.    },
  16.    {
  17.     "type":"view",
  18.     "name":"视频",
  19.     "url":"http://v.qq.com/"
  20.    },
  21.    {
  22.     "type":"click",
  23.     "name":"赞一下我们",
  24.     "key":"V1001_GOOD"
  25.    }]
  26.   }]
  27. }
复制代码

  经过分析我们可以看到这串json数据分为三层:“”button”:[{…},{…}]”、“[{…},{{“name”:菜单,”sub_button”:[{},{}]}]”、“{“type”:”view”,”name:”:”视频”,”url”:”…”},{},{}”,可能看起来比较晕。
  
  但是,如果我们能够联想起来现实中看到的微信菜单,就会好理解一点:一级:菜单(一个菜单),下包括一到三个父按钮;二级:父按钮(1~3个父按钮),下包括一到五个子按钮;三级:子按钮(1~5个子按钮)。
  
  现在,我们可以看到json和我们理解的“菜单”可以一一对应起来了。现在重点是如何确认每一级的“级名”,在java中也就是对应的javabean对象。
  
  同时,因为一级菜单下会有多个父按钮,所以是一个List<父菜单>的形式。父按钮下可能有多个子菜单,也是一个 List<子菜单>;但是,父按钮也有可能也是一个单独的可以响应的按钮。是一个单独的父按钮对象。子按钮就是一个单独的子按钮对象。
  
  查看关于自定义菜单的参数说明,我们可以看到按钮分为一级按钮(“button”)和二级按钮(“sub_button”)。还有一些公用的数据类型,例如:菜单响应类型(“type”)、菜单标题(“name”)、click类型的参数(“key”)、view类型的参数(“url”)、media_id类型和view_limited类型的参数(“media_id”)。
  
  •   数据抽象(没有写setter,getter):
  1. //按钮基类
  2. public class BaseButton {
  3. private String type;
  4. private String name;
  5. private String key;
  6. private String url;
  7. private String media_id;
  8. }
  9. //子按钮
  10. public class SonButton extends BaseButton {
  11. private String sub_button;
  12. }
  13. //父按钮
  14. public class FatherButton extends BaseButton {
  15. private String button;//可能直接一个父按钮做响应
  16. @SerializedName("sub_button")//为了保证Gson解析后子按钮的名字是“sub_button”,具体用法请搜索
  17. private List<SonButton> sonButtons;//可能有多个子按钮
  18. }

  19. public class Menu {
  20. @SerializedName("button")
  21. private List<FatherButton> fatherButtons;
  22. }
复制代码

  以上是完整的自定义菜单的分析以及对应javabean的构建。
  
  对于个性化菜单,如果查看该部分的文档,会发现和自定义菜单大致相同,只是多个一个“配置”的json,格式是这样的:{“button”:[…],”matchrule”:{…}}。
  
  我们发现,“匹配”这段json和“button”是同级的,分析和实现和上面基本等同,直接给出实现的javabean。
  1. //匹配的json对应的json
  2. public class MatchRule {
  3. private String group_id;
  4. private String sex;
  5. private String client_platform_type;
  6. private String country;
  7. private String province;
  8. private String city;
  9. private String language;
  10. }

  11. //修改Menu.java
  12. public class Menu {
  13. @SerializedName("button")
  14. private List<FatherButton> fatherButtons;
  15. private MatchRule matchrule;
  16. }
复制代码

  自定义菜单的实现
  
  任务,我们实现所有微信按钮响应类型:
  
  任务(注释:“m-0”表示父按钮;“m-n”表示第m个父按钮,第n个子按钮(m,n≠0)):1-0:名字:click,响应点击事件:点击推事件 。2-0:名字:父按钮2。2-1:名字:view,响应事件:跳转网页;2-2:名字:scancode_push,响应事件:扫码推事件;2-3:名字:scancode_waitmsg,响应事件:扫码推事件且弹出“消息接收中”提示框;2-4:名字:pic_sysphoto,响应事件
  
  :弹出系统拍照发图。2-5:名字:pic_photo_or_album,响应事件:弹出拍照或者相册发图。3-0:名字:父按钮3。3-1:名字
  
  :pic_weixin,响应事件:弹出微信相册发图器;3-2:名字:location_select,响应事件:弹出地理位置选择器;3-3:名字:media_id,响应事件:下发消息(除文本消息);3-4:名字:view_limited,响应事件:跳转图文消息url。
  
  实现源码(引用的AccessTokenUtils.java在第一部分:工具类AccessTokenUtils的封装)
  1. /*
  2.   * 创建自定义菜单。
  3.   */
  4. @Test
  5. public void createCommMenu() {
  6.   String ACCESS_TOKEN = AccessTokenUtils.getAccessToken();// 获取AccessToken,AccessTokenUtils是封装好的类
  7.   // 拼接api要求的httpsurl链接
  8.   String urlString = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token="
  9.     + ACCESS_TOKEN;
  10.   try {
  11.    // 创建一个url
  12.    URL reqURL = new URL(urlString);
  13.    // 拿取链接
  14.    HttpsURLConnection httpsConn = (HttpsURLConnection) reqURL
  15.      .openConnection();
  16.    httpsConn.setDoOutput(true);
  17.    // 取得该连接的输出流,以读取响应内容
  18.    OutputStreamWriter osr = new OutputStreamWriter(
  19.      httpsConn.getOutputStream());
  20.    osr.write(getMenuJson());// 使用本类外部方法getMenuJson()
  21.    osr.close();

  22.    // 返回结果
  23.    InputStreamReader isr = new InputStreamReader(
  24.      httpsConn.getInputStream());
  25.    // 读取服务器的响应内容并显示
  26.    char[] chars = new char[1024];
  27.    String reslut = "";
  28.    int len;
  29.    while ((len = isr.read(chars)) != -1) {
  30.     reslut += new String(chars, 0, len);
  31.    }
  32.    System.out.println("返回结果:" + reslut);
  33.    isr.close();
  34.   } catch (IOException e) {
  35.    e.printStackTrace();
  36.   }
  37. }

  38. public String getMenuJson() {
  39.   Gson gson = new Gson();// json处理工具

  40.   Menu menu = new Menu();// 菜单类
  41.   List<FatherButton> fatherButtons = new ArrayList<FatherButton>();// 菜单中的父按钮集合
  42.   // -----------
  43.   // 父按钮1
  44.   FatherButton fb1 = new FatherButton();
  45.   fb1.setName("click");
  46.   fb1.setType("click");
  47.   fb1.setKey("10");
  48.   // -------------
  49.   // 父按钮2
  50.   FatherButton fb2 = new FatherButton();
  51.   fb2.setName("父按钮2");
  52.   List<SonButton> sonButtons2 = new ArrayList<SonButton>();// 子按钮的集合

  53.   // 子按钮2-1
  54.   SonButton sb21 = new SonButton();
  55.   sb21.setName("view");
  56.   sb21.setUrl("http://www.baidu.com");
  57.   sb21.setType("view");
  58.   // 子按钮2-2
  59.   SonButton sb22 = new SonButton();
  60.   sb22.setName("scancode_push");
  61.   sb22.setType("scancode_push");
  62.   sb22.setKey("22");
  63.   // 子按钮2-3
  64.   SonButton sb23 = new SonButton();
  65.   sb23.setName("scancode_waitmsg");
  66.   sb23.setType("scancode_waitmsg");
  67.   sb23.setKey("23");
  68.   // 子按钮2-4
  69.   SonButton sb24 = new SonButton();
  70.   sb24.setName("pic_sysphoto");
  71.   sb24.setType("pic_sysphoto");
  72.   sb24.setKey("24");
  73.   // 子按钮2-5
  74.   SonButton sb25 = new SonButton();
  75.   sb25.setName("pic_photo_or_album");
  76.   sb25.setType("pic_photo_or_album");
  77.   sb25.setKey("25");

  78.   // 添加子按钮到子按钮集合
  79.   sonButtons2.add(sb21);
  80.   sonButtons2.add(sb22);
  81.   sonButtons2.add(sb23);
  82.   sonButtons2.add(sb24);
  83.   sonButtons2.add(sb25);

  84.   // 将子按钮放到2-0父按钮集合
  85.   fb2.setSonButtons(sonButtons2);

  86.   // ------------------
  87.   // 父按钮3
  88.   FatherButton fb3 = new FatherButton();
  89.   fb3.setName("父按钮3");
  90.   List<SonButton> sonButtons3 = new ArrayList<SonButton>();

  91.   // 子按钮3-1
  92.   SonButton sb31 = new SonButton();
  93.   sb31.setName("pic_weixin");
  94.   sb31.setType("pic_weixin");
  95.   sb31.setKey("31");
  96.   // 子按钮3-2
  97.   SonButton sb32 = new SonButton();
  98.   sb32.setName("locatselect");
  99.   sb32.setType("location_select");
  100.   sb32.setKey("32");
  101.   // // 子按钮3-3-->测试不了,因为要media_id。这需要调用素材id.
  102.   // SonButton sb33 = new SonButton();
  103.   // sb33.setName("media_id");
  104.   // sb33.setType("media_id");
  105.   // sb33.setMedia_id("???");
  106.   // // 子按钮3-4-->测试不了,因为要media_id。这需要调用素材id.
  107.   // SonButton sb34 = new SonButton();
  108.   // sb34.setName("view_limited");
  109.   // sb34.setType("view_limited");
  110.   // sb34.setMedia_id("???");

  111.   // 添加子按钮到子按钮队列
  112.   sonButtons3.add(sb31);
  113.   sonButtons3.add(sb32);
  114.   // sonButtons3.add(sb33);
  115.   // sonButtons3.add(sb34);

  116.   // 将子按钮放到3-0父按钮队列
  117.   fb3.setSonButtons(sonButtons3);
  118.   // ---------------------

  119.   // 将父按钮加入到父按钮集合
  120.   fatherButtons.add(fb1);
  121.   fatherButtons.add(fb2);
  122.   fatherButtons.add(fb3);

  123.   // 将父按钮队列加入到菜单栏
  124.   menu.setFatherButtons(fatherButtons);
  125.   String json = gson.toJson(menu);
  126.   System.out.println(json);// 测试输出
  127.   return json;

  128. }
复制代码

  个性化菜单的实现
  
  •   任务:根据性别展示不同的按钮显示(可以根据性别、地区、分组手机操作系统等)
  •   修改代码一,因为是不同的微信后台实现,所以接口也不一样,不过还是POST请求,代码不用改,只要替换原来urlString即可。
  1. // 拼接api要求的httpsurl链接
  2. String urlString = "https://api.weixin.qq.com/cgi-bin/menu/addconditional?access_token="
  3.    + ACCESS_TOKEN;
复制代码

  •   修改代码二,只要创建一个MatchRule,设置匹配规则,然后将matchrule加入到menu便可以完成匹配规则。
  1. // -----
  2. // 从此处开始设置个性菜单
  3. MatchRule matchrule = new MatchRule();
  4. matchrule.setSex("2");// 男生
  5. menu.setMatchrule(matchrule);
  6. // ----
复制代码


相关帖子

发表于 2017-1-17 17:14:22 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

发表于 2017-1-21 08:06:59 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-8-31 10:10:51 | 显示全部楼层
楼主分享得很棒棒,值得学习
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部