微信 jssdk 本地调试方法

DebugMi 发布于 2018-09-09 12:56编辑于 2024-08-29 03:45阅读：

微信 jssdk 开放有很多能力，但是环境和配置要求都很严格，必须要在安全域名下才能有效。

想在线上调试吧，效率又低又不安全，最好就在本地调试！

假设设备是 mac 和 iPhone，线上域名是 www.a.com，本地项目地址是 127.0.0.1:3000

本机域名解析

修改 /etc/hosts 添加一行

127.0.0.1 www.a.com

使本机访问 www.a.com 全部解析到 127.0.0.1

但是本地项目端口是 3005 怎么办？用 nginx 做转发！

nginx 反向代理

先安装 nginx

brew install nginx

启动它

sudo nginx

添加一个配置，很简单，配置一般在 /usr/local/etc/nginx/nginx.conf

    server {
      listen 80;
      server_name www.a.com;
      location / {
        proxy_pass http://127.0.0.1:3000;
      }
    }

重启一下

sudo nginx -s reload

就是让 www.a.com 访问时，代理到本地的 3000 端口，OK目的大致达成。但是，要在真机上测试，怎么办？来个 Charles

配置 Charles

mac 上下载安装 Charles，然后配置

然后让 iPhone 和 mac 在同一个局域网，iPhone 点击 WiFi 右边的感叹号进入设置

http 代理设置为手动，服务器设置为 mac 的 ip，端口设为 8888

完美完成

而后，iPhone 在微信里访问 www.a.com，mac 代理了 iPhone 的请求，很成功的显示了下面这让人开心的画面↓

其他方法

还有一种更加简单的方法，就是建立 ssh 隧道，使你自己的域名指向本地的3000端口（我没用这个方法是因为安全域名已经满了）

  • 先让 www.b.com 解析到一台服务器的 ip

  • 修改服务器的 /etc/ssh/sshd_config，加一条 GatewayPorts yes，重启ssh：service ssh restart

  • 在 mac 上：ssh -R 80:localhost:3000 root@www.b.com

  • 微信公众平台上加一个安全域名 www.b.com

这样的话，访问 www.b.com 就全部转发到本地的 3000 端口了

0