关于微信js-sdk:微信jssdk本地调试方案

此计划为共事探索得出，现自己行将到职，特此记录下该计划，以备后续查找。

解决的问题

微信js-sdk初始化须要校验域名，本地调试无奈通过，需伪装成生产/测试时拜访的域名
也实用于抓取手机端的申请，在PC端进行剖析（Charles）

计划思路要点

批改Host, 使得指标域名映射到本机(127.0.0.1)
nginx开启HTTPS server，将指标域名proxy_pass到要测试的我的项目本地地址(如http://localhost:8080)
手机通过Charles代理到电脑本机

批改Hosts

sudo vi /etc/hosts# 增加指标域名映射127.0.0.1    [target-host-name]

装置nginx

倡议通过Homebrew装置

brew install nginxnginx -vnginx -h

胜利装置截图

# 胜利装置后摘录如下Docroot is: /usr/local/var/wwwThe default port has been set in: /usr/local/etc/nginx/nginx.conf to 8080 so that nginx can run without sudonginx will load all files in /usr/local/etc/nginx/servers/.

能够批改下默认端口，而后跑nginx启动, 能够在浏览器看到默认的http server，示意nginx装置好了，没什么问题。

mkcert生成ssl证书

要开启https server，须要有ssl证书，应用mkcert能够在本地装置证书。

mkcert: https://github.com/FiloSottil...

生成证书的形式，请通读其README，次要理解装置、生成证书命令、装置CA命令

倡议将证书放到nginx装置目录下usr/local/etc/nginx/ssl，命名自行依据理论命名即可。

mkcert -key-file [key.pem] -cert-file [cert.pem] [target-host-name] [target-host-name]

配置https server

...http {    ...    # HTTPS server    server {       listen       443 ssl;       server_name  [target-host-name];       proxy_buffering off;       ssl_certificate      /usr/local/etc/nginx/ssl/[cert.pem];       ssl_certificate_key  /usr/local/etc/nginx/ssl/[key.pem];       ssl_session_cache    shared:SSL:1m;       ssl_session_timeout  5m;       ssl_ciphers  HIGH:!aNULL:!MD5;       ssl_prefer_server_ciphers  on;       location / {           root   html;           index  index.html index.htm;           proxy_pass          [本地服务，如 http://localhost:8080];       }    }}

设置结束重启nginx, 拜访指标域名，若能拜访到你开启的本地服务，则示意设置好了。

nginx常用命令

请通过nginx -h查看

# 启动nginxnginx# 重启nginxnginx -s reload# 退出nginxnginx -s quit

Charles

装置Charles，别离在电脑和手机装置Charles证书，参考：此处-掘金文章

手机增加Charles连贯：Help - SSL proxying - Install Charles Root Certificate On a Mobile Device or Remote Browser, 而后按提醒：

设置代理，手机连贯到与电脑同一wifi, 并设置代理
拜访chls.pro/ssl下载证书，并装置证书（若装置失败，需自行找适宜你所应用手机的装置形式，参考：https://www.jianshu.com/p/59c... R15是进入WLAN, 拉到底部有个"高级设置" - 平安证书治理从存储设备装置，抉择下载的证书并装置）

结束后，通过手机拜访指标域名，查看Charles的抓包，看对应的申请Remote Address是否为[target-host-name]/127.0.0.1:443, Client Address 则为手机的地址。

至此，就胜利使得在手机上拜访指标域名，实际上拜访的是电脑开启的本地服务，达到了能够调试微信js-sdk的目标。

二次应用时大抵流程

确认hosts域名映射
确认nginx https-server是否开启
确认要调试的本地服务是否开启
确认Charles关上
确认手机开启代理，且证书没有问题

注意事项

连贯的WI-FI不能开启翻墙