WeChat public account development tutorial, public development tutorial

Public Account development tutorial, public development tutorial

Development and debugging tips

The development of public accounts is simple and troublesome. It is not a development process, but a development environment. As the saying goes, it is necessary to take some time to study how to break the development environment of public accounts. To put it bluntly, the development of public accounts is the development of mobile Web apps Based on HTML, CSS, and JS. However, the development of public accounts is slightly different from that of ordinary mobile Web apps, in many cases, we call the Public Account interface, and all requests involving the interface must be accessed through a built-in browser, if we want to put the request on the PC desktop browser for debugging, we will jump to a smiling face to remind you of an error (figure 1 ).

 

Figure 1 application cannot be directly debugged in a PC browser

This security mechanism and threshold can be understood, because the browser expands many methods and encapsulates many Interfaces Based on the Webkit kernel. This road is open, and this tree is planted. To develop a public account, you must pass. This means that we cannot directly develop and debug the Public Account page in the PC browser. How do makeup media developers solve this problem? First of all, we need to reach a consensus that development and debugging on a small mobile phone cannot be implemented. If we can develop on a PC, with Chrome's review elements or Firefox's Firebug, why can't I develop public accounts? Therefore, our goal is to develop and debug public numbers in PC browsers and test the results on mobile phones. We only need two steps to achieve this effect.

First, use a proxy to access the server

Don't be scared by the term "Proxy Server". In fact, we only need a laptop or a desktop with a wireless network card to create a proxy. This step is no stranger to developers who have developed mobile Web applications. You may have guessed it. This crucial first step is also applicable to public account development, the following is a brief description. Here, we mainly provide methods for Windows. The Mac/Linux methods are similar. We will not focus on them until we click here.

Set the computer as a proxy server

• Download and install Fiddler2 (for Windows 8, download Fiddler4; for Mac/Linux users, use proxy tools such as Charles/Nproxy ).
• After installation, configure Fiddler: Fiddler menu → Tools → Fiddler Options → Connections, 2.

 

Figure 2 Fiddler configuration process

Bind hosts

• Go to the windows/stystem32/driver/etc/directory. (The hosts directory of Mac/Linux users is under/etc .)
• Back up the hosts file, modify the hosts file with notepad, and append the hosts file at the end, for example, 203.195.198.53 app.example.com. Here, 203.195.198.53 is the Server IP address of the online environment, and app.example.com is the domain requested by the public account.

Set mobile Proxy Server

• Choose "start"> "run"> "cmd". In the command line window, enter ipcon fi g and find your IP address, for example, 192.168.2.102.
• Take the iPhone as an example. Choose Settings> Wireless LAN> select your network, set the proxy server and port, and set the configuration in 3.

Android phones also have similar configuration functions, which are not described in detail.

 

Figure 3 manually set HTTP Proxy

Principles and precautions

• Your computer must be in the same network as your mobile phone; otherwise, your mobile phone cannot connect to the proxy server.
• When the mobile phone accesses the app.example.com domain, it will access the proxy server, and the hosts of this proxy is set to the IP address we specified, so accessing the development environment is like accessing the public account in.

2. Development and Design of the Debug mode

If the first point above is a good horse, then the second point is a good saddle. That's right. A good horse and a good saddle can travel thousands of miles a day.

It is impossible to access the URL of the Public Account interface in a PC browser, but we can continue to execute the logic after the interface through the interface bypassed in Debug mode. There are many ways to achieve this. developers need to make full use of their imagination. Here is a method that makeup media developers are using for reference.

We are through the URL after splicing parameters to call the Debug mode, such as: http://app.example.com/main.html? Debug.

Then, Judge Debug in the Code and simulate the data returned by the interface, so as to bypass the public number Interface request, so that you can smoothly develop and Debug in the PC browser. For example:

