WeChat Applet
WeChat Development
Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)
Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)
May 15, 2018 pm 04:28 PM
Due to the popularity of WeChat, in order to better facilitate users who use WeChat to query some information, this article is an entry-level WeChat public platform development tutorial. Friends who need it can refer to it
In this article In the introductory tutorial, we assume that you already have a basic knowledge of PHP language programs, MySQL databases, computer network communications, and XML language. If you haven’t yet, please learn the relevant knowledge first.
We will use the WeChat public account Fangbei Studio (account: pondbaystudio, the QR code is at the bottom) as an example.
This introductory tutorial will guide you to complete the following tasks:
Create Baidu Cloud Platform application Enable WeChat public platform development mode to obtain subscriptions, text, pictures, voice, video message reply text, pictures and texts And music messaging program development
Create Baidu Cloud application
Apply for an account
Log in to developer.baidu.com/bae, use email or Register an account with your mobile phone. To register, you need to bind your mobile phone and verify your email address.
Create Application
After successful registration and login, click 
on the upper right side, and the following window will pop up.
Fill in any application name, select "mobile web application" as the access method, and then click OK
說明：在以下的教程中，您可以將所有我填寫為pondbay的地方改為你的一個相應(yīng)的名稱，如果您沒有想好名稱，最簡單的方法就是qq這兩個字符+qq號碼，比如方倍工作室的QQ是1354386063，那么就將"pondbay"改為"qq1354386063"
Select "Cloud Environment (BAE)",
In the new window, fill in the name of the application domain name, select PHP as the environment type, and select or use other options according to your own needs. Figure default value, then click OK
注意：此處填寫的域名將要在下面填寫URL時用到?？梢韵缺４嫦聛?。
Create version
Upload code
<?php>
define("TOKEN", "pondbay");
$wechatObj = new wechatCallbackapiTest();
$wechatObj->valid();
class wechatCallbackapiTest
{
public function valid()
{
$echoStr = $_GET["echostr"];
if($this->checkSignature()){
echo $echoStr;
exit;
}
}
private function checkSignature()
{
$signature = $_GET["signature"];
$timestamp = $_GET["timestamp"];
$nonce = $_GET["nonce"];
$token = TOKEN;
$tmpArr = array($token, $timestamp, $nonce);
sort($tmpArr);
$tmpStr = implode( $tmpArr );
$tmpStr = sha1( $tmpStr );
if( $tmpStr == $signature ){
return true;
}else{
return false;
}
}
}
?>Then compress it into zip format
, as shown below. 
WeChat public platform development model
Advanced functions
WeChat public platform address: https://mp.weixin. qq.com Log in to the WeChat public platform backend and select advanced functions
進(jìn)入后就看到兩種模式
我們需要關(guān)閉編輯模式。點(diǎn)擊編輯模式的進(jìn)入
滑動關(guān)閉
開發(fā)模式
進(jìn)入開發(fā)模式里面
點(diǎn)擊成為開發(fā)者
彈出URL和Token填寫框
此處的URL為創(chuàng)建百度云應(yīng)用的域名，包括后面的duapp.com，而Token為index.php中定義的值。
URL: http://pondbay.duapp.com
Token: pondbay
填寫如下圖，
提交成功
再滑動右上角啟用按鈕。
至此，你已經(jīng)成功啟用開發(fā)模式。
接收消息類型
目前普通用戶能向公眾賬號推送五種格式的消息：文本（包括表情）、語音、圖片、視頻、位置、鏈接。名片發(fā)送會失敗。
下面就這五種分別詳解如下：
1. 文本（包括表情）
發(fā)送文本
后臺格式:
<xml> <ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName> <FromUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></FromUserName> <CreateTime>1359028446</CreateTime> <MsgType><![CDATA[text]]></MsgType> <Content><![CDATA[你好]]></Content> <MsgId>5836982729904121631</MsgId> </xml>
發(fā)送表情
后臺格式
<xml><ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName> <FromUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></FromUserName> <CreateTime>1359044526</CreateTime> <MsgType><![CDATA[text]]></MsgType> <Content><![CDATA[/::)/::)/::)/::)/::)]]></Content> <MsgId>5837051792978241864</MsgId> </xml>
XML格式講解
ToUserName 消息接收方微信號，一般為公眾平臺賬號微信號
FromUserName 消息發(fā)送方微信號
CreateTime 消息創(chuàng)建時間
MsgType 消息類型；文本消息為text
Content 消息內(nèi)容
MsgId 消息ID號可以看出，文本和表情的消息類型均為文本
[html]
2. 圖片
發(fā)送圖片
后臺格式：
[code]
XML格式講解
ToUserName 消息接收方微信號，一般為公眾平臺賬號微信號
FromUserName 消息發(fā)送方微信號
CreateTime 消息創(chuàng)建時間
MsgType 消息類型；圖片消息為image
PicUrl 圖片鏈接地址，可以用HTTP GET獲取
MsgId 消息ID號
3. 語音
發(fā)送語音
后臺格式：
<xml> <ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName> <FromUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></FromUserName> <CreateTime>1359028025</CreateTime> <MsgType><![CDATA[voice]]></MsgType> <MediaId><![CDATA[hGm9wmKth8RO_tuv5k9fJkSbovXWzZVYwG2jSsL7ukCqq6q1SiLzYnFEngFNUijs]]></MediaId> <Format><![CDATA[amr]]></Format> <MsgId>5836980921722890003</MsgId> </xml>
XML格式講解
ToUserName 消息接收方微信號，一般為公眾平臺賬號微信號
FromUserName 消息發(fā)送方微信號
CreateTime 消息創(chuàng)建時間
MsgType 消息類型；語音消息為voice
MediaId 媒體ID
Format 語音格式，這里為amr
MsgId 消息ID號附：AMR接口簡介
全稱Adaptive Multi-Rate，主要用于移動設(shè)備的音頻，壓縮比比較大，但相對其他的壓縮格式質(zhì)量比較差，由于多用于人聲，通話，效果還是很不錯的。
4. 視頻
發(fā)送視頻
后臺格式：
<xml><ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName> <FromUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></FromUserName> <CreateTime>1359028186</CreateTime> <MsgType><![CDATA[video]]></MsgType> <MediaId><![CDATA[DBVFRIj29LB2hxuYpc0R6VLyxwgyCHZPbRj_IIs6YaGhutyXUKtFSDcSCPeoqUYr]]></MediaId> <ThumbMediaId><![CDATA[mxUJ5gcCeesJwx2T9qsk62YzIclCP_HnRdfTQcojlPeT2G9Q3d22UkSLyBFLZ01J]]></ThumbMediaId> <MsgId>5836981613212624665</MsgId> </xml>
XML格式講解
ToUserName 消息接收方微信號，一般為公眾平臺賬號微信號
FromUserName 消息發(fā)送方微信號
CreateTime 消息創(chuàng)建時間
MsgType 消息類型；視頻消息為video
MediaId 媒體ID
ThumbMediaId 媒體縮略ID？
MsgId 消息ID號 原文：http://m.miracleart.cn/
5. 位置
發(fā)送位置
后臺格式：
<xml><ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName> <FromUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></FLACFromUserName> <CreateTime>1359036619</CreateTime> <MsgType><![CDATA[location]]></MsgType> <Location_X>22.539968</Location_X> <Location_Y>113.954980</Location_Y> <Scale>16</Scale> <Label><![CDATA[中國廣東省深圳市南山區(qū)深南大道9789號 郵政編碼: 518057]]></Label> <MsgId>5837017832671832047</MsgId> </xml>
XML格式講解
ToUserName 消息接收方微信號，一般為公眾平臺賬號微信號
FromUserName 消息發(fā)送方微信號
CreateTime 消息創(chuàng)建時間
MsgType 消息類型，地理位置為location
Location_X 地理位置緯度
Location_Y 地理位置經(jīng)度
Scale 地圖縮放大小
Label 地理位置信息
MsgId 消息ID號
6. 鏈接
發(fā)送鏈接
后臺格式：
<xml> <ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName> <FromUserName><![CDATA[oIDrpjl2LYdfTAM-oxDgB4XZcnc8]]></FromUserName> <CreateTime>1359709372</CreateTime> <MsgType><![CDATA[link]]></MsgType> <Title><![CDATA[分享一款應(yīng)用給你 -方倍神圖]]></Title> <Description><![CDATA[方倍神圖為您提供夫妻相測試，親子鑒定等新奇、好玩的圖片測試功能]]></Description> <Url><![CDATA[http://m.miracleart.cn/]]></Url> <MsgId>5839907284805129867</MsgId> </xml>
XML格式講解
ToUserName 消息接收方微信號，一般為公眾平臺賬號微信號
FromUserName 消息發(fā)送方微信號
CreateTime 消息創(chuàng)建時間
MsgType 消息類型，鏈接為link
Title 圖文消息標(biāo)題
Description 圖文消息描述
Url 點(diǎn)擊圖文消息跳轉(zhuǎn)鏈接
MsgId 消息ID號
發(fā)送消息類型
目前公眾賬號能向普通用戶推送三種格式的消息：文本、圖文、音樂。其中圖文消息包括單條圖文消息和多條圖文消息，展示方式有一點(diǎn)點(diǎn)不同。
另外，回復(fù)的消息支持星標(biāo)操作：通過填寫FuncFlag字段為1來對回復(fù)消息做星標(biāo)操作后，可以在實時消息的星標(biāo)消息分類中找到對應(yīng)的推送消息。
下面就這幾種分別詳解如下：
1. 文本消息格式
回復(fù)文本
后臺格式：
<xml> <ToUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></ToUserName> <FromUserName><![CDATA[gh_680bdefc8c5d]]></FromUserName> <CreateTime>1359036631</CreateTime> <MsgType><![CDATA[text]]></MsgType> <Content><![CDATA[★★★★豆立方★★★★ 微信公眾平臺上最好玩的圖片及視頻應(yīng)用]]></Content> <FuncFlag>0</FuncFlag> </xml>
XML格式講解
FromUserName 消息發(fā)送方
ToUserName 消息接收方
CreateTime 消息創(chuàng)建時間
MsgType 消息類型，文本消息必須填寫text
Content 消息內(nèi)容，大小限制在2048字節(jié)，字段為空為不合法請求
FuncFlag 星標(biāo)字段
2. 圖文消息格式
2.1 單條圖文消息
回復(fù)單條圖文
后臺格式：
<xml>
<ToUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></ToUserName>
<FromUserName><![CDATA[gh_680bdefc8c5d]]></FromUserName>
<CreateTime>1359011899</CreateTime>
<MsgType><![CDATA[news]]></MsgType>
<Content><![CDATA[]]></Content>
<ArticleCount>1</ArticleCount>
<Articles>
<item>
<Title><![CDATA[【天津】天氣實況 ]]></Title>
<Description><![CDATA[溫度：3℃ 濕度：43﹪ 風(fēng)速：西南風(fēng)2級]]></Description>
<PicUrl><![CDATA[http://m.miracleart.cn/]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
</Articles>
<FuncFlag>0</FuncFlag>
</xml>2.2 多條圖文消息
<xml>
<ToUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></ToUserName>
<FromUserName><![CDATA[gh_680bdefc8c5d]]></FromUserName>
<CreateTime>1359011829</CreateTime>
<MsgType><![CDATA[news]]></MsgType>
<Content><![CDATA[]]></Content>
<ArticleCount>8</ArticleCount>
<Articles>
<item>
<Title><![CDATA[【天津】天氣實況 溫度：3℃ 濕度：43﹪ 風(fēng)速：西南風(fēng)2級]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://m.miracleart.cn/]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
<item>
<Title><![CDATA[06月24日 周四 2℃~-7℃ 晴 北風(fēng)3-4級轉(zhuǎn)東南風(fēng)小于3級]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://m.miracleart.cn/]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
<item>
<Title><![CDATA[06月25日 周五 -1℃~-8℃ 晴 東南風(fēng)小于3級轉(zhuǎn)東北風(fēng)3-4級]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://m.miracleart.cn/]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
<item>
<Title><![CDATA[06月26日 周六 -1℃~-7℃ 多云 東北風(fēng)3-4級轉(zhuǎn)東南風(fēng)小于3級]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://m.miracleart.cn/]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
<item>
<Title><![CDATA[06月27日 周日 0℃~-6℃ 多云 東南風(fēng)小于3級轉(zhuǎn)東北風(fēng)3-4級]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://m.miracleart.cn/]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
<item>
<Title><![CDATA[06月28日 周一 -1℃~-8℃ 多云 東北風(fēng)3-4級轉(zhuǎn)南風(fēng)小于3級]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://m.miracleart.cn/]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
<item>
<Title><![CDATA[06月29日 周二 1℃~-5℃ 多云 南風(fēng)小于3級轉(zhuǎn)3-4級]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://m.miracleart.cn/]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
<item>
<Title><![CDATA[方倍工作室 版權(quán)所有]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[]]></PicUrl>
<Url><![CDATA[]]></Url>
</item>
</Articles>
<FuncFlag>0</FuncFlag>
</xml>XML格式講解
FromUserName 消息發(fā)送方
ToUserName 消息接收方
CreateTime 消息創(chuàng)建時間
MsgType 消息類型，圖文消息必須填寫news
Content 消息內(nèi)容，圖文消息可填空
ArticleCount 圖文消息個數(shù)，限制為10條以內(nèi)
Articles 多條圖文消息信息，默認(rèn)第一個item為大圖
Title 圖文消息標(biāo)題
Description 圖文消息描述
PicUrl 圖片鏈接，支持JPG、PNG格式，較好的效果為大圖640*320，小圖80*80
Url 點(diǎn)擊圖文消息跳轉(zhuǎn)鏈接
FuncFlag 星標(biāo)字段
3. 音樂消息
后臺格式：
<xml>
<ToUserName><![CDATA[ollB4jqgdO_cRnVXk_wRnSywgtQ8]]></ToUserName>
<FromUserName><![CDATA[gh_b629c48b653e]]></FromUserName>
<CreateTime>1372310544</CreateTime>
<MsgType><![CDATA[music]]></MsgType>
<Music>
<Title><![CDATA[最炫民族風(fēng)]]></Title>
<Description><![CDATA[鳳凰傳奇]]></Description>
<MusicUrl><![CDATA[http://m.miracleart.cn/]]></MusicUrl>
<HQMusicUrl><![CDATA[http://m.miracleart.cn/]]></HQMusicUrl>
</Music>
<FuncFlag>0</FuncFlag>
</xml>XML格式講解
ToUserName 接收方帳號（收到的OpenID）
FromUserName 開發(fā)者微信號
CreateTime 消息創(chuàng)建時間
MsgType 消息類型，此處為music
Title 音樂標(biāo)題
Description 音樂描述
MusicUrl 音樂鏈接
HQMusicUrl 高質(zhì)量音樂鏈接，WIFI環(huán)境優(yōu)先使用該鏈接播放音樂
FuncFlag 位0x0001被標(biāo)志時，星標(biāo)剛收到的消息。
事件消息類型
目前用戶在關(guān)注和取消關(guān)注的時候會自動向公眾平臺發(fā)送事件推送消息：
1. 關(guān)注事件
<xml>
<ToUserName><![CDATA[gh_b629c48b653e]]></ToUserName>
<FromUserName><![CDATA[ollB4jv7LA3tydjviJp5V9qTU_kA]]></FromUserName>
<CreateTime>1372307736</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[subscribe]]></Event>
<EventKey><![CDATA[]]></EventKey>
</xml>2. 取消關(guān)注事件
<xml>
<ToUserName><![CDATA[gh_b629c48b653e]]></ToUserName>
<FromUserName><![CDATA[ollB4jqgdO_cRnVXk_wRnSywgtQ8]]></FromUserName>
<CreateTime>1372309890</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[unsubscribe]]></Event>
<EventKey><![CDATA[]]></EventKey>
</xml>3. 菜單點(diǎn)擊事件
<xml>
<ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName>
<FromUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></FromUserName>
<CreateTime>1377886191</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[CLICK]]></Event>
<EventKey><![CDATA[天氣深圳]]></EventKey>
</xml>XML格式講解
ToUserName 接收方微信號
FromUserName 發(fā)送方微信號，若為普通用戶，則是一個OpenID
CreateTime 消息創(chuàng)建時間
MsgType 消息類型，event
Event 事件類型，subscribe(訂閱)、unsubscribe(取消訂閱)、CLICK(自定義菜單點(diǎn)擊事件)
EventKey 事件KEY值，與自定義菜單接口中KEY值對應(yīng)
簡單的自動回復(fù)
我們在官方的例子上做一些修改，實現(xiàn)了一個發(fā)送“?”就能回復(fù)當(dāng)前時間的功能。
該例子是接收文本消息($postObj->Content)，并且回復(fù)文本消息($msgType = "text";)的。
你可以把以下代碼保存為index.php，按照上面提供的方法重新上傳。
代碼如下：
<?php>
define("TOKEN", "pondbay");
$wechatObj = new wechatCallbackapiTest();
$wechatObj->responseMsg();
class wechatCallbackapiTest
{
public function responseMsg()
{
$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];
if (!empty($postStr)){
$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
$fromUsername = $postObj->FromUserName;
$toUsername = $postObj->ToUserName;
$keyword = trim($postObj->Content);
$time = time();
$textTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[%s]]></MsgType>
<Content><![CDATA[%s]]></Content>
<FuncFlag>0</FuncFlag>
</xml>";
if($keyword == "?")
{
$msgType = "text";
$contentStr = date("Y-m-d H:i:s",time());
$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
echo $resultStr;
}
}else{
echo "";
exit;
}
}
}
?>
效果如下：
更多Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)相關(guān)文章請關(guān)注PHP中文網(wǎng)！
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
