引言及內容概要
已經有幾位讀者抱怨"柳峰只用到文本消息作為示例，從來不提圖文消息，都不知道圖文消息該如何使用"，好吧，我錯了，原本以為把基礎API封裝完、框架搭建好，再給出一個文本消息的使用示例，大家就能夠照貓畫虎的，或許是因為我的繪畫功底太差，畫出的那只貓本來就不像貓吧……
本篇主要介紹微信公眾帳號開發中圖文消息的使用，以及圖文消息的幾種表現形式。標題取名為"圖文消息全攻略"，這絕對不是標題黨，是想借此機會把大家對圖文消息相關的問題、疑慮、障礙全部清除掉。
圖文消息的主要參數說明
通過微信官方的消息接口指南，可以看到對圖文消息的參數介紹，如下圖所示：
從圖中可以了解到：
- 圖文消息的個數限制為10，也就是圖中ArticleCount的值（圖文消息的個數，限制在10條以內）；
- 對于多圖文消息，第一條圖文的圖片顯示為大圖，其他圖文的圖片顯示為小圖；
- 第一條圖文的圖片大小建議為640*320，其他圖文的圖片大小建議為80*80；
圖文消息的多種表現形式
下面直接通過代碼演示圖文消息最主要的五種表現形式的用法，源代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
package org.liufeng.course.service;import java.util.ArrayList;import java.util.Date;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.liufeng.course.message.resp.Article;import org.liufeng.course.message.resp.NewsMessage;import org.liufeng.course.message.resp.TextMessage;import org.liufeng.course.util.MessageUtil;/** * 核心服務類 * * @author liufeng * @date 2013-07-25 */public class CoreService { /** * 處理微信發來的請求 * * @param request * @return */ public static String processRequest(HttpServletRequest request) { String respMessage = null; try { // xml請求解析 Map<String, String> requestMap = MessageUtil.parseXml(request); // 發送方帳號（open_id） String fromUserName = requestMap.get("FromUserName"); // 公眾帳號 String toUserName = requestMap.get("ToUserName"); // 消息類型 String msgType = requestMap.get("MsgType"); // 默認回復此文本消息 TextMessage textMessage = new TextMessage(); textMessage.setToUserName(fromUserName); textMessage.setFromUserName(toUserName); textMessage.setCreateTime(new Date().getTime()); textMessage.setMsgType(MessageUtil.RESP_MESSAGE_TYPE_TEXT); textMessage.setFuncFlag(0); // 由于href屬性值必須用雙引號引起，這與字符串本身的雙引號沖突，所以要轉義 textMessage.setContent("歡迎訪問<a href=\"http://blog.csdn.net/lyq8479\">柳峰的博客</a>!"); // 將文本消息對象轉換成xml字符串 respMessage = MessageUtil.textMessageToXml(textMessage); // 文本消息 if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_TEXT)) { // 接收用戶發送的文本消息內容 String content = requestMap.get("Content"); // 創建圖文消息 NewsMessage newsMessage = new NewsMessage(); newsMessage.setToUserName(fromUserName); newsMessage.setFromUserName(toUserName); newsMessage.setCreateTime(new Date().getTime()); newsMessage.setMsgType(MessageUtil.RESP_MESSAGE_TYPE_NEWS); newsMessage.setFuncFlag(0); List<Article> articleList = new ArrayList<Article>(); // 單圖文消息 if ("1".equals(content)) { Article article = new Article(); article.setTitle("微信公眾帳號開發教程Java版"); article.setDescription("柳峰，80后，微信公眾帳號開發經驗4個月。為幫助初學者入門，特推出此系列教程，也希望借此機會認識更多同行！"); article.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); article.setUrl("http://blog.csdn.net/lyq8479"); articleList.add(article); // 設置圖文消息個數 newsMessage.setArticleCount(articleList.size()); // 設置圖文消息包含的圖文集合 newsMessage.setArticles(articleList); // 將圖文消息對象轉換成xml字符串 respMessage = MessageUtil.newsMessageToXml(newsMessage); } // 單圖文消息---不含圖片 else if ("2".equals(content)) { Article article = new Article(); article.setTitle("微信公眾帳號開發教程Java版"); // 圖文消息中可以使用QQ表情、符號表情 article.setDescription("柳峰，80后，" + emoji(0x1F6B9) + "，微信公眾帳號開發經驗4個月。為幫助初學者入門，特推出此系列連載教程，也希望借此機會認識更多同行！\n\n目前已推出教程共12篇，包括接口配置、消息封裝、框架搭建、QQ表情發送、符號表情發送等。\n\n后期還計劃推出一些實用功能的開發講解，例如：天氣預報、周邊搜索、聊天功能等。"); // 將圖片置為空 article.setPicUrl(""); article.setUrl("http://blog.csdn.net/lyq8479"); articleList.add(article); newsMessage.setArticleCount(articleList.size()); newsMessage.setArticles(articleList); respMessage = MessageUtil.newsMessageToXml(newsMessage); } // 多圖文消息 else if ("3".equals(content)) { Article article1 = new Article(); article1.setTitle("微信公眾帳號開發教程\n引言"); article1.setDescription(""); article1.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); article1.setUrl("http://blog.csdn.net/lyq8479/article/details/8937622"); Article article2 = new Article(); article2.setTitle("第2篇\n微信公眾帳號的類型"); article2.setDescription(""); article2.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg"); article2.setUrl("http://blog.csdn.net/lyq8479/article/details/8941577"); Article article3 = new Article(); article3.setTitle("第3篇\n開發模式啟用及接口配置"); article3.setDescription(""); article3.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg"); article3.setUrl("http://blog.csdn.net/lyq8479/article/details/8944988"); articleList.add(article1); articleList.add(article2); articleList.add(article3); newsMessage.setArticleCount(articleList.size()); newsMessage.setArticles(articleList); respMessage = MessageUtil.newsMessageToXml(newsMessage); } // 多圖文消息---首條消息不含圖片 else if ("4".equals(content)) { Article article1 = new Article(); article1.setTitle("微信公眾帳號開發教程Java版"); article1.setDescription(""); // 將圖片置為空 article1.setPicUrl(""); article1.setUrl("http://blog.csdn.net/lyq8479"); Article article2 = new Article(); article2.setTitle("第4篇\n消息及消息處理工具的封裝"); article2.setDescription(""); article2.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg"); article2.setUrl("http://blog.csdn.net/lyq8479/article/details/8949088"); Article article3 = new Article(); article3.setTitle("第5篇\n各種消息的接收與響應"); article3.setDescription(""); article3.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg"); article3.setUrl("http://blog.csdn.net/lyq8479/article/details/8952173"); Article article4 = new Article(); article4.setTitle("第6篇\n文本消息的內容長度限制揭秘"); article4.setDescription(""); article4.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg"); article4.setUrl("http://blog.csdn.net/lyq8479/article/details/8967824"); articleList.add(article1); articleList.add(article2); articleList.add(article3); articleList.add(article4); newsMessage.setArticleCount(articleList.size()); newsMessage.setArticles(articleList); respMessage = MessageUtil.newsMessageToXml(newsMessage); } // 多圖文消息---最后一條消息不含圖片 else if ("5".equals(content)) { Article article1 = new Article(); article1.setTitle("第7篇\n文本消息中換行符的使用"); article1.setDescription(""); article1.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); article1.setUrl("http://blog.csdn.net/lyq8479/article/details/9141467"); Article article2 = new Article(); article2.setTitle("第8篇\n文本消息中使用網頁超鏈接"); article2.setDescription(""); article2.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg"); article2.setUrl("http://blog.csdn.net/lyq8479/article/details/9157455"); Article article3 = new Article(); article3.setTitle("如果覺得文章對你有所幫助，請通過博客留言或關注微信公眾帳號xiaoqrobot來支持柳峰！"); article3.setDescription(""); // 將圖片置為空 article3.setPicUrl(""); article3.setUrl("http://blog.csdn.net/lyq8479"); articleList.add(article1); articleList.add(article2); articleList.add(article3); newsMessage.setArticleCount(articleList.size()); newsMessage.setArticles(articleList); respMessage = MessageUtil.newsMessageToXml(newsMessage); } } } catch (Exception e) { e.printStackTrace(); } return respMessage; } /** * emoji表情轉換(hex -> utf-16) * * @param hexEmoji * @return */ public static String emoji(int hexEmoji) { return String.valueOf(Character.toChars(hexEmoji)); }} |
上面代碼實現的功能是當用戶發送數字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條。這樣在絕大多數終端上一屏能夠顯示完，用戶掃一眼就能大概了解消息的主要內容，這樣最有可能促使用戶去點擊并閱讀。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持服務器之家！
原文鏈接：http://www.5icool.org/a/201308/a2151.html
