引言及内容概要
已經有幾位讀者抱怨“柳峰僅僅用到文本消息作為示範例子，從來不提圖文消息，都不知道圖文消息該怎樣使用”，好吧，我錯了，原本以為把基礎API封裝完、架構搭建好，再給出一個文本消息的使用示範例子，大家就能夠照貓畫虎的，也許是由于我的繪畫功底太差，畫出的那僅僅貓本來就不像貓吧……
本篇主要介紹微信公衆帳号開發中圖文消息的使用，以及圖文消息的幾種表現形式。标題取名為“圖文消息全攻略”，這絕對不是标題黨，是想借此機會把大家對圖文消息相關的問題、疑慮、障礙所有清除掉。
圖文消息的主要參數解釋
從圖中能夠了解到：
1）圖文消息的個數限制為10，也就是圖中ArticleCount的值（圖文消息的個數，限制在10條以内）；
2）對于多圖文消息，第一條圖文的圖檔顯示為大圖，其它圖文的圖檔顯示為小圖；
3）第一條圖文的圖檔大小建議為640*320，其它圖文的圖檔大小建議為80*80；
圖文消息的多種表現形式
以下直接通過代碼示範圖文消息最基本的五種表現形式的使用方法，源碼例如以下：
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)) {
// 圖文消息中能夠使用QQ表情、符号表情
article.setDescription("柳峰，80後，" + emoji(0x1F6B9)
+ "，微信公衆帳号開發經驗4個月。為幫助剛開始學習的人入門，特推出此系列連載教程，也希望借此機會認識許多其他同行！\n\n眼下已推出教程共12篇，包括接口配置、消息封裝、架構搭建、QQ表情發送、符号表情發送等。\n\n後期還計劃推出一些有用功能的開發解說，比如：天氣預報、周邊搜尋、聊天功能等。");
// 将圖檔置為空
article.setPicUrl("");
// 多圖文消息
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);
// 多圖文消息---首條消息不含圖檔
else if ("4".equals(content)) {
article1.setTitle("微信公衆帳号開發教程Java版");
article1.setPicUrl("");
article1.setUrl("http://blog.csdn.net/lyq8479");
article2.setTitle("第4篇\n消息及消息處理工具的封裝");
article2.setUrl("http://blog.csdn.net/lyq8479/article/details/8949088");
article3.setTitle("第5篇\n各種消息的接收與響應");
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(article4);
// 多圖文消息---最後一條消息不含圖檔
else if ("5".equals(content)) {
article1.setTitle("第7篇\n文本消息中換行符的使用");
article1.setUrl("http://blog.csdn.net/lyq8479/article/details/9141467");
article2.setTitle("第8篇\n文本消息中使用網頁超連結");
article2.setUrl("http://blog.csdn.net/lyq8479/article/details/9157455");
article3.setTitle("假設認為文章對你有所幫助，請通過部落格留言或關注微信公衆帳号xiaoqrobot來支援柳峰！");
article3.setPicUrl("");
article3.setUrl("http://blog.csdn.net/lyq8479");
}
} catch (Exception e) {
e.printStackTrace();
}
return respMessage;
}
* emoji表情轉換(hex -> utf-16)
* @param hexEmoji
public static String emoji(int hexEmoji) {
return String.valueOf(Character.toChars(hexEmoji));
}
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條。這樣在絕大多數終端上一屏能夠顯示完，使用者掃一眼就能大概了解消息的主要内容，這樣最有可能促使使用者去點選并閱讀。