开发和调试之殇
微信公众号的开发，说简单也简单，说麻烦也麻烦，麻烦的不是开发过程，而是搭建开发环境的过程。不过俗话说得好，磨刀不误砍柴工，我们有必要花点时间来研究下如何攻破微信公众号的开发环。说白了，公众号的开发就是基于HTML/CSS/JS的移动端Web App的开发，但微信公众号和普通的移动Web App开发还略有不同，因为很多情况下我们会调用公众号的接口，而只要涉及微信接口的请求，都必须通过微信内置的浏览器来访问，如果我们想把请求放到PC桌面浏览器上运行调试，就会跳转到一个笑脸，提醒你出错了（图1）。
图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配置。
图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手机也有类似配置功能，不详细说明了。
图3 手动设置HTTP代理
原理及注意事项
自己的电脑一定要和手机在同一个网络内，否则手机无法连接到代理服务器。
当手机访问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 {
// 访问微信公众号接口}
微信公众号的开发，说简单也简单，说麻烦也麻烦，麻烦的不是开发过程，而是搭建开发环境的过程。不过俗话说得好，磨刀不误砍柴工，我们有必要花点时间来研究下如何攻破微信公众号的开发环。说白了，公众号的开发就是基于HTML/CSS/JS的移动端Web App的开发，但微信公众号和普通的移动Web App开发还略有不同，因为很多情况下我们会调用公众号的接口，而只要涉及微信接口的请求，都必须通过微信内置的浏览器来访问，如果我们想把请求放到PC桌面浏览器上运行调试，就会跳转到一个笑脸，提醒你出错了（图1）。
图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配置。
图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手机也有类似配置功能，不详细说明了。
图3 手动设置HTTP代理
原理及注意事项
自己的电脑一定要和手机在同一个网络内，否则手机无法连接到代理服务器。
当手机访问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 {
// 访问微信公众号接口}
