企业微信网页应用开发 - 开发环境搭建

微信生态下的小程序和公众号开发已经比较成熟，网上攻略很多，微信开发者工具的支持程度也很完备。但对于企业微信的应用开发，能搜到的信息要少得多。除了官方文档，网上资料大部分是接口调用问题相关的，当然也有部分提到了企业微信应用的开发调试问题。

其实在开始网页应用开发前，我先摸索过几天企业微信小程序的开发。应该是在去年，微信开发者工具IDE中提供了“企业微信小程序插件”，基本上能够在模拟器中调试大部分的接口，算是比较方便。但小部分跟场景相关的还是不行，必须真机调试。这里要补充几句，企业微信和个人微信对于应用的使用/唤醒方式，有很大的区别。在企业微信中，应用加载时所处的“场景”是非常重要的信息，比如是从工作台、聊天附件还是侧边栏进入。通常不同进入方式，加载的页面或页面内容是不同的，而场景在模拟器中无法模拟。最好的方式就是把应用先上线一个基础版（可以只放几个控件、没有逻辑实现），然后在企业微信后台关联小程序，用体验版进行真机调试。

后来小程序这条路没有继续。主要原因是我们要开发的是一个跟聊天双方都强关联的应用，在聊天侧边栏展示。而小程序会直接蹦出一个独立窗口，给人的感觉与正在聊的天联系非常弱，可能更适合工具类或弱交互的应用类型。

回到网页应用的路上后，发现是个大坑。没有模拟器、各种约束限制。在搜遍各种文章后，我感觉并没能把“如何方便地开发和调试企业微信网页应用”这个问题彻底搞明白，缺少可操作、步骤清晰的指南。在早几年（16年之后）有过一波“微信企业号”的开发，是企业微信的早期版本，也存在开发调试难的问题（可见四五年过去了，并没有什么大变化）。网上能搜到相关文章，也给了我不少帮助。

本篇文章目的是记录下我自己的环境搭建过程，存个档。也希望能给网友一些思路。

诉求

1. 企业微信客户端的应用绑定我本地的开发环境，而非生产环境

2. 能在企业微信客户端实现前后端代码的调试，能打断点

准备工作

1. 一个已ICP备案的域名（要求见使用说明 - 企业微信API）

2. 准备一个内网渗透的工具（我选的是基于ngrok的natapp），创建一个通道将本地某个端口的服务暴露出去

说明：内网渗透工具很多，有免费/付费的，也可以自己搭建。我是花钱买的（每个月不到10块），带宽共享但开发够用。为什么没有用免费，主要原因是免费的大部分不能提供固定域名，不定时变更。只要一变更就得在服务器上修改nginx配置，非常麻烦。

另外需要注意一下，很多工具会对域名备案所在的云服务商（阿里云或腾讯云）有要求，如果不是一个服务商，会有额外的配置步骤。

3. 在服务器上装nginx，将80端口代理到内网渗透工具提供的域名上

4. 访问你的应用域名，此刻应该能看到本地服务成功运行

5. 安装企业微信PC客户端

步骤

1. 登录企业微信管理后台，在应用管理下添加应用，并配置“网页授权及JSSDK”（oauth2.0按需配置）。按提示下载一个验证文件，将文件放到应用根目录下后，点击验证。

说明：应用需要打包后用httpserver启动服务，确保内网渗透工具也是启动的。验证成功后就可以回到开发模式了。

2. 企业微信管理后台，在应用管理下添加应用入口，比如侧边栏之类的。

3. 使用PC客户端，查看是否能正确显示页面。如果没有的话，使用浏览器输入域名看看。如果浏览器中也没有，检查内网渗透和反向代理配置；如果浏览器中有，检查第1步配置的域名是否正确、以及第2步在入口中指定的页面链接是否正确。

4. PC客户端中按shift + Ctrl + Alt + D开启调试模式。之后重新进入应用页面点右键“检查元素”就能进入调试工具了。跟chrome开发者工具差不多。

5. 至此搭建完成

前端调试

有三种：

1. PC客户端

支持最完备，能够调试场景相关的api。缺点是调试工具和chrome相比略微不同，而且每次改完代码，需要手动点几下重新进入应用页面，不能直接刷新

2. 微信开发工具的公众号网页

比PC客户端方便一些。大部分api可支持，但无法调试场景相关的api

3. 浏览器

无法调试场景相关的api，而且js文件的引入方式有影响。不知道原因，但自己试下来，用cdn引入不好使，下载到本地是可以的。（注：我用了uniapp，它内置了一个叫wx的对象。网上查到有人用jWeixin替代wx解决了这个冲突，但我的jWeixin未定义。。）

另外，浏览器可以模拟微信内置的浏览器，需要配置一下UA。可参考这篇文章：在 Chrome (谷歌浏览器) 中模拟微信内置浏览器_高先生的猫-CSDN博客_chrome模拟微信内置浏览器配置完后，就可以避免某些api调用完显示“在微信（企业微信）中打开”这样的情况了。