程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 微信公眾帳號開發教程第13篇-圖文消息全攻略

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

編輯:關於PHP編程

引言及內容概要

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

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

 

圖文消息的主要參數說明

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

\

從圖中可以了解到:

1)圖文消息的個數限制為10,也就是圖中ArticleCount的值(圖文消息的個數,限制在10條以內);

2)對於多圖文消息,第一條圖文的圖片顯示為大圖,其他圖文的圖片顯示為小圖;

3)第一條圖文的圖片大小建議為640*320,其他圖文的圖片大小建議為80*80;

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

 

圖文消息的多種表現形式

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

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


  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved