引言及內容概要
已經有幾位讀者抱怨"柳峰只用到文本消息作為示例，從來不提圖文消息，都不知道圖文消息該如何使用"，好吧，我錯了，原本以為把基礎API封裝完、框架搭建好，再給出一個文本消息的使用示例，大家就能夠照貓畫虎的，或許是因為我的繪畫功底太差，畫出的那只貓本來就不像貓吧……
本篇主要介紹微信公眾帳號開發中圖文消息的使用，以及圖文消息的幾種表現形式。標題取名為"圖文消息全攻略"，這絕對不是標題黨，是想借此機會把大家對圖文消息相關的問題、疑慮、障礙全部清除掉。
圖文消息的主要參數說明
通過微信官方的消息接口指南，可以看到對圖文消息的參數介紹，如下圖所示：
從圖中可以了解到：
圖文消息的多種表現形式
下面直接通過代碼演示圖文消息最主要的五種表現形式的用法，源代碼如下：
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條。這樣在絕大多數終端上一屏能夠顯示完，用戶掃一眼就能大概了解消息的主要內容，這樣最有可能促使用戶去點擊并閱讀。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
