本篇主要介紹微信公眾帳號(hào)開(kāi)發(fā)中圖文消息的使用，以及圖文消息的幾種表現(xiàn)形式。標(biāo)題取名為“圖文消息全攻略”，這絕對(duì)不是標(biāo)題黨，是想借此機(jī)會(huì)把大家對(duì)圖文消息相關(guān)的問(wèn)題、疑慮、障礙全部清除掉。

圖文消息的主要參數(shù)說(shuō)明

通過(guò)微信官方的消息接口指南，可以看到對(duì)圖文消息的參數(shù)介紹，如下圖所示：

從圖中可以了解到：

1）圖文消息的個(gè)數(shù)限制為10，也就是圖中ArticleCount的值（圖文消息的個(gè)數(shù)，限制在10條以內(nèi)）；

2）對(duì)于多圖文消息，***條圖文的圖片顯示為大圖，其他圖文的圖片顯示為小圖；

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

好了，了解這些，再結(jié)合前面所講的消息及消息處理工具的封裝，想要回復(fù)圖文消息給用戶也就不是什么難事了。

圖文消息的多種表現(xiàn)形式

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

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; 
 
/** 
 * 核心服務(wù)類(lèi) 
 *  
 * @author liufeng 
 * @date 2013-07-25 
 */ 
public class CoreService { 
    /** 
     * 處理微信發(fā)來(lái)的請(qǐng)求 
     *  
     * @param request 
     * @return 
     */ 
    public static String processRequest(HttpServletRequest request) { 
        String respMessage = null; 
        try { 
            // xml請(qǐng)求解析 
            Map<String, String> requestMap = MessageUtil.parseXml(request); 
 
            // 發(fā)送方帳號(hào)（open_id） 
            String fromUserName = requestMap.get("FromUserName"); 
            // 公眾帳號(hào) 
            String toUserName = requestMap.get("ToUserName"); 
            // 消息類(lèi)型 
            String msgType = requestMap.get("MsgType"); 
 
            // 默認(rèn)回復(fù)此文本消息 
            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屬性值必須用雙引號(hào)引起，這與字符串本身的雙引號(hào)沖突，所以要轉(zhuǎn)義 
            textMessage.setContent("歡迎訪問(wèn)<a href=\"http://blog.csdn.net/lyq8479\">柳峰的博客</a>!"); 
            // 將文本消息對(duì)象轉(zhuǎn)換成xml字符串 
            respMessage = MessageUtil.textMessageToXml(textMessage); 
 
            // 文本消息 
            if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_TEXT)) { 
                // 接收用戶發(fā)送的文本消息內(nèi)容 
                String content = requestMap.get("Content"); 
 
                // 創(chuàng)建圖文消息 
                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("微信公眾帳號(hào)開(kāi)發(fā)教程Java版"); 
                    article.setDescription("柳峰，80后，微信公眾帳號(hào)開(kāi)發(fā)經(jīng)驗(yàn)4個(gè)月。為幫助初學(xué)者入門(mén)，特推出此系列教程，也希望借此機(jī)會(huì)認(rèn)識(shí)更多同行！"); 
                    article.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); 
                    article.setUrl("http://blog.csdn.net/lyq8479"); 
                    articleList.add(article); 
                    // 設(shè)置圖文消息個(gè)數(shù) 
                    newsMessage.setArticleCount(articleList.size()); 
                    // 設(shè)置圖文消息包含的圖文集合 
                    newsMessage.setArticles(articleList); 
                    // 將圖文消息對(duì)象轉(zhuǎn)換成xml字符串 
                    respMessage = MessageUtil.newsMessageToXml(newsMessage); 
                } 
                // 單圖文消息---不含圖片 
                else if ("2".equals(content)) { 
                    Article article = new Article(); 
                    article.setTitle("微信公眾帳號(hào)開(kāi)發(fā)教程Java版"); 
                    // 圖文消息中可以使用QQ表情、符號(hào)表情 
                    article.setDescription("柳峰，80后，" + emoji(0x1F6B9) 
                            + "，微信公眾帳號(hào)開(kāi)發(fā)經(jīng)驗(yàn)4個(gè)月。為幫助初學(xué)者入門(mén)，特推出此系列連載教程，也希望借此機(jī)會(huì)認(rèn)識(shí)更多同行！\n\n目前已推出教程共12篇，包括接口配置、消息封裝、框架搭建、QQ表情發(fā)送、符號(hào)表情發(fā)送等。\n\n后期還計(jì)劃推出一些實(shí)用功能的開(kāi)發(fā)講解，例如：天氣預(yù)報(bào)、周邊搜索、聊天功能等。"); 
                    // 將圖片置為空 
                    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("微信公眾帳號(hào)開(kāi)發(fā)教程\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微信公眾帳號(hào)的類(lèi)型"); 
                    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開(kāi)發(fā)模式啟用及接口配置"); 
                    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("微信公眾帳號(hào)開(kāi)發(fā)教程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各種消息的接收與響應(yīng)"); 
                    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文本消息的內(nèi)容長(zhǎng)度限制揭秘"); 
                    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文本消息中使用網(wǎng)頁(yè)超鏈接"); 
                    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("如果覺(jué)得文章對(duì)你有所幫助，請(qǐng)通過(guò)博客留言或關(guān)注微信公眾帳號(hào)xiaoqrobot來(lái)支持柳峰！"); 
                    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表情轉(zhuǎn)換(hex -> utf-16) 
     *  
     * @param hexEmoji 
     * @return 
     */ 
    public static String emoji(int hexEmoji) { 
        return String.valueOf(Character.toChars(hexEmoji)); 
    } 
} 

