微信小程序抓包详解

一、抓包的基本概念

1、抓包是什么

在网络通信过程中，数据是通过网络传输的，而抓包就是指获取这些网络通信中传输的数据的技术，其实就是一个数据拦截的过程。在计算机通信的过程中，通信数据是以数据包为单位发送的。抓包可以获取到这些数据包并对其进行分析和处理。

2、为什么需要抓包

在开发微信小程序时，我们需要通过接口与后端进行通信，为了保证数据传输的正确性和安全性，我们需要对请求和响应数据进行监测和调试。此时，抓包能够帮助我们观察和修改我们应用的网络请求。同时，抓包也有助于我们分析应用的性能及问题。

3、抓包的工具

常用的抓包工具有Fiddler、Charles、Wireshark等。在本文中，我们以Fiddler为例，介绍抓包的具体操作。

二、Fiddler的使用方法

1、下载并安装Fiddler

官网下载地址：https://www.telerik.com/download/fiddler/fiddler4
安装过程中需要设置代理，若没仔细设置，请在电脑网络设置中将代理关掉！

2、启动Fiddler

安装完成后，双击桌面快捷方式即可启动Fiddler。启动后，我们可以在Fiddler的窗口中看到主要的界面：

（图片为Fiddler主界面）

3、设置抓包规则

在Fiddler的“Rules”菜单中，选择“Customize Rules”选项。这个文件可以自定义抓取请求，修改响应，添加头部或cookie等信息。

// 比如我们在请求的header中通过User-Agent设置自定义浏览器类型为“fiddler”
static function OnBeforeRequest(oSession: Session) {
    if (oSession.uriContains("weixin")) {
        oSession["ui-customcolumn"] = "Attention";
        oSession.oRequest["User-Agent"] = "fiddler";
    }
}

通过在代码中自定义“fiddler”作为User-Agent，我们就可以在抓包的过程中伪装成fiddler浏览器，以便于测试自定义消息处理程序。此外，还可以设置过滤规则以快速筛选所需的请求。

4、进行抓包

当设置完成后，点击Fiddler的“Start”按钮，即可开始进行抓包，Fiddler将自动对本机的网络进行截取和分析。此时，我们会在主界面的Session列表中看到所有的会话（请求和响应）并能够按源（客户端）或目的地（服务器）端口进行筛选。在展开每个标记时，我们可以看到每个会话所包含的详细信息。

// 如下是一段微信小程序请求API的示例
GET https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN HTTP/1.1
Host: api.weixin.qq.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:44.0) Gecko/20100101 Firefox/44.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Cookie: pgv_pvi=941423616; mm_lang=zh_CN; ts_refer=www.sogou.com/link; ts_uid=88777486

5、修改请求/响应内容

在抓包的过程中，我们有时需要修改请求/响应内容。例如：

// 修改请求内容
static function OnBeforeRequest(oSession: Session) {
    // 判断请求是否为某个API，若是则修改请求内容
    if (oSession.fullUrl.Contains("XXX")) {
        oSession.fullUrl = oSession.fullUrl.Replace("XXX", "YYY");
        // 获取请求内容，并替换
        oSession.RequestBody = oSession.RequestBody.Replace("value1", "值1");
        oSession.RequestBody = oSession.RequestBody.Replace("value2", "值2");
    }
}

// 修改响应内容
static function OnBeforeResponse(oSession: Session) {
    // 判断响应是否为某个API，若是则修改响应内容
    if (oSession.fullUrl.Contains("ZZZ")) {
        // 获取响应内容，并替换
        oSession.ResponseBody = oSession.ResponseBody.Replace("source_value", "target_value");
    }
}

在代码中，我们可以通过全局替换源内容的方式来修改请求/响应的内容，以达到调试和测试的目的。

三、微信小程序抓包的实践

在微信小程序开发中，我们可以通过抓包工具Fiddler来查看小程序内全局接口请求和返回信息。

1、开启Fiddler

打开Fiddler并启动。

2、配置小程序HTTPS解密

在Fiddler中选择Tools菜单中的Fiddler Options，弹出窗口中选择HTTPS标签，勾选Decrypt HTTPS traffic。此时会提醒生成一个Fiddler生成的根证书，点击Yes，并选择Yes，如果电脑操作系统已经允许根证书安装，则Fiddler会自动安装相应根证书；如果电脑操作系统未安装，则需要手动安装，在http://localhost.:8888/的根目录中下载根证书并安装。

3、操作微信开发者工具

在微信开发者工具中，进入设置，点击常规设置，勾选上Native模拟器（beta），勾选上开启自定义端口（默认8888），同时勾选上开启调试模式。之后保存并重启开发者工具，在调试页面查看window.location.href即可确认所使用的HTTP请求方法。

如果选择模拟器为iOS系统，则需要额外勾选上安装HTTP证书的选项。然后在生成的证书中选择微信小程序对应的扩展证书进行安装。安装完成后，在小程序调试地址前加上fiddler的代理地址即可通过Fiddler抓包。

4、查看微信小程序请求和返回内容

在Fiddler中，我们可以通过过滤器来过滤并查看微信小程序的请求和返回信息。过滤器可以通过添加包含小程序关键词的正则表达式进行匹配，例如：

 // 添加过滤条件，过滤包含关键字XXX的所有请求
if (oSession.isHTTPS && oSession.PathAndQuery.ToLower().Contains("XXX")) {
    oSession["ui-color"] = "red";
}

过滤器能够显著提高我们的开发效率，让我们能以更加高效的方式检查和调试小程序的网络请求和响应内容。

四、总结

微信小程序是一种新型的移动应用形态，相较于传统的移动应用，其优点在于更低的开发门槛和更高的运行效率。然而，在开发小程序时，因为小程序是基于网络进行通信的，因此，网络接口测试和调试是至关重要的。而抓包工具Fiddler则是网络调试的利器，能够帮助我们轻松监测和调试我们的网络请求和响应。在小程序开发中，能够熟练使用Fiddler抓包并在实践中快速解决问题，对于提升开发效率和应用质量大有裨益。