微信、钉钉h5应用本地调试配置

2023-12-14 06:04:02

如此本地调试钉钉和微信h5应用

前言

微信或钉钉在开发h5应用时，都需要调用各自的js-sdk,所有在电脑浏览器调试的是会没有相应的环境而不能使用，所以只能在手机应用上面调试。第一种方法是应用对应的后台配置本地内网ip，但是只能一个设备使用，每次更换设备都需要重新配置内网穿透，而且是局限性的本地局域网内访问。
内网穿透的作用是将内网的http、https、tcp等服务器映射到公网，通过内网穿透获得的公网ip与端口可以映射到本地ip与端口，这样就可以通过公网ip与端口直接访问到内网服务器了。而ngrok就是内网穿透工具，ngrok在windows、Mac OS和Linux下都可以正常使用。

配置流程

下载并安装ngrok
到ngrok官网选择适合自己系统的版本下载，可以选择免费版也可以选择企业版，因为免费版只有转发时长1小时，超时后需要重新开启，企业版无超时限制，按年计费。下载好后将压缩包解压到相应的文件夹，比如C盘根目录。
注册并获取token
访问ngrok官网，注册并获取token，token是使用ngrok服务的关键。
配置端口转发
打开cmd，进入ngrok的文件夹，输入ngrok authtoken [token]，[token]替换成自己的token，并按回车键，token配置成功后会打印出如下信息：

Authtoken saved to configuration file: C:\ngrok\ngrok.yml

ngrok启动成功后，输入ngrok http 8000命令，-http指定转发http协议流量，[8000]为你应用的端口，然后ngrok会输出转发地址信息：

Forwarding                                    
  -> Local: http://localhost:8000
  -> Public: https://2c15-125-65-102-114.ngrok.io

从上面可以看到，Public地址就是映射的公网地址，只需要将这个地址填入微信或钉钉应用的配置即可，比如在钉钉应用中，添加开放授权回调地址：

https://2c15-125-65-102-114.ngrok.io/dingtalk/callback

将这个地址填入钉钉应用中，就可以在手机应用上进行调试了。

常见问题

ngrok开启后无法访问
有可能是因为你的电脑没有配置允许80端口访问。要解决这个问题，可以通过在控制面板中打开Windows防火墙，然后在例外选项卡中添加一个端口允许80端口访问。
内网穿透端口占用
如果你发现ngrok启动后无法访问，或者访问时出现错误，可能是因为你正在使用的端口被其他程序占用。你可以通过在任务管理器中找到占用端口的程序，然后将其关闭，或者使用其他端口。