开发微信网页及调试方法

参考资料

Mac中怎么使用Nginx实现80端口转发8080端口 - 大数据 - 亿速云

使用代理映射解决微信页面调试难题 | 梦翼坊

微信开发工具里的域名必须是在微信公众号白名单里的域名,而npm run dev大多是localhost,所以为了方便调试,需要如下步骤

勾选Proxy-macOS Proxy

点击Tools->Map Remote

目前发现只填域名才有效,如果添加了path,反而没效果

端口可以留空,https默认443

打开微信开发者工具,[设置-代理设置],使用手动设置代理

ip地址写npm run dev的ip(实测写localhost也可以),端口写charles的端口

charles端口查看方法

在访问域名前,可以先把map remote里的代理全部关闭,完成一次微信授权后,再打开代理

此时访问域名时,就会代理到npm run dev对应的网站

 而npm run dev里还需要配和devServer的proxy跨域请求

实测下来发现在微信开发工具中,只能用域名访问才能正常代理,如果域名后面带路径,则会失败