微信公众号开发教程

开发和调试之殇

微信公众号的开发,说简单也简单,说麻烦也麻烦,麻烦的不是开发过程,而是搭建开发环境的过程。不过俗话说得好,磨刀不误砍柴工,我们有必要花点时间来研究下如何攻破微信公众号的开发环。说白了,公众号的开发就是基于HTML/CSS/JS的移动端Web App的开发,但微信公众号和普通的移动Web App开发还略有不同,因为很多情况下我们会调用公众号的接口,而只要涉及微信接口的请求,都必须通过微信内置的浏览器来访问,如果我们想把请求放到PC桌面浏览器上运行调试,就会跳转到一个笑脸,提醒你出错了(图1)。

zei26n

图1 微信应用无法直接在PC浏览器中调试

这样的安全机制和门槛是可以理解的,因为微信浏览器在Webkit内核的基础上扩展了很多方法,也包装了很多接口。此路是微信开,此树是微信栽,要想开发公众号,你就必须从此路过。这就意味着我们没法直接在PC浏览器里开发调试公众号的页面。那妆媒体的开发者们是怎么解决这个问题的呢?首先,我们要达成一个共识,在一个小小的手机上开发调试,实在施展不开,如果我们能在PC上进行开发,有Chrome的审查元素或Firefox的Firebug这样的利器,何愁拿不下公众号的开发?所以我们的目标是,在PC浏览器中进行公众号的开发和调试,在手机微信上测试结果。我们只需要两个步骤就可以实现这样的效果。

第一,用代理访问服务器

不要被“代理服务器”这个名词吓到了,其实我们只要有一台笔记本,或者插有无线网卡的台式机就足以搭一个代理。这一步对于开发过移动端Web应用的开发者来说,并不陌生,可能你也猜到了,这至关重要的第一步在微信的公众号开发中同样适用,下面我就简单叙述一下。这里主要为Windows提供方法,Mac/Linux的方法类似,点到为止,就不着重介绍了。

把电脑设置成代理服务器

  • 下载并安装Fiddler2(如果是Windows 8,请下载Fiddler4;Mac/Linux用户可以使用Charles/Nproxy等代理工具)。
  • 安装后配置Fiddler:Fiddler菜单→Tools→Fiddler Options→Connections,如图2配置。
  • 7RFzUvQ
  • 图2 Fiddler配置过程

    绑定hosts

    • 进入windows/stystem32/driver/etc/目录。(Mac/Linux用户的hosts目录在/etc/下。)
    • 备份hosts文件,并用记事本修改hosts文件,在最后追加hosts,如:203.195.198.53 app.example.com。这里的203.195.198.53是线上环境的服务器IP,app.example.com是公众号所请求的域。

    设置手机代理服务器

    • 开始菜单→运行→cmd,打开命令行窗口,输入 ipconfig,找到自己的IP地址,如:192.168.2.102。
    • 以iPhone为例,进入设置→无线局域网→选中自己的网络,设置代理服务器和端口,如图3中的配置。

    Android手机也有类似配置功能,不详细说明了。

111

原理及注意事项

  • 自己的电脑一定要和手机在同一个网络内,否则手机无法连接到代理服务器。
  • 当手机访问app.example.com域的时候,会访问代理服务器,而这个代理的hosts被设置成了我们指定的IP,所以访问开发环境就如同在微信里访问公众号一样。

第二,开发设计Debug模式

如果说以上的第一点是一匹好马,那这第二点就是一个好鞍。没错,好马配上好鞍才能日行千里。

要想在PC浏览器里访问请求微信公众号接口的URL,这是不可能实现的,但是我们可以通过Debug模式绕过微信的接口,继续执行接口以后的逻辑。方法有很多,需要开发者们发挥想象,各显神通。这里是妆媒体的开发者们提供的正在使用的一种方法,以供参考。

我们是通过URL后拼接参数来调起Debug模式,如:http://app.example.com/main.html?debug。

然后在代码中判断Debug并模拟微信接口返回的数据,以此绕过微信公众号的接口请求,这样就可以顺利地在PC浏览器里开发和调试了。如:

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

// 模拟微信公众号接口返回的数据} else {

// 访问微信公众号接口}

代码部分

微信公众平台

目录(?) [+]

消息接口指南

返回
[ 隐藏 ]

简介

公众平台消息接口为开发者提供了一种新的消息处理方式。

申请消息接口

