微信公众平台开发入门教程(图文详解)

2024-10-08 04:00:24

在这篇入门教程中，我们假定你已经有了PHP语言程序、MySQL数据库、计算机网络通讯及XML语言基础。如果你还没有，那么请先学习相关知识。

我们将使用微信公众账号方倍工作室（账号：pondbaystudio，二维码在最底部）作为讲解的例子。

这篇入门教程将引导你完成如下任务：

创建百度云平台应用启用微信公众平台开发模式获取订阅、文字、图片、语音、视频消息回复文本、图文及音乐消息程序开发

创建百度云应用

申请账号

登录http://developer.baidu.com/bae ，使用邮箱或者手机注册一个账号，注册需要同时绑定手机并且验证邮箱。

创建应用

注册并登录成功以后，点击右上侧的，弹出如下窗口。

应用名称自己随便填写一个，接入方式选择“手机web应用”，然后点击确定。

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

选择“云环境(BAE)”，

在新的窗口中，填写应用域名的名称，环境类型选择PHP，其他根据自己需要选择或者使用上图默认值，然后点击确定

注意：此处填写的域名将要在下面填写URL时用到。可以先保存下来。

创建版本

在版本管理中，点击创建新版本

版本号填写0，然后保存。

上传代码

将以下代码中的token改为你的名称，并另存为index.php。

注意：此处填写的Token将要在下面填写URL时用到。可以先保存下来。

代码如下:

<?php
/*
方倍工作室 http://www.cnblogs.com/txw1958/
CopyRight 2013 www.doucube.com All Rights Reserved
*/

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

然后将其压缩成zip格式

这样会生成一个index.zip的文件。

回来版本管理中

选择包上传更新

选择刚才压缩好的zip包，点击上传。

确定生效，并且点击，点击后如下图。

百度云应用的创建就成功了。

微信公众平台开发模式

高级功能

微信公众平台地址：https://mp.weixin.qq.com

登录微信公众平台后台，选择高级功能

进入后就看到两种模式

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

滑动关闭

开发模式

进入开发模式里面

点击成为开发者

弹出URL和Token填写框

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

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

填写如下图，

提交成功

再滑动右上角启用按钮。

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

接收消息类型

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

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

后台格式:

代码如下:

发送表情

后台格式

代码如下:

XML格式讲解

代码如下:

ToUserName 消息接收方微信号，一般为公众平台账号微信号
FromUserName 消息发送方微信号
CreateTime 消息创建时间
MsgType 消息类型；文本消息为text
Content 消息内容
MsgId 消息ID号可以看出，文本和表情的消息类型均为文本
[html]

2. 图片
发送图片

后台格式：

[code]
<xml><ToUserName><![CDATA[gh_680bdefc8c5d]]></ToUserName>
<FromUserName><![CDATA[oIDrpjqASyTPnxRmpS9O_ruZGsfk]]></FromUserName>
<CreateTime>1359028479</CreateTime>
<MsgType><![CDATA[image]]></MsgType>
<PicUrl><![CDATA[http://mmsns.qpic.cn/mmsns/L4qjYtOibuml238YYBcfS2FQ8JtNN69Bc4bbbscvQRrljbedVjlMEAA/0]]></PicUrl>
<MsgId>5836982871638042400</MsgId>
</xml>

XML格式讲解

代码如下:

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

3. 语音
发送语音

后台格式：

代码如下:

XML格式讲解

代码如下:

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

4. 视频
发送视频

后台格式：

代码如下:

XML格式讲解

代码如下:

ToUserName 消息接收方微信号，一般为公众平台账号微信号
FromUserName 消息发送方微信号
CreateTime 消息创建时间
MsgType 消息类型；视频消息为video
MediaId 媒体ID
ThumbMediaId 媒体缩略ID？
MsgId 消息ID号原文：http://www.cnblogs.com/txw1958/p/wechat-tutorial.html

5. 位置
发送位置

后台格式：

代码如下:

XML格式讲解

代码如下:

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

6. 链接
发送链接

后台格式：

代码如下:

XML格式讲解

代码如下:

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

发送消息类型

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

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

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

后台格式：

代码如下:

XML格式讲解

代码如下:

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

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

后台格式：

代码如下:

2.2 多条图文消息

代码如下:

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

事件消息类型

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

1. 关注事件

代码如下:

2. 取消关注事件

代码如下:

3. 菜单点击事件

代码如下:

XML格式讲解

代码如下:

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

简单的自动回复

我们在官方的例子上做一些修改，实现了一个发送“?”就能回复当前时间的功能。
该例子是接收文本消息($postObj->Content)，并且回复文本消息($msgType = "text";)的。
你可以把以下代码保存为index.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;
        }
    }
}
?>

效果如下：

微信小程序加载更多点击查看更多

本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData,下面是一个简单的栗子: index.wxml代码如下 <view wx:for="{{duanziInfo}}" wx:for-item="name" wx:for-index="id"> <view class="duanzi-vie
微信公众平台实现获取用户OpenID的方法

本文实例讲述了微信公众平台实现获取用户OpenID的方法.分享给大家供大家参考.具体分析如下: 用户点击微信自定义菜单view类型按钮后,微信客户端将会打开开发者在按钮中填写的url值 (即网页链接),达到打开网页的目的,但是view不能获取用户的openid,需要使用微信"网页授权获取用户基本信息"高级接口结合使用,获得用户的登入个人信息. 具体方法: 1.配置网页授权回调域名,如 www.jb51.net 2.模拟公众号的第三方网页,http://www.jb51.net/getc
微信公众号点击菜单即可打开并登录微站的实现方法

本文实例讲述了微信公众号点击菜单即可打开并登录微站的实现方法.分享给大家供大家参考.具体分析如下: 总体来说,微信公众号点击菜单即可打开并登录微站实现步骤比较复杂,但很多微站在己用上了,本文对此进行整理归纳,相信可以给大家带来一定的参考借鉴价值. 现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打开网页就能获取这个openid,实现自动登录. 这里
Android仿微信图片点击浏览的效果

本篇我们来做一个类似于微信的图片点击浏览的效果,点击小图图片后会放大至全屏显示,且中间有一个2D平滑过渡的效果. 思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 其次,一般缩略界面的ImageView的是正方形的,并且是CENTER_CROP缩放属性的.CENTER_CROP属性会
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片
详解微信小程序开发之下拉刷新上拉加载

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto
微信小程序链接传参并跳转新页面

像传统的传参一样,只是在微信里面的标签不一样而已,navigator标签的文档说明: https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html?t=20161122 下面是传递参数并展示新页面的一个简单栗子: 这是index.wxml代码: <navigator class="bury-wrapper wx-li" url="../detail/detail?id={{name.id}}&quo
微信小程序加载 app-service.js 错误解决方法

微信小程序开发过程中出现错误,经过一番思考解决此问题,这里给大家提醒下! 加载 app-service.js 错误 WAService.js:2 不要在 undefined.js 注册多个Page APP-SERVICE-Engine:Please do not register multiple Page in undefined.js 开始新建一个小程序,结果报这么多错误. 但是我点击到编辑页查看的时候,没有pages,utils呀.. 进入app.js没有注册多个page呀. 感觉很奇怪,
微信小程序 loading（加载中提示框）实例

微信小程序加载提示框: loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... </loading> <button bindtap="changeHidden">show/hidden</button> </view> .js Page({ data:{ hidden:true }, changeHidden
Android仿微信图片点击全屏效果

废话不多说,先看下效果: 先是微信的再是模仿的先说下实现原理,再一步步分析这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以

微信公众平台开发入门教程(图文详解)

相关推荐

随机推荐