微信公號開發(fā)之圖文消息全攻略
作者：柳峰
本篇主要介紹微信公眾帳號開發(fā)中圖文消息的使用，以及圖文消息的幾種表現(xiàn)形式。標題取名為“圖文消息全攻略”，這絕對不是標題黨，是想借此機會把大家對圖文消息相關的問題、疑慮、障礙全部清除掉。
本篇主要介紹微信公眾帳號開發(fā)中圖文消息的使用，以及圖文消息的幾種表現(xiàn)形式。標題取名為“圖文消息全攻略”，這絕對不是標題黨，是想借此機會把大家對圖文消息相關的問題、疑慮、障礙全部清除掉。
圖文消息的主要參數(shù)說明
通過微信官方的消息接口指南，可以看到對圖文消息的參數(shù)介紹，如下圖所示：
從圖中可以了解到：
1）圖文消息的個數(shù)限制為10，也就是圖中ArticleCount的值（圖文消息的個數(shù)，限制在10條以內）；
2）對于多圖文消息，***條圖文的圖片顯示為大圖，其他圖文的圖片顯示為小圖；
3）***條圖文的圖片大小建議為640*320，其他圖文的圖片大小建議為80*80；
好了，了解這些，再結合前面所講的消息及消息處理工具的封裝，想要回復圖文消息給用戶也就不是什么難事了。
圖文消息的多種表現(xiàn)形式
下面直接通過代碼演示圖文消息最主要的五種表現(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;
- /**
- * 核心服務類
- *
- * @author liufeng
- * @date 2013-07-25
- */
- public class CoreService {
- /**
- * 處理微信發(fā)來的請求
- *
- * @param request
- * @return
- */
- public static String processRequest(HttpServletRequest request) {
- String respMessage = null;
- try {
- // xml請求解析
- Map<String, String> requestMap = MessageUtil.parseXml(request);
- // 發(fā)送方帳號（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)) {
- // 接收用戶發(fā)送的文本消息內容
- 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("微信公眾帳號開發(fā)教程Java版");
- article.setDescription("柳峰，80后，微信公眾帳號開發(fā)經驗4個月。為幫助初學者入門，特推出此系列教程，也希望借此機會認識更多同行！");
- article.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg");
- article.setUrl("http://blog.csdn.net/lyq8479");
- articleList.add(article);
- // 設置圖文消息個數(shù)
- newsMessage.setArticleCount(articleList.size());
- // 設置圖文消息包含的圖文集合
- newsMessage.setArticles(articleList);
- // 將圖文消息對象轉換成xml字符串
- respMessage = MessageUtil.newsMessageToXml(newsMessage);
- }
- // 單圖文消息---不含圖片
- else if ("2".equals(content)) {
- Article article = new Article();
- article.setTitle("微信公眾帳號開發(fā)教程Java版");
- // 圖文消息中可以使用QQ表情、符號表情
- article.setDescription("柳峰，80后，" + emoji(0x1F6B9)
- + "，微信公眾帳號開發(fā)經驗4個月。為幫助初學者入門，特推出此系列連載教程，也希望借此機會認識更多同行！\n\n目前已推出教程共12篇，包括接口配置、消息封裝、框架搭建、QQ表情發(fā)送、符號表情發(fā)送等。\n\n后期還計劃推出一些實用功能的開發(fā)講解，例如：天氣預報、周邊搜索、聊天功能等。");
- // 將圖片置為空
- 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("微信公眾帳號開發(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微信公眾帳號的類型");
- 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開發(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("微信公眾帳號開發(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各種消息的接收與響應");
- 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));
- }
- }
上面代碼實現(xiàn)的功能是當用戶發(fā)送數(shù)字1-5時，分別回復五種不同表現(xiàn)形式的圖文消息給用戶，如下：
a）用戶發(fā)送1，回復單圖文消息。參考代碼68~81行，運行效果如下：
b）用戶發(fā)送2，回復單圖文消息---不含圖片。參考代碼82~96行，運行效果如下：
說明：圖文消息的標題、描述是可以包含QQ表情、符號表情的。
c）用戶發(fā)送3，回復多圖文消息。參考代碼97~123行，運行效果如下：
說明：對于多圖文消息，描述不會被顯示，可以在標題使用換行符，使得顯示更加美觀。
d）用戶發(fā)送4，回復多圖文消息---首條消息不含圖片。參考代碼124~158行，運行效果如下：
e）用戶發(fā)送5，回復多圖文消息---***一條消息不含圖片。參考代碼159~186行，運行效果如下：
可以看出，圖文消息有著豐富的內容及多樣化的表現(xiàn)形式，希望大家能夠根據(jù)各自的特點及實際使用需要，合理地運用。
***，根據(jù)實踐經驗，我對圖文消息做一個使用總結：
1）一定要給圖文消息的Url屬性賦值。不管是單圖文，還是多圖文，或者是不含圖片的圖文，都有可能會被用戶點擊。如果Url為空，用戶點擊后將會打開一個空白頁面，這給用戶的體驗是非常差的；
2）只有單圖文的描述才會顯示，多圖文的描述不會被顯示；
3）圖文消息的標題、描述中可以使用QQ表情和符號表情。合理地運用表情符號，會使得消息更加生動；
4）圖文消息的標題、描述中可以使用換行符。合理地使用換行符，會使得內容結構更加清晰；
5）圖文消息的標題、描述中不支持超文本鏈接（html的<a>標簽）。不只是技術上實現(xiàn)不了，就連邏輯上也說不通，因為一條圖文消息的任何位置被點擊，都將調用微信內置的瀏覽器打開Url，如果標題、描述里再放幾個超鏈接，不知道點擊該打開哪個頁面。真搞不懂為什么有好幾個同學都在問這個問題，難道設計成多圖文不好嗎？
6）圖文消息的鏈接、圖片鏈接可以使用外部域名下的資源，如本例中：柳峰的頭像、博文的鏈接，都是指向CSDN網站的資源。在網上，甚至是微信官方交流群里，認為圖文消息的Url、PicUrl不可以使用外鏈的大有人在，不知道這謠言從哪開始的，實踐是檢驗真理的唯一標準！
7）使用指定大小的圖片。***條圖文的圖片大小建議為640*320，其他圖文的圖片大小建議為80*80。如果使用的圖片太大，加載慢，而且耗流量；如果使用的圖片太小，顯示后會被拉伸，失真了很難看。
8）每條圖文消息的圖文建議控制在1-4條。這樣在絕大多數(shù)終端上一屏能夠顯示完，用戶掃一眼就能大概了解消息的主要內容，這樣最有可能促使用戶去點擊并閱讀。
責任編輯：徐川
來源：
blog
