微信公号开发之图文消息全攻略

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

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

图文消息的主要参数说明

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

从图中可以了解到:

1)图文消息的个数限制为10,也就是图中ArticleCount的值(图文消息的个数,限制在10条以内);

2)对于多图文消息,***条图文的图片显示为大图,其他图文的图片显示为小图;

3)***条图文的图片大小建议为640*320,其他图文的图片大小建议为80*80;

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

图文消息的多种表现形式

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

  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个月。为帮助初学者入门,特推出此系列连载教程,也希望借此机会认识更多同行!\n\n目前已推出教程共12篇,包括接口配置、消息封装、框架搭建、QQ表情发送、符号表情发送等。\n\n后期还计划推出一些实用功能的开发讲解,例如:天气预报、周边搜索、聊天功能等。"); 
  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("微信公众帐号开发教程\n引言"); 
  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篇\n微信公众帐号的类型"); 
  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篇\n开发模式启用及接口配置"); 
  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篇\n消息及消息处理工具的封装"); 
  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篇\n各种消息的接收与响应"); 
  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篇\n文本消息的内容长度限制揭秘"); 
  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篇\n文本消息中换行符的使用"); 
  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篇\n文本消息中使用网页超链接"); 
  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.     } 

上面代码实现的功能是当用户发送数字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条。这样在绝大多数终端上一屏能够显示完,用户扫一眼就能大概了解消息的主要内容,这样最有可能促使用户去点击并阅读。

责任编辑:徐川 来源: blog
相关推荐

2013-11-13 00:51:22

微信微信公号微信公众账号

2013-11-13 00:14:16

微信微信公号微信公众账号

2013-11-12 23:32:53

微信公号微信公众账号

2013-11-13 01:25:33

微信微信公号微信公众账号

2013-11-13 00:20:01

微信微信公号微信公众账号

2017-07-06 17:39:53

JavaScript开发程序员

2014-09-24 11:11:08

微信企业号开发

2014-09-24 11:32:21

微信企业号开发

2009-07-04 11:26:12

unix应急安全攻略

2009-07-17 17:43:49

Jruby开发Web

2013-11-13 01:19:18

2011-08-03 15:31:40

号贩子网上预约挂号

2010-04-23 14:04:23

Oracle日期操作

2013-06-08 11:13:00

Android开发XML解析

2013-04-15 10:48:16

Xcode ARC详解iOS ARC使用

2011-04-22 15:42:48

Windows 7

2013-04-09 16:41:47

微信自媒体微信公众平台

2009-02-20 11:43:22

UNIXfish全攻略

2009-10-19 15:20:01

家庭综合布线

2014-03-19 17:22:33

点赞
收藏

51CTO技术栈公众号