微信 jssdk本地调试方案
liusaint opened this issue · 1 comments
微信 jssdk 本地调试方案
微信公众号开发接口配置需要一个外网能访问的域名。localhost不在这个域名下,wx.config会失败。如果每次修改都发布到测试环境,又太影响开发效率。
总结一下除了直接上测试环境之外的两种本地jssdk调试方案。
1.使用内网穿透工具
让外网能通过某个域名访问到我们本机的localhost。从而实现在本机上修改看效果。参考 https://blog.csdn.net/differ_c/article/details/54880316
2.配置测试环境的域名访问本地项目
使用测试环境的域名,或者自己注册微信平台测试号配置的域名都可以。
本地的项目一般不是80端口。所以要用nginx代理一下。本地的项目是80端口,则可以直接配置host,不需要另配nginx。
本地启nginx,映射localhost:3000到test.com(实际的测试环境地址),
增加host 127.0.0.1 test.com 本机就可以通过test.com访问本地项目localhost:3000了。
测试wx.config,成功。 要在手机上使用test.com看本地项目效果的话,需要手机跟电脑在同一个内网,然后让电脑代理手机的请求。
(1)host修改 127.0.0.1 test.com
推荐一个小工具SwitchHosts,方便在不同的host之间切换。
工具使用参考:
- 基本介绍:https://www.jianshu.com/p/380fbcd4a1d7
- 清除浏览器dns缓存:https://blog.csdn.net/Mint6/article/details/78310331
- 切换中文:https://blog.csdn.net/dxh0823/article/details/80836319
(2)nginx配置
配置:/usr/local/etc/nginx/nginx.conf
server {
listen 80;
server_name test.com;
location / {
proxy_pass http://127.0.0.1:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
}
修改配置后要reload
sudo nginx -s reload
参考文章:
- mac上的包管理工具。Homebrew的安装及使用。
https://www.jianshu.com/p/4e80b42823d5 - mac Nginx+Nodejs配置
https://blog.csdn.net/zlj520dy/article/details/73480449 - Mac下用brew安装nginx
https://www.jianshu.com/p/6c7cb820a020 - nginx 配置那些事儿
https://segmentfault.com/a/1190000009003686 - Nginx 代理 WebSocket https://my.oschina.net/wenjinglian/blog/738050
- 解决 Webpack "Invalid Host Header" https://tonghuashuo.github.io/blog/webpack-dev-server-invalid-host-header.html
(3)手机真机调试。
使用手机访问test.com要能直访问我们的本地项目,需要代理手机的请求。可以用微信开发工具自带的真机调试功能,也可以使用Charles代理请求。
Charles使用相关文章:
- Charles破解版:https://www.jianshu.com/p/4f0573f3c5db
- 基础教程:https://blog.devtang.com/2015/11/14/charles-introduction/
- charles连接手机抓包:https://www.cnblogs.com/xiaoshidi/p/6878557.html
建议安装url转二维码的chrome插件:https://cli.im/news/6527 快速访问电脑上的网页。
参考:
- mac上本地调试微信jssdk的方法 https://www.jianshu.com/p/dd90f00986ea
可以用微信开发工具自带的真机调试功能,
公众号开发工具貌似没有自带真机调试功能哇