微信公号开发之图文消息全攻略

最新推荐文章于 2022-06-13 15:23:23 发布

SiegingLion

最新推荐文章于 2022-06-13 15:23:23 发布

阅读量761

点赞数

分类专栏：微信公众平台开发文章标签：微信公号开发之图文消息全攻略

微信公众平台开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

转载链接：http://mobile.51cto.com/web-416968.htm

图文消息的主要参数说明

通过微信官方的消息接口指南，可以看到对图文消息的参数介绍，如下图所示：

从图中可以了解到：

1）图文消息的个数限制为10，也就是图中ArticleCount的值（图文消息的个数，限制在10条以内）；

2）对于多图文消息，第一条图文的图片显示为大图，其他图文的图片显示为小图；

3）第一条图文的图片大小建议为640*320，其他图文的图片大小建议为80*80；

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

图文消息的多种表现形式

下面直接通过代码演示图文消息最主要的五种表现形式的用法，源代码如下：

1. package org.liufeng.course.service;

3. import java.util.ArrayList;

4. import java.util.Date;

5. import java.util.List;

6. import java.util.Map;

8. import javax.servlet.http.HttpServletRequest;

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. }

上面代码实现的功能是当用户发送数字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条。这样在绝大多数终端上一屏能够显示完，用户扫一眼就能大概了解消息的主要内容，这样最有可能促使用户去点击并阅读。

SiegingLion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信公号开发之图文消息全攻略

转载链接：http://mobile.51cto.com/web-416968.htm图文消息的主要参数说明通过微信官方的消息接口指南，可以看到对图文消息的参数介绍，如下图所示：从图中可以了解到：1）图文消息的个数限制为10，也就是图中ArticleCount的值（图文消息的个数，限制在10条以内）；2）对于多图文
复制链接

扫一扫