摘要:本文将带你了解微信公众帐号开发之图文消息全攻略,希望本文对大家学微信有所帮助。
图文消息的主要参数说明
通过微信官方的消息接口指南,可以看到对图文消息的参数介绍,如下图所示:
从图中可以了解到:
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=\"//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("//0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); 73. article.setUrl("//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("//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("//0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); 103. article1.setUrl("//blog.csdn.net/lyq8479/article/details/8937622"); 104. 105. Article article2 = new Article(); 106. article2.setTitle("第2篇\n微信公众帐号的类型"); 107. article2.setDescription(""); 108. article2.setPicUrl("//avatar.csdn.net/1/4/A/1_lyq8479.jpg"); 109. article2.setUrl("//blog.csdn.net/lyq8479/article/details/8941577"); 110. 111. Article article3 = new Article(); 112. article3.setTitle("第3篇\n开发模式启用及接口配置"); 113. article3.setDescription(""); 114. article3.setPicUrl("//avatar.csdn.net/1/4/A/1_lyq8479.jpg"); 115. article3.setUrl("//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("//blog.csdn.net/lyq8479"); 132. 133. Article article2 = new Article(); 134. article2.setTitle("第4篇\n消息及消息处理工具的封装"); 135. article2.setDescription(""); 136. article2.setPicUrl("//avatar.csdn.net/1/4/A/1_lyq8479.jpg"); 137. article2.setUrl("//blog.csdn.net/lyq8479/article/details/8949088"); 138. 139. Article article3 = new Article(); 140. article3.setTitle("第5篇\n各种消息的接收与响应"); 141. article3.setDescription(""); 142. article3.setPicUrl("//avatar.csdn.net/1/4/A/1_lyq8479.jpg"); 143. article3.setUrl("//blog.csdn.net/lyq8479/article/details/8952173"); 144. 145. Article article4 = new Article(); 146. article4.setTitle("第6篇\n文本消息的内容长度限制揭秘"); 147. article4.setDescription(""); 148. article4.setPicUrl("//avatar.csdn.net/1/4/A/1_lyq8479.jpg"); 149. article4.setUrl("//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("//0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); 165. article1.setUrl("//blog.csdn.net/lyq8479/article/details/9141467"); 166. 167. Article article2 = new Article(); 168. article2.setTitle("第8篇\n文本消息中使用网页超链接"); 169. article2.setDescription(""); 170. article2.setPicUrl("//avatar.csdn.net/1/4/A/1_lyq8479.jpg"); 171. article2.setUrl("//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("//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. }
上面代码实现的功能是当用户发送数字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条。这样在绝大多数终端上一屏能够显示完,用户扫一眼就能大概了解消息的主要内容,这样最有可能促使用户去点击并阅读。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号