手把手教你如何在Mac本地調(diào)試微信JS SDK

在微信內(nèi)置瀏覽器中通過微信JS SDK，可以使用微信提供的功能，例如設(shè)置分享鏈接的標(biāo)題和圖片、調(diào)起微信支付、打開掃一掃等等。
根據(jù)官方文檔，前端在使用微信的接口前要先進行配置，如下：

wx.config({
    debug: true, // 調(diào)試模式
    appId: '', // 必填，公眾號的唯一標(biāo)識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

配置信息得從后端獲取，后端在計算signature時需要前端傳入當(dāng)前頁面的URL。開發(fā)者要在公眾平臺設(shè)置JS SDK安全域名，在這個域名下才能使用微信JS SDK。也就是說調(diào)用JS SDK一共有 2 個條件：

  1. 在微信內(nèi)置瀏覽器訪問，或者在電腦端的微信開發(fā)者工具；
  2. 在指定域名下訪問，也就是在公眾平臺設(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ā)給默認的 80 端口。先檢查有沒有進程在監(jiān)聽 80 端口，然后再轉(zhuǎn)發(fā)。使用 lsof 命令查看有沒有進程在監(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)

既然沒有進程在監(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ù)器了，如下圖。

微信開發(fā)者工具

二、搭建代理服務(wù)器

不過我們的目的是在手機上調(diào)試，接下來我們要在 Mac 上使用 SquidMan 來搭建代理服務(wù)器，代理來自手機的HTTP請求。把發(fā)去wx.example.com的請求轉(zhuǎn)發(fā)給127.0.0.1:8080。
2.1 下載 SquidMan
2.2 配置 SquidMan
由于 SquidMan 默認監(jiān)聽8080端口，跟我的開發(fā)服務(wù)器沖突了。打開Preferences，我把它改成了8087

修改 SquidMan 端口

切換到template選項卡，修改兩行配置
template選項卡

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

點擊保存，然后啟動。


啟動 Squid Man

  1. 手機設(shè)置代理服務(wù)器


    設(shè)置代理

確保你手機跟 Mac 連接到同一個局域網(wǎng)（比如連著同一個 WiFi）。然后打開手機的無線設(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進行本地調(diào)試了！

微信內(nèi)置瀏覽器

可以在命令行實時查看代理服務(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。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 做微信公眾號開發(fā)，用到了微信js-sdk的幾個方法，比如手機相機拍攝照片,上傳照片uploadImage等接口。這...
    wfeidan閱讀 4,058評論 1贊 3
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,554評論 19贊 139
  • 轉(zhuǎn)載鏈接 注：本文轉(zhuǎn)載知乎上的回答 作者：初雪 鏈接：https://www.zhihu.com/question...
    pengshuangta閱讀 29,312評論 9贊 295
  • 給提問的開發(fā)者的建議：提問之前先查詢 文檔、通過社區(qū)右上角搜索搜索已經(jīng)存在的問題。 寫一個簡明扼要的標(biāo)題，并且...
    極樂叔閱讀 14,624評論 0贊 3
  • 電影并沒有什么能說出來的劇情。只記得日系的花草樹木庭院山川，還有那片海。B站上把女主們的腿胸臉評論了個遍，真的蠻煩...
    漾子_V閱讀 482評論 0贊 0

友情鏈接更多精彩內(nèi)容