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

在微信內(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 個條件:

  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ā)給默認(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ù)器了薄榛,如下圖讳窟。

微信開發(fā)者工具

二、搭建代理服務(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

修改 SquidMan 端口

切換到template選項卡坑雅,修改兩行配置
template選項卡

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

點(diǎn)擊保存,然后啟動衬横。


啟動 Squid Man
  1. 手機(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)試了挫酿!

微信內(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)系作者
  • 序言:七十年代末早龟,一起剝皮案震驚了整個濱河市惫霸,隨后出現(xiàn)的幾起案子猫缭,更是在濱河造成了極大的恐慌,老刑警劉巖壹店,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猜丹,死亡現(xiàn)場離奇詭異,居然都是意外死亡硅卢,警方通過查閱死者的電腦和手機(jī)射窒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來将塑,“玉大人脉顿,你說我怎么就攤上這事〉懔龋” “怎么了艾疟?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長敢辩。 經(jīng)常有香客問我蔽莱,道長,這世上最難降的妖魔是什么责鳍? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任碾褂,我火速辦了婚禮,結(jié)果婚禮上历葛,老公的妹妹穿的比我還像新娘正塌。我一直安慰自己,他們只是感情好恤溶,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布乓诽。 她就那樣靜靜地躺著,像睡著了一般咒程。 火紅的嫁衣襯著肌膚如雪鸠天。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天帐姻,我揣著相機(jī)與錄音稠集,去河邊找鬼。 笑死饥瓷,一個胖子當(dāng)著我的面吹牛剥纷,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播呢铆,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼晦鞋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起悠垛,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤线定,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后确买,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斤讥,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年湾趾,在試婚紗的時候發(fā)現(xiàn)自己被綠了周偎。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡撑帖,死狀恐怖蓉坎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情胡嘿,我是刑警寧澤蛉艾,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站衷敌,受9級特大地震影響勿侯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜缴罗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一助琐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧面氓,春花似錦兵钮、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至呻拌,卻和暖如春葱轩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背藐握。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工靴拱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人猾普。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓袜炕,卻偏偏與公主長得像,于是被迫代替她去往敵國和親抬闷。 傳聞我的和親對象是個殘疾皇子妇蛀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

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