search

Home  >  Article  >  WeChat Applet  >  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)

高洛峰
高洛峰Original
2018-05-15 16:28:1220886browse

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.

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

Fill in any application name, select "mobile web application" as the access method, and then click OK

说明：在以下的教程中，您可以将所有我填写为pondbay的地方改为你的一个相应的名称，如果您没有想好名称，最简单的方法就是qq这两个字符+qq号码，比如方倍工作室的QQ是1354386063，那么就将"pondbay"改为"qq1354386063"

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

Select "Cloud Environment (BAE)",

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

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

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

##In version management, click Create new version

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

Fill in 0 for the version number and save it.



Upload code

Change the token in the following code to your name and save it as index.php.

Note: The Token filled in here will be used when filling in the URL below. You can save it first. 

<?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

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

This will generate an index.zip file.

Back to version management

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

Select the package to upload and update

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

Select the zip you just compressed package, click Upload.

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

Confirm it takes effect, and click

, as shown below.

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

The creation of Baidu Cloud application is successful.

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

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)

我们需要关闭编辑模式。点击编辑模式的进入

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)

开发模式

进入开发模式里面

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)

弹出URL和Token填写框

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

此处的URL为创建百度云应用的域名，包括后面的duapp.com，而Token为index.php中定义的值。

URL: 　　http://pondbay.duapp.com
Token: 　pondbay

填写如下图，

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)

再滑动右上角启用按钮。

Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)

至此，你已经成功启用开发模式。

接收消息类型

目前普通用户能向公众账号推送五种格式的消息：文本（包括表情）、语音、图片、视频、位置、链接。名片发送会失败。
下面就这五种分别详解如下：

1. 文本（包括表情）
发送文本

后台格式:

<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>

发送表情

后台格式

<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 消息发送方微信号
CreateTime 消息创建时间
MsgType 消息类型；文本消息为text
Content 消息内容
MsgId 消息ID号可以看出，文本和表情的消息类型均为文本
[html]

2. 图片
发送图片

后台格式：

[code]


1359028479


5836982871638042400

XML格式讲解

ToUserName 消息接收方微信号，一般为公众平台账号微信号
FromUserName 消息发送方微信号
CreateTime 消息创建时间
MsgType 消息类型；图片消息为image
PicUrl 图片链接地址，可以用HTTP GET获取
MsgId 消息ID号

3. 语音
发送语音

后台格式：

<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 消息发送方微信号
CreateTime 消息创建时间
MsgType 消息类型；语音消息为voice
MediaId 媒体ID
Format 语音格式，这里为amr
MsgId 消息ID号附：AMR接口简介
全称Adaptive Multi-Rate，主要用于移动设备的音频，压缩比比较大，但相对其他的压缩格式质量比较差，由于多用于人声，通话，效果还是很不错的。

4. 视频
发送视频

后台格式：

<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 消息发送方微信号
CreateTime 消息创建时间
MsgType 消息类型；视频消息为video
MediaId 媒体ID
ThumbMediaId 媒体缩略ID？
MsgId 消息ID号 原文：http://www.php.cn/

5. 位置
发送位置

后台格式：

<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[中国广东省深圳市南山区深南大道9789号 邮政编码: 518057]]></Label>
<MsgId>5837017832671832047</MsgId>
</xml>

XML格式讲解

 ToUserName 消息接收方微信号，一般为公众平台账号微信号
 FromUserName 消息发送方微信号
 CreateTime 消息创建时间
 MsgType 消息类型，地理位置为location
 Location_X 地理位置纬度
 Location_Y 地理位置经度
 Scale 地图缩放大小
 Label 地理位置信息
 MsgId 消息ID号

6. 链接
发送链接

后台格式：

