微信开发者工具如何连接到本地API接口联调

 本文介绍了一种简单的配置方法，可以在微信开发者工具中通过“真机预览”或“真机调试”连接到本地API接口，无需将接口上传到专门的服务器进行调试。通过此方法可以极大简化本地API接口调试过程。
网上有一些其他的方法，比如将微信开发者工具降级为低版本，或者通过微信开发者工具自带的“局域网模式”进行调试，但个人感觉没必要那么麻烦，以下是我使用的方法，配置起来非常简单，给大家一个新的选项，欢迎一起探讨。

开发环境说明

• 操作系统：Windows11
• Web服务器：wampserver
• 开发工具：微信开发者工具stable 1.06.2407120

前提条件

• 手机、电脑必须连接同一局域网（备注：只要连接到同一WIFI下即可，即使手机和电脑分别连接了2.4G和5G频段也可以联通）
• 关闭电脑的防火墙

配置方法

1. 查看电脑的IP地址，如果电脑有多块网卡需要注意，确保查看的是当前连接WIFI的那块网卡的IP地址（可在命令行键入ipconfig查看）；
2. 配置Apache vhost，将ServerName设置为步骤1中电脑的IP，参考以下红色字体的配置：

   <VirtualHost *:80>     ServerName 192.168.X.X     DocumentRoot "<api-path>"     <Directory  "<api-path>">         Options +Indexes +Includes +FollowSymLinks +MultiViews         AllowOverride All         Require all granted     </Directory> </VirtualHost>

3. 修改小程序Web请求路径为相同的IP。
4. 在微信开发者工具中勾选“不校验合法域名...”选项，如图：
5. 在微信开发者工具中清除缓存并重新编译，通过“真机预览”或“真机调试”就可以连接到本地API接口啦！

特别说明

• 无论是微信小程序还是APP开发都可以通过上述方法进行接口调试。
• 还有一种极端的情况，当电脑和手机连接了公共的WIFI，虽然连接了相同的WIFI，但手机仍然连接不到电脑。此时可以通过开启电脑的“移动热点”以达到同样的目的。配置步骤如下：
• 在Windows中开启“移动热点”，并让手机连接到电脑的移动热点。Windows11中开启移动热点的方法是点击桌面右下角的WIFI图标，在弹出的对话框中选择“移动热点”，参考下图：

• 开启热点后，在命令行中使用ipconfig查看此热点的IP地址。参考本文“配置方法”中的步骤将此IP配置到Apache vhost文件和小程序代码的网络请求中即可。