I f (w I n d o w. l o c a t I o n. h r e f. indexOf ('? Debug')> 0 ){

// Simulate the data returned by the Public Account interface} else {

// Access the public account interface}

Code Section

Public Platform

Directory (?) [+]

Message Interface Guide back

Directory [hide] 1 Overview 2. Message application interface 3. Website access 4. Message push 4.1 text message 4.2 Image message 4.3 geographic location message 4.4 link message 4.5 event push 5. Message reply 5.1 reply to text message 5.2 reply music message 5.3 reply to text message 6. Notes 7 sample code

Introduction

The message interface of the public platform provides developers with a new message processing method.

Message application interface

Click Apply and enter the url and token. You can enter the token as needed to generate a signature.

Website access

After a public platform user submits information, the server sends a GET request to the URL filled in with four parameters:

Parameters	Description
Signature	Encrypted Signature
Timestamp	Timestamp
Nonce	Random Number
Echostr	Random string

The developer verifies the request by verifying signature (The following is a verification method ). If you confirm that the GET request is from the server, the echostr parameter is returned as is, and the access takes effect. Otherwise, the access fails.

Signature combines the token parameter entered by the developer with the timestamp parameter and nonce parameter in the request.

Encryption/verification process: 1. sort the tokens, timestamp, and nonce in Lexicographic Order. splice the three parameter strings into one string for sha1 encryption. the encrypted string obtained by the developer can be compared with signature to identify that the request comes from

Message push

When a common user sends a message to a public account, the server will POST the message to the entered URL. The structure is as follows:

Text message

 <xml> <ToUserName><![CDATA[toUser]]></ToUserName> <FromUserName><![CDATA[fromUser]]></FromUserName>  <CreateTime>1348831860</CreateTime> <MsgType><![CDATA[text]]></MsgType> <Content><![CDATA[this is a test]]></Content> <MsgId>1234567890123456</MsgId> </xml>

Parameters	Description
ToUserName	DeveloperNo.
FromUserName	Sender account (one OpenID)
CreateTime	Message creation time (integer)
MsgType	Text
Content	Text message content
MsgId	Message id, 64-bit integer

Image message

 <xml> <ToUserName><![CDATA[toUser]]></ToUserName> <FromUserName><![CDATA[fromUser]]></FromUserName> <CreateTime>1348831860</CreateTime> <MsgType><![CDATA[image]]></MsgType> <PicUrl><![CDATA[this is a url]]></PicUrl> <MsgId>1234567890123456</MsgId> </xml>

Parameters	Description
ToUserName	DeveloperNo.
FromUserName	Sender account (one OpenID)
CreateTime	Message creation time (integer)
MsgType	Image
PicUrl	Image Link
MsgId	Message id, 64-bit integer

Geographic location message

<Xml> <ToUserName> <! [CDATA [toUser]> </ToUserName> <FromUserName> <! [CDATA [fromUser]> </FromUserName> <CreateTime> 1351776360 </CreateTime> <MsgType> <! </MsgType> <Location_X> 23.134521 </Location_X> <Location_Y> 113.358803 </Location_Y> <Scale> 20 </Scale> <Label> <! [CDATA [location information]> </Label> <MsgId> 1234567890123456 </MsgId> </xml>

Parameters	Description
ToUserName	DeveloperNo.
FromUserName	Sender account (one OpenID)
CreateTime	Message creation time (integer)
MsgType	Location
Location_X	Geographic location and latitude
Location_Y	Geographic longitude
Scale	Map zoom
Label	Geographic location information
MsgId	Message id, 64-bit integer

Link message

<Xml> <ToUserName> <! [CDATA [toUser]> </ToUserName> <FromUserName> <! [CDATA [fromUser]> </FromUserName> <CreateTime> 1351776360 </CreateTime> <MsgType> <! [CDATA [link]> </MsgType> <Title> <! [CDATA [official website of the public platform]> </Title> <Description> <! [CDATA [official website of the public platform]> </Description> <Url> <! </Url> <MsgId> 1234567890123456 </MsgId> </xml>

Parameters	Description
ToUserName	Recipient number
FromUserName	Sender id. If it is a common user, it is an OpenID.
CreateTime	Message Creation Time
MsgType	Message Type, link
Title	Message Title
Description	Message description
Url	Message Link
MsgId	Message id, 64-bit integer

Event push

Event push only supports version 4.5. Currently, you can enable event push, follow, and cancel follow event push for custom menu interfaces. Other functions will be available soon.

<xml><ToUserName><![CDATA[toUser]]></ToUserName><FromUserName><![CDATA[FromUser]]></FromUserName><CreateTime>123456789</CreateTime><MsgType><![CDATA[event]]></MsgType><Event><![CDATA[EVENT]]></Event><EventKey><![CDATA[EVENTKEY]]></EventKey></xml>

Parameters	Description
ToUserName	Recipient number
FromUserName	Sender id. If it is a common user, it is an OpenID.
CreateTime	Message Creation Time
MsgType	Message Type, event
Event	Event Type: subscribe, unsubscribe, and CLICK)
EventKey	Event KEY value, which corresponds to the KEY value in the custom menu interface

Message reply

For each POST request, the developer returns a specific xml structure in the response packet to respond to the message (now supports replying to text, text, voice, video,Music).

The serverWithin five secondsIf no response is received, the connection will be disconnected.

The xml structure of the reply is as follows:

Reply text message

 <xml> <ToUserName><![CDATA[toUser]]></ToUserName> <FromUserName><![CDATA[fromUser]]></FromUserName> <CreateTime>12345678</CreateTime> <MsgType><![CDATA[text]]></MsgType> <Content><![CDATA[content]]></Content> </xml>

Parameters	Description
ToUserName	Recipient account (received OpenID)
FromUserName	Developer ID
CreateTime	Message Creation Time
MsgType	Text
Content	The content of the reply message. The length cannot exceed 2048 bytes.

Reply music message

 <xml> <ToUserName><![CDATA[toUser]]></ToUserName> <FromUserName><![CDATA[fromUser]]></FromUserName> <CreateTime>12345678</CreateTime> <MsgType><![CDATA[music]]></MsgType> <Music> <Title><![CDATA[TITLE]]></Title> <Description><![CDATA[DESCRIPTION]]></Description> <MusicUrl><![CDATA[MUSIC_Url]]></MusicUrl> <HQMusicUrl><![CDATA[HQ_MUSIC_Url]]></HQMusicUrl> </Music> </xml>

Parameters	Description
ToUserName	Recipient account (received OpenID)
FromUserName	Developer ID
CreateTime	Message Creation Time
MsgType	Music
MusicUrl	Music Link
HQMusicUrl	High-quality music link, which is preferred for playing music in WIFI Environments

Reply to text message

 <xml> <ToUserName><![CDATA[toUser]]></ToUserName> <FromUserName><![CDATA[fromUser]]></FromUserName> <CreateTime>12345678</CreateTime> <MsgType><![CDATA[news]]></MsgType> <ArticleCount>2</ArticleCount> <Articles> <item> <Title><![CDATA[title1]]></Title>  <Description><![CDATA[description1]]></Description> <PicUrl><![CDATA[picurl]]></PicUrl> <Url><![CDATA[url]]></Url> </item> <item> <Title><![CDATA[title]]></Title> <Description><![CDATA[description]]></Description> <PicUrl><![CDATA[picurl]]></PicUrl> <Url><![CDATA[url]]></Url> </item> </Articles> </xml> 

Parameters	Description
ToUserName	Recipient account (received OpenID)
FromUserName	Developer ID
CreateTime	Message Creation Time
MsgType	News
ArticleCount	Number of text and text messages, up to 10
Articles	Multiple text messages. The first item is a large image by default.
Title	Text message title
Description	Text Message description
PicUrl	Image links. JPG and PNG formats are supported. The larger image size is 640*320, and the smaller image size is 80*80.
Url	Click the text message jump Link

Notes

1. the user's OpenID is a fixed and unique string for a public number.

2. Use port 80

Will XP make full use of hardware than 98, so that the game runs smoothly?

As a system that has served for more than ten years, it has ushered in its own home. Now, netizens around the world can't help but respect this tenacious system that exists in microsoft for more than 10 years. Only by constantly exploring, trying, and innovating can we make the system operation more humane. This is not comparable to XP 7 and 8.1.

Php getting started tutorial. I want to learn about public platform development. It is easy to understand to transfer the tutorial.

2 recommended places:
1. php100

Www.php100.com/html/shipinjiaocheng/newz/
2. LAMP brothers