Wechat Public Account Development Tutorial : 사진 및 문자 메시지 전체 가이드

소개 및 내용 요약

몇몇 독자들은 "Liu Feng은 문자 메시지 만 예제로 사용하고 그래픽 메시지를 언급하지 않으며 그래픽 메시지를 사용하는 방법을 모른다"고 불평했다. 글쎄, 나는 틀렸다. 나는 원래 기본 API가 캡슐화되고 프레임 워크가 구축되었다고 생각한 다음 문자 메시지 샘플을 제공했습니다. 어쩌면 내 그림 기술이 너무 가난하기 때문에 내가 그린 고양이는 고양이와 같지 않았습니다 ...

이 기사는 주로 WeChat 공개 계정 개발에서 그래픽 및 문자 메시지 사용과 그래픽 및 문자 메시지의 여러 표현을 소개합니다. 제목의 이름은 "그림 및 문자 메시지에 대한 모든 가이드"입니다. 이것은 분명히 타이틀 파티가 아닙니다. 이 기회를 통해 그림 및 문자 메시지와 관련된 모든 문제, 우려 및 장애물을 제거하는 것이 좋습니다.

그래픽 및 문자 메시지의 주요 매개 변수에 대한 설명

공식 WeChat 메시지 인터페이스 가이드를 통해 아래 그림과 같이 그래픽 및 문자 메시지의 매개 변수를 볼 수 있습니다.

그림에서 우리는 다음을 배울 수 있습니다.

1. 그래픽 및 문자 메시지의 수는 10으로 제한되며, 이는 그림에서 ArticleCount의 값입니다 (그래픽 및 문자 메시지 수는 10 이내에 제한됩니다).
2. 다중 그래픽 메시지의 경우 그림의 첫 번째 그림이 큰 그림으로 표시되고 다른 그림은 작은 그림으로 표시됩니다.
3. 첫 번째 그림과 텍스트의 권장 이미지 크기는 640*320이며 다른 그림과 텍스트의 권장 이미지 크기는 80*80입니다.

그래픽 및 문자 메시지의 다양한 표현

