企业微信自建应用如何本地调试

最近在开发公司社群服务，中间踩了不少坑，此篇文章主要介绍开发企业微信自建应用问题中摸索到的开发实践

企业微信自建应用创建的时候需要经过安全认证，认证的的时候需要开通外网访问权限，所以本地服务是不能通过验证的

自建应用一般会把数据与微信用户的userId进行绑定，获取信息userId需要走企业微信OAuth2

如果你在浏览器打开或微信开发者工具打开，会出现下图：

这个时候你想在本地开发有三种模式：

为了方便开发测试，一般会有三套环境，测试、灰度环境、线上环境。为了安全，测试跟灰度可以在通过企业微信安全域名验证后可关闭外网访问。在企业微信管理端配置对应的三个应用，这里我们本地调试企业微信自建应用就是通过测试环境域名解析到本地来实现。

首先在host文件增加测试域名

 vim /etc/hosts  
 
 // 添加

 127.0.0.1 test.你的测试环境域名.com.cn

然后配置 webpack dev server

devServer: {  
    host: "test.你的测试环境域名.com.cn",
    port: "80",
},

如果你本地服务是https则设置为443，https服务已经可以在本地开发企业自建应用（这里与自建应用地址协议保持一致就好）

// 这里需要注意一下，端口1024以下需要用sudo权限启动

sudo npm run dev

如果测试环境是https，而你本地是http则需要做一层转发

这里推荐使用Charles，作为开发必备必备抓包工具，使用起来是那么的熟悉，不熟悉Charles的朋友可以参考下面这篇文章安装

首先打开代理

然后配置 Map Remote

把域名协议转发设置一下

然后打开企业微信调试一下

完美的解决企业微信不能连接本地服务问题！

最后再教给大家一个小技巧，自建应用怎么打开调试工具

command control shfit + d，开启debug模式后

打开帮助->开发调试选项->打开webview元素审查

这样右键就能打开检查元素选项，再也不用为不知道怎么定位bug发愁了，告别alert

本地调试的原理就是在你本机做了一层拦截，在DNS解析的时候解析到本机，然后保证域名协议端口一致就可以了