微信生态下的小程序和公众号开发已经比较成熟，网上攻略很多，微信开发者工具的支持程度也很完备。但对于企业微信的应用开发，能搜到的信息要少得多。除了官方文档，网上资料大部分是接口调用问题相关的，当然也有部分提到了企业微信应用的开发调试问题。
其实在开始网页应用开发前，我先摸索过几天企业微信小程序的开发。应该是在去年，微信开发者工具IDE中提供了“企业微信小程序插件”，基本上能够在模拟器中调试大部分的接口，算是比较方便。但小部分跟场景相关的还是不行，必须真机调试。这里要补充几句，企业微信和个人微信对于应用的使用/唤醒方式，有很大的区别。在企业微信中，应用加载时所处的“场景”是非常重要的信息，比如是从工作台、聊天附件还是侧边栏进入。通常不同进入方式，加载的页面或页面内容是不同的，而场景在模拟器中无法模拟。最好的方式就是把应用先上线一个基础版（可以只放几个控件、没有逻辑实现），然后在企业微信后台关联小程序，用体验版进行真机调试。
后来小程序这条路没有继续。主要原因是我们要开发的是一个跟聊天双方都强关联的应用，在聊天侧边栏展示。而小程序会直接蹦出一个独立窗口，给人的感觉与正在聊的天联系非常弱，可能更适合工具类或弱交互的应用类型。
回到网页应用的路上后，发现是个大坑。没有模拟器、各种约束限制。在搜遍各种文章后，我感觉并没能把“如何方便地开发和调试企业微信网页应用”这个问题彻底搞明白，缺少可操作、步骤清晰的指南。在早几年（16年之后）有过一波“微信企业号”的开发，是企业微信的早期版本，也存在开发调试难的问题（可见四五年过去了，并没有什么大变化）。网上能搜到相关文章，也给了我不少帮助。
本篇文章目的是记录下我自己的环境搭建过程，存个档。也希望能给网友一些思路。
1. 企业微信客户端的应用绑定我本地的开发环境，而非生产环境
2. 能在企业微信客户端实现前后端代码的调试，能打断点
准备工作
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未定义。。）
原文链接：https://blog.csdn.net/wangdong1106/article/details/120226899?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918471416781432950430%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918471416781432950430&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-18-120226899-null-null.article_score_rank_blog&utm_term=%E5%85%8D%E5%A4%87%E6%A1%88cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/4269
