微信 jssdk本地调试方案

[liusaint]

微信 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

[luckymore]

可以用微信开发工具自带的真机调试功能，
公众号开发工具貌似没有自带真机调试功能哇