다음은 5 가지 주요 그래픽 및 문자 메시지의 사용을 직접 보여주는 코드입니다. 소스 코드는 다음과 같습니다.

 패키지 org.liufeng.course.service; import java.util.arraylist; import java.util.date; import java.util.list; import java.util.map; import javax.servlet.http.httpervletrequest; import org.liufeng.csourse.rsp.respenge.resp. org.liufeng.course.message.resp.newsmessage; import org.liufeng.course.message.resp.textMessage; import org.liufeng.course.util.messageUtil;/** * 핵심 서비스 클래스 * * @author liufeng * @Date 2013-0-25 */public coreserorer-coreservice. wechat * * @param request * @return */ public static string processRequest (httpservletRequest 요청) {String Respmessage = null; {// xml 요청 구문 분석 맵 <string, string> requestmap = messageUtil.persexml (request); // sender ac // 공개 계정 문자열 touserName = requestMap.get ( "touserName"); // 메시지 유형 문자열 msgtype = requestMap.get ( "msgtype"); //이 문자 메시지에 대한 기본 답변 textMessage textMessage = new TextMessage (); TextMessage.setTounserName (FromuserName); TextMessage.setfromusername (tousername); TextMessage.setCreateTime (새 날짜 (). gettime ()); TextMessage.setmsgtype (MessageUtil.resp_message_type_text); TextMessage.setfuncflag (0); // HREF 속성 값은 이중 인용문으로 야기해야 하므로이 문자열 자체의 이중 인용문 인 TextMessage.setContent ( "<a href =/"http://blog.csdn.net/lyq8479/ "> liu feng의 블로그 </a>!"); // 문자 메시지 객체를 XML 문자열로 변환 respmessage = messageUtil.textMessagetOxml (TextMessage); // 문자 메시지 if (msgtype.equals (messageUtil.req_message_type_text)) {// 사용자 문자열 내용에 의해 보낸 문자 메시지 내용을받습니다. // 문자 메시지 작성 뉴스 메드 메스 메이지 = New NewsMessage (); NewsMessage.setTounserName (FromuserName); Newsmessage.setfromusername (tousername); NewsMessage.setCreateTime (새 날짜 (). gettime ()); NewsMessage.setmsgtype (MessageUtil.resp_message_type_news); Newsmessage.setfuncflag (0); 목록 <article> articlelist = new ArrayList <article> (); // 단일 문자 메시지 if ( "1".equals (content)) {article article = new article (); article.settitle ( "WeChat 공개 계정 개발 자습서 Java 버전"); article.setDescription ( "1980 년대에 태어난 Liu Feng은 WeChat Public Account Development에서 4 개월의 경험을 가지고 있습니다. 초보자를 시작하는 데 도움을주기 위해이 일련의 튜토리얼이 특별히 시작되며,이 기회를 더 많은 동료들을 만나기를 바랍니다!"); article.setpicurl ( "http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); article.seturl ( "http://blog.csdn.net/lyq8479"); articlelist.add (기사); // 그래픽 메시지 수를 설정합니다. NewsMessage.setArticLecount (articlelist.size ()); // 그래픽 메시지 NewsMessage.setarticles (articlelist)에 포함 된 그래픽 컬렉션을 설정합니다. // 그래픽 메시지 객체를 XML 문자열로 변환 respmessage = messageUtil.newsmessagetoxml (NewsMessage); } // 단일 문자 메시지-사진을 공개하면 다른 if ( "2".equals (content)) {article article = new article (); article.settitle ( "WeChat 공개 계정 개발 자습서 Java 버전"); // QQ 이모티콘과 상징적 이모티콘은 문자 메시지 기사 기사에서 사용할 수 있습니다. 세트 드 스용서 ( "1980 년대에 태어난 Liu Feng," + Emoji (0x1f6b9) + " +", WeChat 공공 계정 개발에 대한 4 개월의 경험이 시작되었습니다. 초보자가 시작하는 데 도움을주기 위해이 일련의 시리얼 화 된 자습서가 시작되었으며, 이번 시리즈를 더 많이 만나기를 바랍니다. 인터페이스 구성, 메시지 포장, 프레임 워크 구성, QQ 이모티콘 보내기, 기호 이모티콘 송신 등 /N /N 나중에 도발, 주변 검색, 채팅 기능 등과 같은 몇 가지 실제 기능 개발 설명을 시작할 계획입니다. "); // 비어있는 article.setpicurl ( "")으로 그림을 설정합니다. article.seturl ( "http://blog.csdn.net/lyq8479"); articlelist.add (기사); NewsMessage.setArticLecount (articlelist.size ()); Newsmessage.setarticles (articlelist); respmessage = messageutil.newsmessagetoxml (NewsMessage); } // 다중 그래픽 문자 메시지 else if ( "3".equals (content)) {article article1 = new article (); 기사 1. 세트 타이틀 ( "Wechat Public Account Development Tutorial/N 소개"); article1.setDescription ( ""); article1.setpicurl ( "http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); article1.seturl ( "http://blog.csdn.net/lyq8479/article/details/8937622"); 기사 2 = 새로운 기사 (); article2.SetTitle ( "2 부/n WeChat 공개 계정 유형"); 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"); 기사 기사 3 = 새 기사 (); article3.setTitle ( "Telegraph 3/N 개발 모드 활성화 및 인터페이스 구성"); 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 (기사 1); articlelist.add (기사 2); articlelist.add (기사 3); NewsMessage.setArticLecount (articlelist.size ()); Newsmessage.setarticles (articlelist); respmessage = messageutil.newsmessagetoxml (NewsMessage); } // 다중 그래픽 및 문자 메시지 --- 첫 번째 메시지에는 이미지가 포함되어 있지 않습니다. if ( "4".equals (content)) {article article1 = new article (); article1.settitle ( "wechat public 계정 개발 튜토리얼 Java 버전"); article1.setDescription ( ""); // 이미지를 비어있는 article1.setpicurl ( "")으로 설정합니다. article1.seturl ( "http://blog.csdn.net/lyq8479"); 기사 2 = 새로운 기사 (); article2.SetTitle ( "메시지 및 메시지 처리 도구 패키지"); article2.setDescription ( ""); article2.setpicurl ( "http://avatar.csdn.net/1/4/a/1_lyq8479.jpg"); article2.seturl ( "http://blog.csdn.net/lyq8479/article/details/8949088"); 기사 기사 3 = 새 기사 (); article3.setTitle ( "다양한 메시지의 기사 5/nreceive 및 응답"); article3.setDescription ( ""); article3.setpicurl ( "http://avatar.csdn.net/1/4/a/1_lyq8479.jpg"); article3.seturl ( "http://blog.csdn.net/lyq8479/article/details/8952173"); 기사 기사 4 = 새 기사 (); article4.settitle ( "문자 메시지의 내용 길이 한계를 보충하기"); 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 (기사 1); articlelist.add (기사 2); articlelist.add (기사 3); articlelist.add (기사 4); NewsMessage.setArticLecount (articlelist.size ()); Newsmessage.setarticles (articlelist); respmessage = messageutil.newsmessagetoxml (NewsMessage); } // 여러 그래픽 메시지 --- 마지막 메시지에는 이미지가 포함되어 있지 않으면 if ( "5".Equals (content)) {article article1 = new article (); 기사 1. 세트 타이틀 ( "문자 메시지에서 신생의 사용"); article1.setDescription ( ""); article1.setpicurl ( "http://0.xiaoqrobot.duapp.com/images/avatar_liufeng.jpg"); article1.seturl ( "http://blog.csdn.net/lyq8479/article/details/9141467"); 기사 2 = 새로운 기사 (); article2.setTitle ( "문자 메시지에서 웹 하이퍼 링크 사용"); 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"); 기사 기사 3 = 새 기사 (); article3.setTitle ( "기사가 도움이된다고 생각되면 블로그에 메시지를 남기거나 WeChat 공개 계정 Xiaoqrobot을 따르십시오. Liu Feng!"); article3.setDescription ( ""); // 이미지를 비어있는 article3.setpicurl ( "")으로 설정합니다. article3.seturl ( "http://blog.csdn.net/lyq8479"); articlelist.add (기사 1); articlelist.add (기사 2); articlelist.add (기사 3); NewsMessage.setArticLecount (articlelist.size ()); Newsmessage.setarticles (articlelist); respmessage = messageutil.newsmessagetoxml (NewsMessage); }}} catch (예외 e) {e.printstacktrace (); } return respmessage; } / ** * 이모티콘 표현 변환 (hex-> utf -16) * * @param hexemoji * @return * / public static string emoji (int hexemoji) {return string.valueof (문자 (hexemoji)); }}

위 코드에서 구현 된 기능은 다음과 같이 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> tag)는 그래픽 및 문자 메시지의 제목 및 설명에서 지원되지 않습니다. 기술적으로 불가능할뿐만 아니라 그래픽 및 문자 메시지의 위치가 클릭되므로 WeChat의 내장 브라우저가 URL을 열도록 호출되기 때문에 논리적으로 의미가 있습니다. 제목과 설명에 몇 개의 하이퍼 링크를 넣으면 클릭 할 페이지를 클릭 할 페이지를 알지 못합니다. 나는 몇몇 학생들이 왜이 질문을하는지 이해하지 못합니다. 많은 그림과 텍스트만큼 디자인하는 것이 좋지 않습니까?

6) 그래픽 및 문자 메시지의 링크 및 이미지 링크는 외부 도메인 이름에서 리소스를 사용할 수 있습니다. 예를 들어,이 예에서는 Liu Feng의 아바타 및 블로그 게시물 링크는 모두 CSDN 웹 사이트의 리소스입니다. 그래픽 및 문자 메시지의 URL과 Picurl은 외부 링크에 사용할 수 없다고 믿는 많은 사람들이 있습니다. 이 소문이 어디에서 시작되었는지 모르겠습니다. 실습은 진실을 테스트하기위한 유일한 기준입니다!

7) 지정된 크기의 그림을 사용하십시오. 첫 번째 그림의 권장 이미지 크기는 640*320이며 다른 그림의 권장 이미지 크기는 80*80입니다. 사용 된 이미지가 너무 커지면 천천히로드하고 트래픽을 소비합니다. 사용 된 이미지가 너무 작 으면 표시 후 늘어나고 왜곡되면 추악합니다.

8) 그림과 문자 메시지는 1-4에 제어 할 것을 권장합니다. 이러한 방식으로 하나의 화면을 대부분의 터미널에 표시 할 수 있으며 사용자는 한 눈에 의해 메시지의 주요 내용을 대략 이해할 수 있으며, 이는 사용자가 클릭 및 읽기를 유도 할 가능성이 높습니다.

위는이 기사의 모든 내용입니다. 이 기사의 내용이 모든 사람의 연구 나 업무에 도움이되기를 바랍니다. 또한 wulin.com을 더 지원하기를 바랍니다!