Introduction and content summary
Several readers have complained that "Liu Feng only uses text messages as examples, never mentions graphic messages, and does not know how to use graphic messages." Well, I was wrong. I originally thought that the basic API was encapsulated and the framework was built, and then gave a sample of text messages to use them. Maybe because my painting skills are too poor, the cat I drew was not like a cat...
This article mainly introduces the use of graphic and text messages in the development of WeChat public account, as well as several manifestations of graphic and text messages. The title is named "All Guide to Picture and Text Message". This is definitely not a title party. It is to take this opportunity to clear away all the problems, concerns and obstacles related to Picture and Text Message.
Description of main parameters of graphic and text messages
Through the official WeChat message interface guide, you can see the parameters of graphic and text messages, as shown in the figure below:
From the picture, we can learn:
Various expressions of graphic and text messages
The following is a code that directly demonstrates the usage of the five main forms of graphic and text messages. The source code is as follows:
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;/** * Core service class* * @author liufeng * @date 2013-07-25 */public class CoreService { /** * Process requests from WeChat* * @param request * @return */ public static String processRequest(HttpServletRequest request) { String respMessage = null; try { // xml request parsing Map<String, String> requestMap = MessageUtil.parseXml(request); // sender account (open_id) String fromUserName = requestMap.get("FromUserName"); // Public account String toUserName = requestMap.get("ToUserName"); // Message type String msgType = requestMap.get("MsgType"); // Default reply to this text message 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); // Since the href attribute value must be caused in double quotes, this conflicts with the double quotes of the string itself, textMessage.setContent("Welcome to <a href=/"http://blog.csdn.net/lyq8479/">Liu Feng's blog</a>!"); // Convert text message object to xml string respMessage = MessageUtil.textMessageToXml(textMessage); // Text message if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_TEXT)) { // Receive the text message content sent by the user String content = requestMap.get("Content"); // Create text message 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>(); // Single text message if ("1".equals(content)) { Article article = new Article(); article.setTitle("WeChat Public Account Development Tutorial Java Version"); article.setDescription("Liu Feng, born in the 1980s, has 4 months of experience in WeChat public account development. To help beginners get started, this series of tutorials is specially launched, and I hope to take this opportunity to meet more peers! "); article.setPicUrl("http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); article.setUrl("http://blog.csdn.net/lyq8479"); articleList.add(article); // Set the number of graphic messages newsMessage.setArticleCount(articleList.size()); // Set the graphic collections contained in the graphic messages newsMessage.setArticles(articleList); // Convert the graphic message object into an xml string respMessage = MessageUtil.newsMessageToXml(newsMessage); } // Single text message--excluding pictures else if ("2".equals(content)) { Article article = new Article(); article.setTitle("WeChat Public Account Development Tutorial Java Version"); // QQ emoticons and symbolic emoticons can be used in text messages article article.setDescription("Liu Feng, born in the 1980s," + emoji(0x1F6B9) + ", 4 months of experience in developing WeChat public account. To help beginners get started, this series of serialized tutorials was launched, and I hope to take this opportunity to meet more peers! /n/n has launched 12 tutorials, including interface configuration, message packaging, framework construction, QQ emoticon sending, symbol emoticon sending, etc. /n/n later, it is also planned to launch some practical functions development explanations, such as: weather forecast, peripheral search, chat functions, etc. "); // Set the picture to empty article.setPicUrl(""); article.setUrl("http://blog.csdn.net/lyq8479"); articleList.add(article); newsMessage.setArticleCount(articleList.size()); newsMessage.setArticles(articleList); respMessage = MessageUtil.newsMessageToXml(newsMessage); } // Multi-graphic text messages else if ("3".equals(content)) { Article article1 = new Article(); article1.setTitle("WeChat Public Account Development Tutorial/n Introduction"); 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("Part 2/n WeChat public account type"); article2.setDescription(""); article2.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg"); article2.setUrl("http://blog.csdn.net/lyq8479/article/details/8941577"); Article2.setUrl("http://blog.csdn.net/lyq8479/article/details/8941577"); Article article3 = new Article(); article3.setTitle("Telegraph 3/n Development Mode Enablement and Interface Configuration"); 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); } // Multiple graphic and text messages---The first message does not contain images else if ("4".equals(content)) { Article article1 = new Article(); article1.setTitle("WeChat Public Account Development Tutorial Java Version"); article1.setDescription(""); // Set the image to empty article1.setPicUrl(""); article1.setUrl("http://blog.csdn.net/lyq8479"); Article article2 = new Article(); article2.setTitle("Package of Message and Message Processing Tools"); 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("Article 5/nReceive and Response of Various Messages"); 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("Article 6/nReveal the content length limit of text messages"); 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); } // Multiple graphic messages---The last message does not contain images else if ("5".equals(content)) { Article article1 = new Article(); article1.setTitle("Use of newlines in text messages"); 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("Use web hyperlinks in text messages"); article2.setDescription(""); article2.setPicUrl("http://avatar.csdn.net/1/4/A/1_lyq8479.jpg"); article2.setUrl("http://blog.csdn.net/lyq8479/article/details/9157455"); Article2.setUrl("http://blog.csdn.net/lyq8479/article/details/9157455"); Article article3 = new Article(); article3.setTitle("If you think the article is helpful to you, please leave a message on the blog or follow the WeChat public account xiaoqrobot to support Liu Feng! "); article3.setDescription(""); // Set the image to empty 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 expression conversion(hex -> utf-16) * * @param hexEmoji * @return */ public static String emoji(int hexEmoji) { return String.valueOf(Character.toChars(hexEmoji)); }}The function implemented by the above code is to reply to the user with five different forms of graphic messages, as follows:
a) The user sends 1 and reply to a single text message. Reference code lines 68~81, the operation effect is as follows:
b) The user sends 2, reply to the text message - without pictures. Reference code lines 82~96, the operation effect is as follows:
Description: The title and description of the graphic message can contain QQ expressions and symbolic expressions.
c) The user sends 3 and responds to multiple graphic and text messages. Reference code lines 97~123, the operation effect is as follows:
Note: For multi-graphic messages, the description will not be displayed. Line breaks can be used in the title to make the display more beautiful.
d) The user sends 4 and reply to multiple graphic messages--the first message does not contain pictures. Reference code lines 124~158, the operation effect is as follows:
e) The user sends 5 and responds to multiple graphic messages--the last message does not contain pictures. Reference code lines 159~186, the operation effect is as follows:
It can be seen that graphic and text messages have rich content and diverse forms of expression. I hope everyone can use them reasonably according to their respective characteristics and actual use needs.
Finally, based on practical experience, I will summarize the use of graphic and text messages :
1) Be sure to assign the value to the Url attribute of the graphic and text message. Whether it is a single picture, multiple picture, or pictures without pictures, they may be clicked by users. If the Url is empty, the user will open a blank page after clicking, which gives the user a very poor experience;
2) Only the description of single pictures and texts will be displayed, and the description of multiple pictures and texts will not be displayed ;
3) QQ emoticons and symbolic emoticons can be used in the title and description of graphic and text messages. The rational use of emojis will make the message more vivid;
4) Line breaks can be used in the title and description of graphic and text messages. The rational use of line breaks will make the content structure clearer;
5) Hypertext links (html's <a> tag) are not supported in the title and description of graphic and text messages. Not only is it technically impossible, but it also makes sense logically, because any location of a graphic and text message is clicked, the built-in browser of WeChat will be called to open Url. If you put a few hyperlinks in the title and description, you don’t know which page to click to open. I really don’t understand why several students are asking this question. Isn’t it good to design it as many pictures and texts?
6) The links and image links for graphic and text messages can use resources under external domain names. For example, in this example: Liu Feng’s avatar and blog post links are all resources to the CSDN website. There are many people who believe that Url and PicUrl of graphic and text messages cannot be used for external links. I don’t know where this rumor started. Practice is the only criterion for testing the truth!
7) Use pictures of the specified size. The recommended image size of the first picture is 640*320, and the recommended image size of other pictures is 80*80. If the image used is too large, it will load slowly and consume traffic; if the image used is too small, it will be stretched after displaying, which will be ugly if it is distorted.
8) The pictures and text messages are recommended to be controlled at 1-4. In this way, one screen can be displayed on most terminals, and users can roughly understand the main content of the message by just a glance, which is most likely to prompt users to click and read.
The above is all the content of this article. I hope that the content of this article will be of some help to everyone’s study or work. I also hope to support Wulin.com more!