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