微信公衆號本地調試開發

前因說明

公衆號開發時因爲微信限制："用戶在網頁受權頁贊成受權給公衆號後，微信會將受權數據傳給一個回調頁面，回調頁面需在此域名下，以確保安全可靠"。以下圖所示，只有進行在網頁受權域名下的域名才能進行受權或調用其餘微信SDK的方法。但域名是打包發佈後纔會使用的，這對於調試來講極其不友好，意味着你要調試必須每次發佈代碼之後才能進行。本文就前端時時本地開發調試講一下方法。

方法介紹

我知道 兩種方法。

1. 將公衆號後臺配置的域名，本地訪問時解析到本地。
2. 配置一個redirect_uri在公用方法，這個方法要先發布上線。進行受權頁訪問時存在2個redirect_uri。第一個個redirect_uri到後臺配置的域名。在經過前面提到的公用方法個redirect_uri到本地IP.

本文主講第一種方法，步驟大綱：

• 域名解析到本地
• nginx端口轉發（可省略此步驟）

域名解析到本地

將微信後臺配置的域名（這裏我配置的是www.test.cn）在本地訪問時解析到本地。其實很簡單，修改hosts文件（不會的參考這裏）便可，如圖所示：

這時咱們能夠測試一下是否有效，訪問www.test.cn:8080等價於訪問127.0.0.1:8080。有效在進行下一步。

端口轉發

前面提到可省略此步驟，此時進行調試訪問www.test.cn:8080，即hosts文件中配置的域名加本地開發端口便可。

作端口轉發則在調試時就不須要端口了，訪問www.test.cn便可。經過nginx配置以下圖。由於網頁默認是80端口，經過Nginx作端口轉發到本地調試端口。

server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log logs/host.access.log main;
    
            location / {
                root   html;
                index  index.html index.htm;
                proxy_pass http://127.0.0.1:8080;
            }
    }
複製代碼

特殊注意點

若是是用到本文中的方法一即修改hosts文件來進行調試，可能會遇到一個障礙。若是你的前端域名和接口域名是同樣的話，那此時接口確定訪問報錯了，由於接口訪問也都解析訪問你本地服務了。

解決辦法： 將後臺接口域名採用IP+端口的方式訪問便可。

小結

上面提到的2個方法都很簡單。其中方法一簡單高效，但團隊開發時每一個人都要作一遍配置。方法二本文並無詳細講解，但確是一勞永逸的方法，正所謂前人裁樹後人乘涼，缺點是本地調試時會多一次跳轉。

立刻就要失業了，有成都大佬招人麼？