• [037] 微信公众帐号开发教程第13篇-图文消息全攻略

    引言及内容概要

    已经有几位读者抱怨“柳峰只用到文本消息作为示例，从来不提图文消息，都不知道图文消息该如何使用”，好吧，我错了，原本以为把基础API封装完、框架搭建好，再给出一个文本消息的使用示例，大家就能够照猫画虎的，或许是因为我的绘画功底太差，画出的那只猫本来就不像猫吧……

    本篇主要介绍微信公众帐号开发中图文消息的使用，以及图文消息的几种表现形式。标题取名为“图文消息全攻略”，这绝对不是标题党，是想借此机会把大家对图文消息相关的问题、疑虑、障碍全部清除掉。

    图文消息的主要参数说明

    通过微信官方的消息接口指南，可以看到对图文消息的参数介绍，如下图所示：

    从图中可以了解到：

    1）图文消息的个数限制为10，也就是图中ArticleCount的值（图文消息的个数，限制在10条以内）；

    2）对于多图文消息，第一条图文的图片显示为大图，其他图文的图片显示为小图；

    3）第一条图文的图片大小建议为640*320，其他图文的图片大小建议为80*80；

    好了，了解这些，再结合第4篇文章所讲的消息及消息处理工具的封装，想要回复图文消息给用户也就不是什么难事了。

    图文消息的多种表现形式

    下面直接通过代码演示图文消息最主要的五种表现形式的用法，源代码如下：

    [java] view plaincopy
     
    1. package org.liufeng.course.service;  
    2.   
    3. import java.util.ArrayList;  
    4. import java.util.Date;  
    5. import java.util.List;  
    6. import java.util.Map;  
    7.   
    8. import javax.servlet.http.HttpServletRequest;  
    9.   
    10. import org.liufeng.course.message.resp.Article;  
    11. import org.liufeng.course.message.resp.NewsMessage;  
    12. import org.liufeng.course.message.resp.TextMessage;  
    13. import org.liufeng.course.util.MessageUtil;  
    14.   
    15. /** 
    16.  * 核心服务类 
    17.  *  
    18.  * @author liufeng 
    19.  * @date 2013-07-25 
    20.  */  
    21. public class CoreService {  
    22.     /** 
    23.      * 处理微信发来的请求 
    24.      *  
    25.      * @param request 
    26.      * @return 
    27.      */  
    28.     public static String processRequest(HttpServletRequest request) {  
    29.         String respMessage = null;  
    30.         try {  
    31.             // xml请求解析  
    32.             Map<String, String> requestMap = MessageUtil.parseXml(request);  
    33.   
    34.             // 发送方帐号（open_id）  
    35.             String fromUserName = requestMap.get("FromUserName");  
    36.             // 公众帐号  
    37.             String toUserName = requestMap.get("ToUserName");  
    38.             // 消息类型  
    39.             String msgType = requestMap.get("MsgType");  
    40.   
    41.             // 默认回复此文本消息  
    42.             TextMessage textMessage = new TextMessage();  
    43.             textMessage.setToUserName(fromUserName);  
    44.             textMessage.setFromUserName(toUserName);  
    45.             textMessage.setCreateTime(new Date().getTime());  
    46.             textMessage.setMsgType(MessageUtil.RESP_MESSAGE_TYPE_TEXT);  
    47.             textMessage.setFuncFlag(0);  
    48.             // 由于href属性值必须用双引号引起，这与字符串本身的双引号冲突，所以要转义  
    49.             textMessage.setContent("欢迎访问<a href="http://blog.csdn.net/lyq8479">柳峰的博客</a>!");  
    50.             // 将文本消息对象转换成xml字符串  
    51.             respMessage = MessageUtil.textMessageToXml(textMessage);  
    52.   
    53.             // 文本消息  
    54.             if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_TEXT)) {  
    55.                 // 接收用户发送的文本消息内容  
    56.                 String content = requestMap.get("Content");  
    57.   
    58.                 // 创建图文消息  
    59.                 NewsMessage newsMessage = new NewsMessage();  
    60.                 newsMessage.setToUserName(fromUserName);  
    61.                 newsMessage.setFromUserName(toUserName);  
    62.                 newsMessage.setCreateTime(new Date().getTime());  
    63.                 newsMessage.setMsgType(MessageUtil.RESP_MESSAGE_TYPE_NEWS);  
    64.                 newsMessage.setFuncFlag(0);  
    65.   
    66.                 List<Article> articleList = new ArrayList<Article>();  
    67.                 // 单图文消息  
    68.                 if ("1".equals(content)) {  
    69.                     Article article = new Article();  
    70.                     article.setTitle("微信公众帐号开发教程Java版");  
    71.                     article.setDescription("柳峰，80后，微信公众帐号开发经验4个月。为帮助初学者入门，特推出此系列教程，也希望借此机会认识更多同行！");  
    72.                     article.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg");  
    73.                     article.setUrl("http://blog.csdn.net/lyq8479");  
    74.                     articleList.add(article);  
    75.                     // 设置图文消息个数  
    76.                     newsMessage.setArticleCount(articleList.size());  
    77.                     // 设置图文消息包含的图文集合  
    78.                     newsMessage.setArticles(articleList);  
    79.                     // 将图文消息对象转换成xml字符串  
    80.                     respMessage = MessageUtil.newsMessageToXml(newsMessage);  
    81.                 }  
    82.                 // 单图文消息---不含图片  
    83.                 else if ("2".equals(content)) {  
    84.                     Article article = new Article();  
    85.                     article.setTitle("微信公众帐号开发教程Java版");  
    86.                     // 图文消息中可以使用QQ表情、符号表情  
    87.                     article.setDescription("柳峰，80后，" + emoji(0x1F6B9)  
    88.                             + "，微信公众帐号开发经验4个月。为帮助初学者入门，特推出此系列连载教程，也希望借此机会认识更多同行！ 目前已推出教程共12篇，包括接口配置、消息封装、框架搭建、QQ表情发送、符号表情发送等。 后期还计划推出一些实用功能的开发讲解，例如：天气预报、周边搜索、聊天功能等。");  
    89.                     // 将图片置为空  
    90.                     article.setPicUrl("");  
    91.                     article.setUrl("http://blog.csdn.net/lyq8479");  
    92.                     articleList.add(article);  
    93.                     newsMessage.setArticleCount(articleList.size());  
    94.                     newsMessage.setArticles(articleList);  
    95.                     respMessage = MessageUtil.newsMessageToXml(newsMessage);  
    96.                 }  
    97.                 // 多图文消息  
    98.                 else if ("3".equals(content)) {  
    99.                     Article article1 = new Article();  
    100.                     article1.setTitle("微信公众帐号开发教程 引言");  
    101.                     article1.setDescription("");  
    102.                     article1.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg");  
    103.                     article1.setUrl("http://blog.csdn.net/lyq8479/article/details/8937622");  
    104.   
    105.                     Article article2 = new Article();  
    106.                     article2.setTitle("第2篇 微信公众帐号的类型");  
    107.                     article2.setDescription("");  
    108.                     article2.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg");  
    109.                     article2.setUrl("http://blog.csdn.net/lyq8479/article/details/8941577");  
    110.   
    111.                     Article article3 = new Article();  
    112.                     article3.setTitle("第3篇 开发模式启用及接口配置");  
    113.                     article3.setDescription("");  
    114.                     article3.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg");  
    115.                     article3.setUrl("http://blog.csdn.net/lyq8479/article/details/8944988");  
    116.   
    117.                     articleList.add(article1);  
    118.                     articleList.add(article2);  
    119.                     articleList.add(article3);  
    120.                     newsMessage.setArticleCount(articleList.size());  
    121.                     newsMessage.setArticles(articleList);  
    122.                     respMessage = MessageUtil.newsMessageToXml(newsMessage);  
    123.                 }  
    124.                 // 多图文消息---首条消息不含图片  
    125.                 else if ("4".equals(content)) {  
    126.                     Article article1 = new Article();  
    127.                     article1.setTitle("微信公众帐号开发教程Java版");  
    128.                     article1.setDescription("");  
    129.                     // 将图片置为空  
    130.                     article1.setPicUrl("");  
    131.                     article1.setUrl("http://blog.csdn.net/lyq8479");  
    132.   
    133.                     Article article2 = new Article();  
    134.                     article2.setTitle("第4篇 消息及消息处理工具的封装");  
    135.                     article2.setDescription("");  
    136.                     article2.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg");  
    137.                     article2.setUrl("http://blog.csdn.net/lyq8479/article/details/8949088");  
    138.   
    139.                     Article article3 = new Article();  
    140.                     article3.setTitle("第5篇 各种消息的接收与响应");  
    141.                     article3.setDescription("");  
    142.                     article3.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg");  
    143.                     article3.setUrl("http://blog.csdn.net/lyq8479/article/details/8952173");  
    144.   
    145.                     Article article4 = new Article();  
    146.                     article4.setTitle("第6篇 文本消息的内容长度限制揭秘");  
    147.                     article4.setDescription("");  
    148.                     article4.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg");  
    149.                     article4.setUrl("http://blog.csdn.net/lyq8479/article/details/8967824");  
    150.   
    151.                     articleList.add(article1);  
    152.                     articleList.add(article2);  
    153.                     articleList.add(article3);  
    154.                     articleList.add(article4);  
    155.                     newsMessage.setArticleCount(articleList.size());  
    156.                     newsMessage.setArticles(articleList);  
    157.                     respMessage = MessageUtil.newsMessageToXml(newsMessage);  
    158.                 }  
    159.                 // 多图文消息---最后一条消息不含图片  
    160.                 else if ("5".equals(content)) {  
    161.                     Article article1 = new Article();  
    162.                     article1.setTitle("第7篇 文本消息中换行符的使用");  
    163.                     article1.setDescription("");  
    164.                     article1.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg");  
    165.                     article1.setUrl("http://blog.csdn.net/lyq8479/article/details/9141467");  
    166.   
    167.                     Article article2 = new Article();  
    168.                     article2.setTitle("第8篇 文本消息中使用网页超链接");  
    169.                     article2.setDescription("");  
    170.                     article2.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg");  
    171.                     article2.setUrl("http://blog.csdn.net/lyq8479/article/details/9157455");  
    172.   
    173.                     Article article3 = new Article();  
    174.                     article3.setTitle("如果觉得文章对你有所帮助，请通过博客留言或关注微信公众帐号xiaoqrobot来支持柳峰！");  
    175.                     article3.setDescription("");  
    176.                     // 将图片置为空  
    177.                     article3.setPicUrl("");  
    178.                     article3.setUrl("http://blog.csdn.net/lyq8479");  
    179.   
    180.                     articleList.add(article1);  
    181.                     articleList.add(article2);  
    182.                     articleList.add(article3);  
    183.                     newsMessage.setArticleCount(articleList.size());  
    184.                     newsMessage.setArticles(articleList);  
    185.                     respMessage = MessageUtil.newsMessageToXml(newsMessage);  
    186.                 }  
    187.             }  
    188.         } catch (Exception e) {  
    189.             e.printStackTrace();  
    190.         }  
    191.         return respMessage;  
    192.     }  
    193.   
    194.     /** 
    195.      * emoji表情转换(hex -> utf-16) 
    196.      *  
    197.      * @param hexEmoji 
    198.      * @return 
    199.      */  
    200.     public static String emoji(int hexEmoji) {  
    201.         return String.valueOf(Character.toChars(hexEmoji));  
    202.     }  
    203. }  

    如果不明白CoreService类放在什么位置，该如何使用，请查看本系列教程的第5篇。上面代码实现的功能是当用户发送数字1-5时，分别回复五种不同表现形式的图文消息给用户，如下：

    a）用户发送1，回复单图文消息。参考代码68~81行，运行效果如下：

    b）用户发送2，回复单图文消息---不含图片。参考代码82~96行，运行效果如下：

    说明：图文消息的标题、描述是可以包含QQ表情、符号表情的。

    c）用户发送3，回复多图文消息。参考代码97~123行，运行效果如下：

    说明：对于多图文消息，描述不会被显示，可以在标题使用换行符，使得显示更加美观。

    d）用户发送4，回复多图文消息---首条消息不含图片。参考代码124~158行，运行效果如下：

    e）用户发送5，回复多图文消息---最后一条消息不含图片。参考代码159~186行，运行效果如下：

    可以看出，图文消息有着丰富的内容及多样化的表现形式，希望大家能够根据各自的特点及实际使用需要，合理地运用。

    最后，根据实践经验，我对图文消息做一个使用总结：

    1）一定要给图文消息的Url属性赋值。不管是单图文，还是多图文，或者是不含图片的图文，都有可能会被用户点击。如果Url为空，用户点击后将会打开一个空白页面，这给用户的体验是非常差的；

    2）只有单图文的描述才会显示，多图文的描述不会被显示；

    3）图文消息的标题、描述中可以使用QQ表情和符号表情。合理地运用表情符号，会使得消息更加生动；

    4）图文消息的标题、描述中可以使用换行符。合理地使用换行符，会使得内容结构更加清晰；

    5）图文消息的标题、描述中不支持超文本链接（html的<a>标签）。不只是技术上实现不了，就连逻辑上也说不通，因为一条图文消息的任何位置被点击，都将调用微信内置的浏览器打开Url，如果标题、描述里再放几个超链接，不知道点击该打开哪个页面。真搞不懂为什么有好几个同学都在问这个问题，难道设计成多图文不好吗？

    6）图文消息的链接、图片链接可以使用外部域名下的资源，如本例中：柳峰的头像、博文的链接，都是指向CSDN网站的资源。在网上，甚至是微信官方交流群里，认为图文消息的Url、PicUrl不可以使用外链的大有人在，不知道这谣言从哪开始的，实践是检验真理的唯一标准！

    7）使用指定大小的图片。第一条图文的图片大小建议为640*320，其他图文的图片大小建议为80*80。如果使用的图片太大，加载慢，而且耗流量；如果使用的图片太小，显示后会被拉伸，失真了很难看。

    8）每条图文消息的图文建议控制在1-4条。这样在绝大多数终端上一屏能够显示完，用户扫一眼就能大概了解消息的主要内容，这样最有可能促使用户去点击并阅读。

    如果觉得文章对你有所帮助，请通过留言或关注微信公众帐号xiaoqrobot来支持柳峰！
  • 相关阅读:
    LDAP+Jenkins
    LDAP+SASL+SVN
    Ubuntu下的LDAP服务搭建
    LDAP+Confluence
    LDAP+Nextcloud
    vim -d
    linux默认编辑器
    vim相关调优
    MySQL中的保留字
    RHEL7配置ip地址
  • 原文地址：https://www.cnblogs.com/Alex80/p/4253413.html
Copyright © 2020-2023  润新知