[037] 微信公众帐号开发教程第13篇-图文消息全攻略

简介:

引言及内容概要

已经有几位读者抱怨“柳峰仅仅用到文本消息作为演示例子,从来不提图文消息,都不知道图文消息该怎样使用”,好吧,我错了,原本以为把基础API封装完、框架搭建好,再给出一个文本消息的使用演示例子,大家就能够照猫画虎的,也许是由于我的绘画功底太差,画出的那仅仅猫本来就不像猫吧……

本篇主要介绍微信公众帐号开发中图文消息的使用,以及图文消息的几种表现形式。标题取名为“图文消息全攻略”,这绝对不是标题党,是想借此机会把大家对图文消息相关的问题、疑虑、障碍所有清除掉。

 

图文消息的主要参数解释

通过微信官方的消息接口指南,能够看到对图文消息的参数介绍,例如以下图所看到的:

从图中能够了解到:

1)图文消息的个数限制为10,也就是图中ArticleCount的值(图文消息的个数,限制在10条以内);

2)对于多图文消息,第一条图文的图片显示为大图,其它图文的图片显示为小图;

3)第一条图文的图片大小建议为640*320,其它图文的图片大小建议为80*80;

好了,了解这些,再结合第4篇文章所讲的消息及消息处理工具的封装,想要回复图文消息给用户也就不是什么难事了。

 

图文消息的多种表现形式

以下直接通过代码演示图文消息最基本的五种表现形式的使用方法,源码例如以下:

[java]  view plain copy
 
  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条。这样在绝大多数终端上一屏能够显示完,用户扫一眼就能大概了解消息的主要内容,这样最有可能促使用户去点击并阅读。

本文转自博客园知识天地的博客,原文链接:[037] 微信公众帐号开发教程第13篇-图文消息全攻略,如需转载请自行联系原博主。


相关文章
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
713 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
760 1
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
38 0
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
491 0
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
152 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
89 6
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
256 1
|
2月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
92 5
|
2月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
73 5
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1083 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机