微信 jssdk 本地调试方案

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liusaint1992/article/details/82026450

微信 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之间切换。

工具使用参考:

(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 

参考文章:

(3)手机真机调试。

使用手机访问test.com要能直访问我们的本地项目,需要代理手机的请求。可以用微信开发工具自带的真机调试功能,也可以使用Charles代理请求。

Charles使用相关文章:

建议安装url转二维码的chrome插件:https://cli.im/news/6527 快速访问电脑上的网页。

参考:

展开阅读全文

没有更多推荐了,返回首页