微信公眾帳號開發教程第13篇-圖文消息全攻略

引言及內容概要

已經有幾位讀者抱怨“柳峰只用到文本消息作為示例，從來不提圖文消息，都不知道圖文消息該如何使用”，好吧，我錯了，原本以為把基礎API封裝完、框架搭建好，再給出一個文本消息的使用示例，大家就能夠照貓畫虎的，或許是因為我的繪畫功底太差，畫出的那只貓本來就不像貓吧……

本篇主要介紹微信公眾帳號開發中圖文消息的使用，以及圖文消息的幾種表現形式。標題取名為“圖文消息全攻略”，這絕對不是標題黨，是想借此機會把大家對圖文消息相關的問題、疑慮、障礙全部清除掉。

圖文消息的主要參數說明

通過微信官方的消息接口指南，可以看到對圖文消息的參數介紹，如下圖所示：

從圖中可以了解到：

1）圖文消息的個數限制為10，也就是圖中ArticleCount的值（圖文消息的個數，限制在10條以內）；

2）對於多圖文消息，第一條圖文的圖片顯示為大圖，其他圖文的圖片顯示為小圖；

3）第一條圖文的圖片大小建議為640*320，其他圖文的圖片大小建議為80*80；

好了，了解這些，再結合第4篇文章所講的消息及消息處理工具的封裝，想要回復圖文消息給用戶也就不是什麼難事了。

圖文消息的多種表現形式

下面直接通過代碼演示圖文消息最主要的五種表現形式的用法，源代碼如下：

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

如果不明白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條。這樣在絕大多數終端上一屏能夠顯示完，用戶掃一眼就能大概了解消息的主要內容，這樣最有可能促使用戶去點擊並閱讀。