企微应用本地调试指南

对之前博文企微 h5-jssdk 本地开发调用指南的概要

之前如何开发

企微应用开发体验不佳, 主要是受下边几个因素限制, 最后结果就是每次调试企微 API 时, 都要部署到线上/预发布环境进行调试, 开发体验很差

限制条件	后果
使用 js-sdk 的页面域名必须经过线上鉴权, 且不能指定端口	只能使用线上域名进行测试, 且不能指定非 80/443 的端口
普通浏览器/微信开发者调试工具中没有企微的 js-sdk, 只有从端应用启动的网页中才有	企微 js-sdk 相关功能只能在企微手机版/电脑版中进行测试
企微环境下无法启动 devtools	无法查看控制台日志, 只能使用 vConsole 库或 alert 进行调试

期望怎样开发

像开发正常网页一样, 在 Chrome 浏览器中进行开发调试, 可以打断点, 看日志, 改动可以即时生效. 但, 能做到吗?

当然可以

怎么做

解决办法是一步步解除企微对本地开发的限制

绕过企微域名验证

企微 js-sdk 鉴权时, 只要求页面部署在鉴权后的域名上, 但并没有检查域名指向的 ip. 所以, 可以在线上鉴权通过后, 通过配置 hosts 将线上域名的 ip 改为 127.0.0.1, 这样就能在访问已鉴权域名时又使用本地dev-server了.

另一个问题, 企微 js-sdk 要求域名后指定端口, 但 dev-server 默认启动的是 3000 端口, 这个怎么解决? ---- 也很简单, 在 dev-server 配置里将启动端口改为 80(http 协议的默认端口) 即可. 需要注意的一点是操作系统默认禁止程序占用 1024 以下的端口, 因此需要用管理员身份启动程序. windows 需要用管理员身份启动 powershell, 然后在里边执行 dev-server, mac/linux 需要用 sudo 启动

在企微环境中进行调试

其实企微默认提供了开发者模式, 只要按企微官方 debug 说明进行配置, 就能在企微应用页面中打开开发者工具, 进而通过location.href="http://target.com/demo/app" 跳转到目标页面, 开始调试

• Ctrl+Alt+Shift+D启动企微调试模式
  
• 在企微内部打开任意网页, 点右键, 即可打开 devtools
  

Tip: 企微在 windows 上使用 Chrome, 在 mac 上用的是 safari, 这意味着只有在 windows 系统上才能正常使用 Chrome 进行开发验证----用 Mac 的朋友可以考虑申请台 Windows 开发机临时使用下以就解决问题

在手机中进行预览

手机访问 dev-server, 关键点在于手机需要挂上 Charles 代理, 这样网络请求就可以从电脑端发出, 然后对域名的请求即被 hosts 映射为电脑端的 127.0.0.1, 然后访问到 dev-server

如果上边这些看不懂怎么办

其实也有办法, VS Code 支持远程调试, 开台线上服务器, 然后用 VS Code 直接远程登录线上服务器进行调试, 也能实现实时刷新的效果.

如果公司不给开线上服务器权限的话, 直接到阿里云/腾讯云上注册个账号, 开台云服务器, 也能起到一样的效果----当然, 需要先买一个域名, 然后把域名指向该线上服务器才行