做微信公眾號開發(fā)审姓,用到了微信js-sdk的幾個方法,比如手機相機拍攝照片,上傳照片uploadImage等接口蔬捷。這里微信js-sdk的配置就不多說了,按照微信的開發(fā)文檔和微信的demo就能擼明白了(注意一些變量的緩存价捧,有調(diào)用次數(shù)限制)。公眾號中js的安全調(diào)用域名設(shè)置不需要http,比如example.com涡戳。按照微信公眾號說明修改结蟋,僅支持80和443端口,可以加入多個域名渔彰,如果你們的測試環(huán)境也是域名的話嵌屎,那么開發(fā)調(diào)試就直接可以在測試環(huán)境的域名調(diào)試了。
下面的mac本地調(diào)試方法恍涂,針對沒有測試環(huán)境域名的宝惰,只想在mac本地環(huán)境localhost調(diào)試tomcat服務(wù)下,頁面調(diào)用微信js-sdk的方法是否正確再沧。默認你們的后臺wx.config中需要的參數(shù)都獲得了尼夺。
在實現(xiàn)調(diào)用簽名算法的時候url傳入值需要傳入當前頁面,
varcurrentUrl =window.location.href.split('#')[0];//去掉#后面的炒瘸,包含#
如果url傳入不正確淤堵,會報invalid signature。下載微信web調(diào)試工具顷扩,直接在web調(diào)試工具打開你本地的調(diào)試的url,比如 http://localhost:8080/h5instSystem/#/index拐邪,在js-sdk會報相應(yīng)的錯誤,如果后臺wx.config配置的信息都正確了隘截,會報invalid url domain扎阶。這個錯就說明你調(diào)用js的域名不正確,沒有和你公眾號綁定婶芭,本來我們就沒有在js安全調(diào)用下面的域名設(shè)置localhost本地環(huán)境乘陪,所以報這個錯,你離正確調(diào)通已經(jīng)很近了雕擂。
下面就需要將本地的localhost:8080變成你在公眾號下設(shè)置的域名:比如example.com。修改mac host文件
sudo vi /etc/hosts
文件中127.0.0.1 后面的localhost修改為example.com贱勃。(example.com就是你綁定的域名)井赌,因為這個默認調(diào)用的是80端口,而我們的tomcat默認是8080端口贵扰,mac下tomcat是root啟動的仇穗,改成80端口會有一些問題。所以將本地80端口的訪問轉(zhuǎn)發(fā)到這個8080端口上來戚绕,這樣tomcat服務(wù)器以8080端口啟動纹坐,但我們可以通過80端口來進行訪問,參考[1]舞丛。下面的命令就是本地80端口轉(zhuǎn)發(fā)到8080端口
sudo cp /etc/pf.conf /ect/pf.conf.bak
sudo vi pf.conf
在pf.conf中rdr-anchor "com.apple/*"下面加上
rdr on lo0 inet proto tcp from any to 127.0.0.1 port 80 -> 127.0.0.1 port 8080
保存退出耘子,再執(zhí)行下面命令果漾,確保80端口沒有服務(wù)用。
sudo pfctl -d
sudo pfctl -f /etc/pf.conf
sudo pfctl -e
現(xiàn)在就完成了80端口到8080端口的轉(zhuǎn)發(fā)谷誓,現(xiàn)在我們本地mac上調(diào)用http://example.com/**,就是調(diào)用http://localhost:8080/**
啟動本地tomcat服務(wù)绒障,在微信web開發(fā)工具中,訪問域名服務(wù)捍歪,就能見到config OK的消息了户辱,現(xiàn)在你本地調(diào)試就正確了。但是有的接口糙臼,必須要手機調(diào)試才能有效果庐镐,比如拍照。
我們就需要設(shè)置一個代理变逃,讓手機的網(wǎng)絡(luò)經(jīng)過我們的mac必逆,微信開發(fā)工具我沒有設(shè)置好,我直接用了mac上的抓包工具charles韧献。確保手機和你的mac在同一個網(wǎng)絡(luò)下末患,proxy setting中設(shè)置,然后iphone中,點擊網(wǎng)絡(luò)锤窑,設(shè)置http代理璧针,手動,填寫mac ip渊啰,沒有http,比如192.168.1.245,端口8888探橱。然后charles允許就行了。
手機微信中打開域名調(diào)試绘证,就能正確使用各個接口了隧膏,本地調(diào)試,手機調(diào)試工作就成功了嚷那。其實就是本地模擬設(shè)置好的域名胞枕。
參考:
[1]http://www.cnblogs.com/fullstack-yang/p/6223896.html