微信公众号,必须通过域名才能进行访问。很多人调试时,都是把代码打包放到服务器上来调试,发现问题本地修改,再次上传调试,这样效率非常低。
我们通过这样操作可以实现本地的直接调试:
首先公众号里设置好域名,验证域名所有者。
我们假设,域名为:http://wechat.hz300.com,npm run dev开启的本地代码调试服务为:http://localhost:8090/。
再配置:
1、修改本地hosts,将wechat.hz300.com映射到127.0.0.1。修改c:\windows\system32\drivers\etc\hosts文件即可。mac电脑修改/etc/hosts文件。
2、设置本地代理转发,将80端口转发到8090端口。可使用各种代理转发工具。我用的是自己写的工具:https://github.com/hzsrc/dynamic-mocker,执行npm run proxy80即可。
设置完这一步,你就可以再电脑上使用微信开发者工具访问域名http://wechat.hz300.com进行调试了。访问的走向是:wechat.hz300.com:80 => 127.0.0.1:80 => 127.0.0.1:8090,也就是你的本地代码调试服务。
3、如果需要用真机调试,可以将手机与电脑连接同一个局域网络,然后在电脑开启一个抓包代理(用Fiddler2即可,mac可以Charles),再将手机的wifi代理设置为你的电脑ip及8888端口。这样,在手机*问网络时,将通过抓包代理到你的电脑上。微信访问http://wechat.hz300.com也将最终访问到你的本地代码调试服务。