微信 jssdk 本地调试方法

DebugMi 发布于 2018-09-09编辑于 2018-12-06阅读:3449

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