在微信內(nèi)置瀏覽器中通過微信JS SDK栓辜,可以使用微信提供的功能永高,例如設(shè)置分享鏈接的標(biāo)題和圖片隧土、調(diào)起微信支付、打開掃一掃等等命爬。
根據(jù)官方文檔曹傀,前端在使用微信的接口前要先進(jìn)行配置,如下:
wx.config({
debug: true, // 調(diào)試模式
appId: '', // 必填饲宛,公眾號的唯一標(biāo)識
timestamp: , // 必填皆愉,生成簽名的時間戳
nonceStr: '', // 必填,生成簽名的隨機(jī)串
signature: '',// 必填艇抠,簽名
jsApiList: [] // 必填幕庐,需要使用的JS接口列表
});
配置信息得從后端獲取,后端在計算signature
時需要前端傳入當(dāng)前頁面的URL家淤。開發(fā)者要在公眾平臺設(shè)置JS SDK安全域名异剥,在這個域名下才能使用微信JS SDK。也就是說調(diào)用JS SDK一共有 2 個條件:
- 在微信內(nèi)置瀏覽器訪問絮重,或者在電腦端的微信開發(fā)者工具冤寿;
- 在指定域名下訪問,也就是在公眾平臺設(shè)置的安全域名青伤。
我們要做的就是讓指定域名映射到本地督怜,就可以將 HTTP 請求發(fā)送 給開發(fā)服務(wù)器,主要就是修改 hosts 文件狠角。假設(shè)在公眾平臺設(shè)置的JS SDK安全域名為wx.example.com
号杠,本地調(diào)試微信 SDK 的步驟如下:
一、修改 hosts 文件丰歌,將域名映射到127.0.0.1 IP地址
$ sudo vim /etc/hosts
# 在host文件底部添加以下內(nèi)容
127.0.0.1 wx.example.com
由于本地開發(fā)服務(wù)器監(jiān)聽的是 8080 端口究流,還得將 8080 端口轉(zhuǎn)發(fā)給默認(rèn)的 80 端口辣吃。先檢查有沒有進(jìn)程在監(jiān)聽 80 端口,然后再轉(zhuǎn)發(fā)芬探。使用 lsof
命令查看有沒有進(jìn)程在監(jiān)聽 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)
既然沒有進(jìn)程在監(jiān)聽 80 端口,接下來配置端口轉(zhuǎn)發(fā)偷仿,參考這篇文章Mac pfctl Port Forwarding
# 轉(zhuǎn)發(fā)80端口到8080端口
$ echo " rdr pass inet proto tcp from any to any port 80 -> 127.0.0.1 port 8080" | sudo pfctl -ef -
# 查看當(dāng)前端口轉(zhuǎn)發(fā)規(guī)則
$ sudo pfctl -s nat
# 移除端口轉(zhuǎn)發(fā)規(guī)則哩簿,不必執(zhí)行
# sudo pfctl -F all -f /etc/pf.conf
我前端是一個 Vue 項目,轉(zhuǎn)發(fā)端口后酝静,頁面返回 Invalid Host header
节榜,需要在my_project/build/webpack.dev.conf.js
文件中找到devServer
配置,增加一個選項别智。
devServer: {
...,
disableHostCheck: true
}
現(xiàn)在就可以 Mac 的微信開發(fā)者工具中調(diào)試JSSDK了宗苍,在地址欄輸入:wx.example.com
,就會將請求轉(zhuǎn)發(fā)給本地開發(fā)服務(wù)器了薄榛,如下圖讳窟。
二、搭建代理服務(wù)器
不過我們的目的是在手機(jī)上調(diào)試敞恋,接下來我們要在 Mac 上使用 SquidMan 來搭建代理服務(wù)器丽啡,代理來自手機(jī)的HTTP請求。把發(fā)去wx.example.com
的請求轉(zhuǎn)發(fā)給127.0.0.1:8080
硬猫。
2.1 下載 SquidMan
2.2 配置 SquidMan
由于 SquidMan 默認(rèn)監(jiān)聽8080端口补箍,跟我的開發(fā)服務(wù)器沖突了。打開Preferences
啸蜜,我把它改成了8087
切換到
template
選項卡坑雅,修改兩行配置# 修改http_access deny all
http_access allow all
# 修改http_access deny to_localhost
http_access allow to_localhost
點(diǎn)擊保存,然后啟動衬横。
-
手機(jī)設(shè)置代理服務(wù)器
設(shè)置代理
確保你手機(jī)跟 Mac 連接到同一個局域網(wǎng)(比如連著同一個 WiFi)裹粤。然后打開手機(jī)的無線設(shè)置,設(shè)置代理冕香。
通過ifconfig
查看 Mac 的局域網(wǎng)ip地址蛹尝,端口則是我們剛剛在 Squid Man 設(shè)置的 8087后豫。
$ ifconfig
en1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> 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<PERFORMNUD,DAD>
media: autoselect
status: active
我 Mac 的局域網(wǎng) ip 地址是 192.168.2.108悉尾。保存無線設(shè)置后,就可以在微信打開wx.example.com
進(jìn)行本地調(diào)試了挫酿!
可以在命令行實時查看代理服務(wù)器的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將發(fā)送到wx.example.cn
的請求轉(zhuǎn)發(fā)給了127.0.0.1
。