手把手教你如何在Mac本地调试微信JS SDK

在微信内置浏览器中通过微信JS SDK,可以使用微信提供的功能,例如设置分享链接的标题和图片、调起微信支付、打开扫一扫等等。
根据官方文档,前端在使用微信的接口前要先进行配置,如下:

wx.config({
    debug: true, // 调试模式
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

配置信息得从后端获取,后端在计算signature时需要前端传入当前页面的URL。开发者要在公众平台设置JS SDK安全域名,在这个域名下才能使用微信JS SDK。也就是说调用JS SDK一共有 2 个条件:

  1. 在微信内置浏览器访问,或者在电脑端的微信开发者工具;
  2. 在指定域名下访问,也就是在公众平台设置的安全域名。

我们要做的就是让指定域名映射到本地,就可以将 HTTP 请求发送 给开发服务器,主要就是修改 hosts 文件。假设在公众平台设置的JS SDK安全域名为wx.example.com,本地调试微信 SDK 的步骤如下:

一、修改 hosts 文件,将域名映射到127.0.0.1 IP地址

$ sudo vim /etc/hosts
# 在host文件底部添加以下内容
127.0.0.1 wx.example.com

由于本地开发服务器监听的是 8080 端口,还得将 8080 端口转发给默认的 80 端口。先检查有没有进程在监听 80 端口,然后再转发。使用 lsof 命令查看有没有进程在监听 80 端口。

$ lsof -i -P -n | grep LISTEN
ss-local   3065 admin    6u  IPv4 0xa8ba2df099418f61      0t0  TCP 127.0.0.1:1086 (LISTEN)
redis-ser  3079 admin    4u  IPv4 0xa8ba2df09adbcc39      0t0  TCP 127.0.0.1:6379 (LISTEN)
privoxy    3085 admin    3u  IPv4 0xa8ba2df09adbd531      0t0  TCP 127.0.0.1:8118 (LISTEN)
privoxy    3085 admin    4u  IPv4 0xa8ba2df09b378341      0t0  TCP *:8118 (LISTEN)
postgres   3098 admin    6u  IPv4 0xa8ba2df09adbba49      0t0  TCP 127.0.0.1:5432 (LISTEN)

既然没有进程在监听 80 端口,接下来配置端口转发,参考这篇文章Mac pfctl Port Forwarding

# 转发80端口到8080端口
$ echo " rdr pass inet proto tcp from any to any port 80 -> 127.0.0.1 port 8080" | sudo pfctl -ef -
# 查看当前端口转发规则
$ sudo pfctl -s nat
# 移除端口转发规则,不必执行
# sudo pfctl -F all -f /etc/pf.conf

我前端是一个 Vue 项目,转发端口后,页面返回 Invalid Host header,需要在my_project/build/webpack.dev.conf.js文件中找到devServer配置,增加一个选项。

devServer: {
  ...,
  disableHostCheck: true
}

现在就可以 Mac 的微信开发者工具中调试JSSDK了,在地址栏输入:wx.example.com,就会将请求转发给本地开发服务器了,如下图。

手把手教你如何在Mac本地调试微信JS SDK_第1张图片
微信开发者工具

二、搭建代理服务器

不过我们的目的是在手机上调试,接下来我们要在 Mac 上使用 SquidMan 来搭建代理服务器,代理来自手机的HTTP请求。把发去wx.example.com的请求转发给127.0.0.1:8080
2.1 下载 SquidMan
2.2 配置 SquidMan
由于 SquidMan 默认监听8080端口,跟我的开发服务器冲突了。打开Preferences,我把它改成了8087

手把手教你如何在Mac本地调试微信JS SDK_第2张图片
修改 SquidMan 端口

切换到 template选项卡,修改两行配置
手把手教你如何在Mac本地调试微信JS SDK_第3张图片
template选项卡

# 修改http_access deny all
http_access allow all
# 修改http_access deny to_localhost
http_access allow to_localhost

点击保存,然后启动。


手把手教你如何在Mac本地调试微信JS SDK_第4张图片
启动 Squid Man
  1. 手机设置代理服务器


    手把手教你如何在Mac本地调试微信JS SDK_第5张图片
    设置代理

确保你手机跟 Mac 连接到同一个局域网(比如连着同一个 WiFi)。然后打开手机的无线设置,设置代理。
通过ifconfig查看 Mac 的局域网ip地址,端口则是我们刚刚在 Squid Man 设置的 8087。

$ ifconfig
en1: flags=8863 mtu 1500
    ether 5c:96:9d:71:ed:xx
    inet6 fe80::1822:21d3:s3xx:89d6%en1 prefixlen 64 secured scopeid 0x4
    inet 192.168.2.108 netmask 0xffffff00 broadcast 192.168.2.255
    nd6 options=201
    media: autoselect
    status: active

我 Mac 的局域网 ip 地址是 192.168.2.108。保存无线设置后,就可以在微信打开wx.example.com进行本地调试了!

手把手教你如何在Mac本地调试微信JS SDK_第6张图片
微信内置浏览器

可以在命令行实时查看代理服务器的access_log

$ tail -200f ~/Library/Logs/squid/squid-access.log
1522428241.979    308 192.168.2.107 TCP_TUNNEL/200 5517 CONNECT data.mistat.xiaomi.com:443 - HIER_DIRECT/203.100.93.112 -
1522428252.031  65516 192.168.2.107 TCP_TUNNEL/200 5716 CONNECT open.account.xiaomi.com:443 - HIER_DIRECT/118.26.252.5 -
1522428338.333  85084 192.168.2.107 TCP_TUNNEL/200 4414 CONNECT sp1.baidu.com:443 - HIER_DIRECT/14.215.177.39 -
1522428343.297  60954 192.168.2.107 TAG_NONE/503 0 CONNECT accounts.google.com:443 - HIER_NONE/- -
1522428354.021   3269 192.168.2.107 TCP_TUNNEL/200 3411 CONNECT hd.xiaojukeji.com:443 - HIER_DIRECT/139.199.240.46 -
1522428354.251   9750 192.168.2.107 TAG_NONE/000 0 CONNECT clients4.google.com:443 - HIER_NONE/- -
1522428354.251 119853 192.168.2.107 TAG_NONE/000 0 CONNECT clients4.google.com:443 - HIER_NONE/- -
1522428354.251 168879 192.168.2.107 TAG_NONE/000 0 CONNECT clients4.google.com:443 - HIER_NONE/- -
1522428354.251  67289 192.168.2.107 TCP_TUNNEL/200 4311 CONNECT update.googleapis.com:443 - HIER_DIRECT/203.208.40.55 -
1522428354.251   3499 192.168.2.107 TCP_TUNNEL/200 3343 CONNECT omgup.xiaojukeji.com:443 - HIER_DIRECT/123.207.209.54 -
1522428198.886      2 192.168.2.107 TCP_MISS/304 243 GET http://wx.example.cn/admin - HIER_DIRECT/127.0.0.1 -

注意最后一行,Squid Man将发送到wx.example.cn的请求转发给了127.0.0.1

你可能感兴趣的:(手把手教你如何在Mac本地调试微信JS SDK)