点击 申请 ,填写网址url和token,其中token可由开发者可以任意填写,用作生成签名。

1

网址接入

公众平台用户提交信息后,微信服务器将发送GET请求到填写的URL上,并且带上四个参数:

参数描述
signature微信加密签名
timestamp时间戳
nonce随机数
echostr随机字符串

开发者通过检验signature对请求进行校验(下面有校验方式)。若确认此次GET请求来自微信服务器,请原样返回echostr参数内容,则接入生效,否则接入失败。

signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。

加密/校验流程:
1. 将token、timestamp、nonce三个参数进行字典序排序
2. 将三个参数字符串拼接成一个字符串进行sha1加密
3. 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信

消息推送

当普通微信用户向公众账号发消息时,微信服务器将POST该消息到填写的URL上。结构如下:

文本消息

<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>
参数描述
ToUserName开发者 微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgTypetext
Content文本消息内容
MsgId消息id,64位整型

图片消息

<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>
参数描述
ToUserName开发者 微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgTypeimage
PicUrl图片链接
MsgId消息id,64位整型

地理位置消息

<xml><ToUserName><![CDATA[toUser]]></ToUserName><FromUserName><![CDATA[fromUser]]></FromUserName><CreateTime>1351776360</CreateTime><MsgType><![CDATA[location]]></MsgType><Location_X>23.134521</Location_X><Location_Y>113.358803</Location_Y><Scale>20</Scale><Label><![CDATA[位置信息]]></Label><MsgId>1234567890123456</MsgId></xml>
参数描述
ToUserName开发者 微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgTypelocation
Location_X地理位置纬度
Location_Y地理位置经度
Scale地图缩放大小
Label地理位置信息
MsgId消息id,64位整型

链接消息

<xml><ToUserName><![CDATA[toUser]]></ToUserName><FromUserName><![CDATA[fromUser]]></FromUserName><CreateTime>1351776360</CreateTime><MsgType><![CDATA]></MsgType><Title><![CDATA[公众平台官网链接]]></Title><Description><![CDATA[公众平台官网链接]]></Description><Url><![CDATA[url]]></Url><MsgId>1234567890123456</MsgId></xml>
参数描述
ToUserName接收方微信号
FromUserName发送方微信号,若为普通用户,则是一个OpenID
CreateTime消息创建时间
MsgType消息类型,link
Title消息标题
Description消息描述
Url消息链接
MsgId消息id,64位整型

事件推送

事件推送只支持微信4.5版本,目前开启自定义菜单接口事件推送、关注与取消关注事件推送。其余功能即将开放,敬请期待。

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

消息回复

对于每一个POST请求,开发者在响应包中返回特定xml结构,对该消息进行响应(现支持回复文本、图文、语音、视频、 音乐 )。

微信服务器在 五秒内 收不到响应会断掉连接。

回复xml结构如下:

回复文本消息

<xml> <ToUserName><![CDATA[toUser]]></ToUserName> <FromUserName><![CDATA[fromUser]]></FromUserName> <CreateTime>12345678</CreateTime> <MsgType><![CDATA[text]]></MsgType> <Content><![CDATA[content]]></Content> </xml>
参数描述
ToUserName接收方帐号(收到的OpenID)
FromUserName开发者微信号
CreateTime消息创建时间
MsgTypetext
Content回复的消息内容,长度不超过2048字节

回复音乐消息

<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>
参数描述
ToUserName接收方帐号(收到的OpenID)
FromUserName开发者微信号
CreateTime消息创建时间
MsgTypemusic
MusicUrl音乐链接
HQMusicUrl高质量音乐链接,WIFI环境优先使用该链接播放音乐

回复图文消息

<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>
参数描述
ToUserName接收方帐号(收到的OpenID)
FromUserName开发者微信号
CreateTime消息创建时间
MsgTypenews
ArticleCount图文消息个数,限制为10条以内
Articles多条图文消息信息,默认第一个item为大图
Title图文消息标题
Description图文消息描述
PicUrl图片链接,支持JPG、PNG格式,较好的效果为大图640*320,小图80*80。
Url点击图文消息跳转链接

注意事项

1.用户OpenID对一个公众号是固定唯一的串

2.请使用80端口

本文由 微营销手册 作者:微营销手册 发表,其版权均为 微营销手册 所有,文章内容系作者个人观点,不代表 微营销手册 对观点赞同或支持。如需转载,请注明文章来源。
17

发表评论