上面代碼實(shí)現(xiàn)的功能是當(dāng)用戶發(fā)送數(shù)字1-5時(shí)，分別回復(fù)五種不同表現(xiàn)形式的圖文消息給用戶，如下：

a）用戶發(fā)送1，回復(fù)單圖文消息。參考代碼68~81行，運(yùn)行效果如下：

b）用戶發(fā)送2，回復(fù)單圖文消息---不含圖片。參考代碼82~96行，運(yùn)行效果如下：

說(shuō)明：圖文消息的標(biāo)題、描述是可以包含QQ表情、符號(hào)表情的。

c）用戶發(fā)送3，回復(fù)多圖文消息。參考代碼97~123行，運(yùn)行效果如下：

說(shuō)明：對(duì)于多圖文消息，描述不會(huì)被顯示，可以在標(biāo)題使用換行符，使得顯示更加美觀。

d）用戶發(fā)送4，回復(fù)多圖文消息---首條消息不含圖片。參考代碼124~158行，運(yùn)行效果如下：

e）用戶發(fā)送5，回復(fù)多圖文消息---***一條消息不含圖片。參考代碼159~186行，運(yùn)行效果如下：

可以看出，圖文消息有著豐富的內(nèi)容及多樣化的表現(xiàn)形式，希望大家能夠根據(jù)各自的特點(diǎn)及實(shí)際使用需要，合理地運(yùn)用。

***，根據(jù)實(shí)踐經(jīng)驗(yàn)，我對(duì)圖文消息做一個(gè)使用總結(jié)：

1）一定要給圖文消息的Url屬性賦值。不管是單圖文，還是多圖文，或者是不含圖片的圖文，都有可能會(huì)被用戶點(diǎn)擊。如果Url為空，用戶點(diǎn)擊后將會(huì)打開(kāi)一個(gè)空白頁(yè)面，這給用戶的體驗(yàn)是非常差的；

2）只有單圖文的描述才會(huì)顯示，多圖文的描述不會(huì)被顯示；

3）圖文消息的標(biāo)題、描述中可以使用QQ表情和符號(hào)表情。合理地運(yùn)用表情符號(hào)，會(huì)使得消息更加生動(dòng)；

4）圖文消息的標(biāo)題、描述中可以使用換行符。合理地使用換行符，會(huì)使得內(nèi)容結(jié)構(gòu)更加清晰；

5）圖文消息的標(biāo)題、描述中不支持超文本鏈接（html的<a>標(biāo)簽）。不只是技術(shù)上實(shí)現(xiàn)不了，就連邏輯上也說(shuō)不通，因?yàn)橐粭l圖文消息的任何位置被點(diǎn)擊，都將調(diào)用微信內(nèi)置的瀏覽器打開(kāi)Url，如果標(biāo)題、描述里再放幾個(gè)超鏈接，不知道點(diǎn)擊該打開(kāi)哪個(gè)頁(yè)面。真搞不懂為什么有好幾個(gè)同學(xué)都在問(wèn)這個(gè)問(wèn)題，難道設(shè)計(jì)成多圖文不好嗎？

6）圖文消息的鏈接、圖片鏈接可以使用外部域名下的資源，如本例中：柳峰的頭像、博文的鏈接，都是指向CSDN網(wǎng)站的資源。在網(wǎng)上，甚至是微信官方交流群里，認(rèn)為圖文消息的Url、PicUrl不可以使用外鏈的大有人在，不知道這謠言從哪開(kāi)始的，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)！

7）使用指定大小的圖片。***條圖文的圖片大小建議為640*320，其他圖文的圖片大小建議為80*80。如果使用的圖片太大，加載慢，而且耗流量；如果使用的圖片太小，顯示后會(huì)被拉伸，失真了很難看。

8）每條圖文消息的圖文建議控制在1-4條。這樣在絕大多數(shù)終端上一屏能夠顯示完，用戶掃一眼就能大概了解消息的主要內(nèi)容，這樣最有可能促使用戶去點(diǎn)擊并閱讀。