<xml>
<ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName> 
<FromUserName><![CDATA[oIDrpjl2LYdfTAM-oxDgB4XZcnc8]]></FromUserName> 
<CreateTime>1359709372</CreateTime> 
<MsgType><![CDATA[link]]></MsgType> 
<Title><![CDATA[分享一款应用给你 -方倍神图]]></Title> 
<Description><![CDATA[方倍神图为您提供夫妻相测试，亲子鉴定等新奇、好玩的图片测试功能]]></Description> 
<Url><![CDATA[http://www.php.cn/]]></Url> 
<MsgId>5839907284805129867</MsgId> 
</xml>

XML格式讲解

 ToUserName 消息接收方微信号，一般为公众平台账号微信号
 FromUserName 消息发送方微信号
 CreateTime 消息创建时间
 MsgType 消息类型，链接为link
 Title 图文消息标题
 Description 图文消息描述
 Url 点击图文消息跳转链接
 MsgId 消息ID号

发送消息类型

目前公众账号能向普通用户推送三种格式的消息：文本、图文、音乐。其中图文消息包括单条图文消息和多条图文消息，展示方式有一点点不同。
另外，回复的消息支持星标操作：通过填写FuncFlag字段为1来对回复消息做星标操作后，可以在实时消息的星标消息分类中找到对应的推送消息。

下面就这几种分别详解如下：

1. 文本消息格式
回复文本

后台格式：

<xml>
<ToUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></ToUserName>
<FromUserName><![CDATA[gh_680bdefc8c5d]]></FromUserName>
<CreateTime>1359036631</CreateTime>
<MsgType><![CDATA[text]]></MsgType>
<Content><![CDATA[★★★★豆立方★★★★ 微信公众平台上最好玩的图片及视频应用]]></Content>
<FuncFlag>0</FuncFlag>
</xml>

XML格式讲解

 FromUserName 消息发送方
 ToUserName 消息接收方
 CreateTime 消息创建时间
 MsgType 消息类型，文本消息必须填写text
 Content 消息内容，大小限制在2048字节，字段为空为不合法请求
 FuncFlag 星标字段

2. 图文消息格式
2.1 单条图文消息
回复单条图文

后台格式：

<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﹪ 风速：西南风2级]]></Description>
            <PicUrl><![CDATA[http://www.php.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﹪ 风速：西南风2级]]></Title>
            <Description><![CDATA[]]></Description>
            <PicUrl><![CDATA[http://www.php.cn/]]></PicUrl>
            <Url><![CDATA[]]></Url>
        </item>
        <item>
            <Title><![CDATA[06月24日 周四 2℃~-7℃ 晴 北风3-4级转东南风小于3级]]></Title>
            <Description><![CDATA[]]></Description>
            <PicUrl><![CDATA[http://www.php.cn/]]></PicUrl>
            <Url><![CDATA[]]></Url>
        </item>
        <item>
            <Title><![CDATA[06月25日 周五 -1℃~-8℃ 晴 东南风小于3级转东北风3-4级]]></Title>
            <Description><![CDATA[]]></Description>
            <PicUrl><![CDATA[http://www.php.cn/]]></PicUrl>
            <Url><![CDATA[]]></Url>
        </item>
        <item>
            <Title><![CDATA[06月26日 周六 -1℃~-7℃ 多云 东北风3-4级转东南风小于3级]]></Title>
            <Description><![CDATA[]]></Description>
            <PicUrl><![CDATA[http://www.php.cn/]]></PicUrl>
            <Url><![CDATA[]]></Url>
        </item>
        <item>
            <Title><![CDATA[06月27日 周日 0℃~-6℃ 多云 东南风小于3级转东北风3-4级]]></Title>
            <Description><![CDATA[]]></Description>
            <PicUrl><![CDATA[http://www.php.cn/]]></PicUrl>
            <Url><![CDATA[]]></Url>
        </item>
        <item>
            <Title><![CDATA[06月28日 周一 -1℃~-8℃ 多云 东北风3-4级转南风小于3级]]></Title>
            <Description><![CDATA[]]></Description>
            <PicUrl><![CDATA[http://www.php.cn/]]></PicUrl>
            <Url><![CDATA[]]></Url>
        </item>
        <item>
            <Title><![CDATA[06月29日 周二 1℃~-5℃ 多云 南风小于3级转3-4级]]></Title>
            <Description><![CDATA[]]></Description>
            <PicUrl><![CDATA[http://www.php.cn/]]></PicUrl>
            <Url><![CDATA[]]></Url>
        </item>
        <item>
            <Title><![CDATA[方倍工作室 版权所有]]></Title>
            <Description><![CDATA[]]></Description>
            <PicUrl><![CDATA[]]></PicUrl>
            <Url><![CDATA[]]></Url>
        </item>
    </Articles>
    <FuncFlag>0</FuncFlag>
</xml>

XML格式讲解

FromUserName 消息发送方
 ToUserName 消息接收方
 CreateTime 消息创建时间
 MsgType 消息类型，图文消息必须填写news
 Content 消息内容，图文消息可填空
 ArticleCount 图文消息个数，限制为10条以内
 Articles 多条图文消息信息，默认第一个item为大图
  Title 图文消息标题
  Description 图文消息描述
  PicUrl 图片链接，支持JPG、PNG格式，较好的效果为大图640*320，小图80*80
  Url 点击图文消息跳转链接
FuncFlag 星标字段

3. 音乐消息

后台格式：

<xml>
    <ToUserName><![CDATA[ollB4jqgdO_cRnVXk_wRnSywgtQ8]]></ToUserName>
    <FromUserName><![CDATA[gh_b629c48b653e]]></FromUserName>
    <CreateTime>1372310544</CreateTime>
    <MsgType><![CDATA[music]]></MsgType>
    <Music>
        <Title><![CDATA[最炫民族风]]></Title>
        <Description><![CDATA[凤凰传奇]]></Description>
        <MusicUrl><![CDATA[http://www.php.cn/]]></MusicUrl>
        <HQMusicUrl><![CDATA[http://www.php.cn/]]></HQMusicUrl>
    </Music>
    <FuncFlag>0</FuncFlag>
</xml>

XML格式讲解

ToUserName     接收方帐号（收到的OpenID）
FromUserName     开发者微信号
CreateTime     消息创建时间
MsgType          消息类型，此处为music
    Title       音乐标题
    Description 音乐描述
    MusicUrl     音乐链接
    HQMusicUrl     高质量音乐链接，WIFI环境优先使用该链接播放音乐
FuncFlag     位0x0001被标志时，星标刚收到的消息。

事件消息类型

目前用户在关注和取消关注的时候会自动向公众平台发送事件推送消息：

1. 关注事件

<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. 取消关注事件

<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. 菜单点击事件

<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 发送方微信号，若为普通用户，则是一个OpenID
CreateTime     消息创建时间
MsgType     消息类型，event
Event     事件类型，subscribe(订阅)、unsubscribe(取消订阅)、CLICK(自定义菜单点击事件)
EventKey 事件KEY值，与自定义菜单接口中KEY值对应

简单的自动回复

我们在官方的例子上做一些修改，实现了一个发送“?”就能回复当前时间的功能。
该例子是接收文本消息($postObj->Content)，并且回复文本消息($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, &#39;SimpleXMLElement&#39;, 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)

更多Introductory Tutorial on WeChat Public Platform Development (Detailed Explanation with Pictures and Texts)相关文章请关注PHP中文网！

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：WeChat jssdk recording function development recordNext article：WeChat jssdk recording function development record

Related articles

See more