微信公眾號網頁開發——實用真機除錯

雲翳發表於2019-04-23
網頁除錯

前言

微信公眾號網頁開發的真機除錯一直是很頭疼的事情。

原因一

微信公眾號配置的JS安全域名只有三個，一個大中型的公眾號這三個JS安全域名都是生產的域名，不可能預留域名用於開發和除錯。

原因二

在微信裡面只有訪問正確的安全域名才能呼叫wx.config用來呼叫微信的介面。偵錯程式和真機有差異。

原因三

在實際的開發中我們不可能寫一部分程式碼上傳到生產的伺服器上再用真機除錯，這樣是非常麻煩的事情。

解決方案

通過微信裡面的連結訪問本地的前端服務進行真機除錯。

step1

假如我們用vue-cli3.0作為開發框架，我們需要把埠號改成80埠，則需要配置vue.config.js裡面的devServer。

  devServer: {
    port: 80, // 前端服務埠
    disableHostCheck: true,
    proxy: { // 轉發配置
      '/evcard-ams/api': {
        target: 'http://csms-st.vip:180', // 測試或者開發伺服器
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/evcard-ams/api': '/evcard-ams/api',
        },
      },
    },
  },
複製程式碼

我們在安裝好依賴包後，npm run dev的時候終端會顯示出本地ID。在終端執行IPconfig也可以獲取到。

微信公眾號網頁開發——實用真機除錯
圖片中 10.2.11.150 是本地IP地址。

step2

改變 hosts 檔案

hosts的檔案目錄 C:\Windows\System32\drivers\etc

微信公眾號網頁開發——實用真機除錯

這樣本地可以 訪問 csms.xxx.vip/you-app-name 就可以訪問前端專案了。

step3

安裝 Fiddler

微信公眾號網頁開發——實用真機除錯

微信公眾號網頁開發——實用真機除錯
如圖進行設定 將埠號設定成8888

step4

手機和電腦必須在同一個區域網下面，手動更改手機代理。

微信公眾號網頁開發——實用真機除錯
10.2.11.150 是電腦的本地IP地址， 8888 是Fiddler的埠地址。

step5

現在 手機微信裡面 訪問 csms.xxx.vip/you-app-nam… 就會訪問電腦上的前端服務，並且是熱過載。通過更改前端伺服器的轉發地址就可以變化訪問後端伺服器。 這樣就很方便除錯了。

相關文章