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

痛定思痛。 2022-05-25 13:57 298阅读 0赞

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

**图文消息的主要参数说明**

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

[![wKioJlKCWbexuhBEAACsAgsm718653.jpg-wh_651x-s_3010061606.jpg][]][wKioJlKCWbexuhBEAACsAgsm718653.jpg-wh_651x-s_3010061606.jpg]

从图中可以了解到：

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

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

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

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

图文消息的多种表现形式

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

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.     \} 
203. \}

上面代码实现的功能是当用户发送数字1-5时，分别回复五种不同表现形式的图文消息给用户，如下：

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

[![wKioJlKCWrvw_N4VAABoo221tXE159.jpg][]][wKioJlKCWrvw_N4VAABoo221tXE159.jpg]

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

[![wKioOVKCWt3QYxXaAABw_TiniyA217.jpg][]][wKioOVKCWt3QYxXaAABw_TiniyA217.jpg]

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

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

[![wKioOVKCW4vCY5o2AABuCGt2KSY760.jpg][]][wKioOVKCW4vCY5o2AABuCGt2KSY760.jpg]

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

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

[![wKioJlKCWvvQ_l2IAABsmYGSp9Q194.jpg][]][wKioJlKCWvvQ_l2IAABsmYGSp9Q194.jpg]

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

[![wKioOVKCWxeBEpiAAAB17HoroIU457.jpg][]][wKioOVKCWxeBEpiAAAB17HoroIU457.jpg]

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

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

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

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

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

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

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

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

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

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

[Link 1]: http://mp.weixin.qq.com/wiki/index.php?title=%E6%B6%88%E6%81%AF%E6%8E%A5%E5%8F%A3%E6%8C%87%E5%8D%97#.E5.9B.9E.E5.A4.8D.E5.9B.BE.E6.96.87.E6.B6.88.E6.81.AF
[wKioJlKCWbexuhBEAACsAgsm718653.jpg-wh_651x-s_3010061606.jpg]: /images/20220525/fc4497dbd0474a8a88a2075629584c6a.png
[Link 2]: http://mobile.51cto.com/web-416965.htm
[wKioJlKCWrvw_N4VAABoo221tXE159.jpg]: /images/20220525/0c531efb4361423ca2bc753e6f87753c.png
[wKioOVKCWt3QYxXaAABw_TiniyA217.jpg]: /images/20220525/c638629dd5bf4b84a6ce1e09a257c7fd.png
[wKioOVKCW4vCY5o2AABuCGt2KSY760.jpg]: /images/20220525/853bebb62e19447087eb05492cb349dd.png
[wKioJlKCWvvQ_l2IAABsmYGSp9Q194.jpg]: /images/20220525/2339b2070cd94d518ec336c23a5b84b6.png
[wKioOVKCWxeBEpiAAAB17HoroIU457.jpg]: /images/20220525/2f8be5c7433c4a048eb3d1c5b4752b04.png