投稿

开发

微信公众号如何开发,微信公众号开发教程

阅读: 2015-10-27 来自:未知 我要评论
开发和调试之殇 微信公众号的开发,说简单也简单,说麻烦也麻烦,麻烦的不是开发过程,而是搭建开发环境的过程。只是俗话说得好,磨刀不误砍柴工,我们有必要花点时间来研究下怎样攻破微信公众号的开发环。说白了,公众号的开发就是基于HTML/CSS/JS的移动端Web App的开发。但微信公众号和普通的移动Web App开发还略有不同,由于非常多...
开发和调试之殇

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

技术分享

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

这种安全机制和门槛是能够理解的,由于微信浏览器在Webkit内核的基础上扩展了非常多方法。也包装了非常多接口。

此路是微信开,此树是微信栽。要想开发公众号,你就必须从此路过。这就意味着我们没法直接在PC浏览器里开发调试公众号的页面。那妆媒体的开发人员们是怎么解决问题的呢?首先。我们要达成一个共识,在一个小小的手机上开发调试,实在施展不开,假设我们能在PC上进行开发,有Chrome的审查元素或Firefox的Firebug这种利器,何愁拿不下公众号的开发?所以我们的目标是,在PC浏览器中进行公众号的开发和调试,在手机微信上測试结果。我们仅仅须要两个步骤就能够实现这种效果。

第一,用代理訪问server

不要被“代理server”这个名词吓到了,事实上我们仅仅要有一台笔记本,或者插有无线网卡的台式机就足以搭一个代理。这一步对于开发过移动端Web应用的开发人员来说,并不陌生。可能你也猜到了。这至关重要的第一步在微信的公众号开发中相同适用。以下我就简单叙述一下。

这里主要为Windows提供方法,Mac/Linux的方法类似。点到为止。就不着重介绍了。

把电脑设置成代理server

下载并安装Fiddler2(假设是Windows 8,请下载Fiddler4。Mac/Linux用户能够使用Charles/Nproxy等代理工具)。

安装后配置Fiddler:Fiddler菜单→Tools→Fiddler Options→Connections,如图2配置。

技术分享

图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是线上环境的serverIP,app.example.com是公众号所请求的域。

设置手机代理server

開始菜单→执行→cmd,打开命令行窗体,输入 ipcon?g。找到自己的IP地址,如:192.168.2.102。

以iPhone为例,进入设置→无线局域网→选中自己的网络,设置代理server和port,如图3中的配置。

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

技术分享

图3 手动设置HTTP代理

原理及注意事项

自己的电脑一定要和手机在同一个网络内。否则手机无法连接到代理server。

当手机訪问app.example.com域的时候,会訪问代理server,而这个代理的hosts被设置成了我们指定的IP,所以訪问开发环境就如同在微信里訪问公众号一样。

第二。开发设计Debug模式

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

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

 网友点评
微信005公众号二维码