微信開發本地調試

簡介

• 因爲微信瀏覽器中獲取用戶信息的回調地址必須是已經ICP備案的域名。這樣就致使沒法本地開發比較麻煩，解決方案爲內網穿透，如ngrok(二級域名每次啓動會變化)、花生殼(須要支付8元)、NATAPP(和ngrok相似，本文使用)。
• 本程序基於微信開發者工具完成調試

NATAPP使用

• 註冊NATAPP並實名認證
• 購買隧道 - 免費隧道 - Web（端口80）- 購買以後可在個人隧道中查看 - 複製authtoken
• 下載NATAPP客戶端natapp.exe
• 在客戶端根目錄cmd運行natapp -authtoken=上文提到的authtoken。命令行會出現相似Forwarding http://smalle.natappfree.cc -> 127.0.0.1:80的顯示。（表示訪問在瀏覽器中訪問http://smalle.natappfree.cc時至關於本地訪問127.0.0.1:80）
  • 或者寫入xxx.bat文件快速啓動：D:/software/natapp.exe -authtoken=12347dc3f25a1234

啓動本地web項目

本地項目是基於nginx反向代理服務器實現（apache也可）

• 下載nginx並安裝，配置nginx.conf文件，如：

  server {
      listen   80;               
      server_name localhost;   
  
      location / {
          root   C:/Users/smalle/Desktop/web;
          index  index.html index.htm;
      }

• 將web項目拷貝到配置中的root路徑

• 啓動nginx（此時可經過http://127.0.0.1或http://smalle.natappfree.cc訪問）

配置回調地址

• 微信後臺 - 公衆號設置 - 功能設置 - 網頁受權域名
• 將相似MP_verify_2DCaFsV02WRKw123.txt的文件下載到root路徑下
• 地址欄中填寫xyabcd.natappfree.cc（不須要http://）保存便可

擴展：關於先後分離

• 若是api和web項目分別部署，如web是用nginx靜態服務器，api使用PHP/Java完成。就回出現跨域問題，此處可在nginx中再次配置後臺api的轉發

  location /api/ {
      proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      if (!-f $request_filename) {
          proxy_pass http://127.0.0.1:8080;
              break;
      }
  }

  • web項目中認證請求js如：http://smalle.natappfree.cc/api/auth?code=021GT83e1ucjUu035F0e1Ttg3e1GT812就會被轉發到http://127.0.0.1:8080/api/auth?code=021GT83e1ucjUu035F0e1Ttg3e1GT812

    var url = "http://smalle.natappfree.cc/api/auth?code=" + code;
    $.get(url, function(res) {
        console.log(res);
    });

---

相關文章：服務號使用微信網頁受權（H5應用等）