微信公衆號網頁開發——實用真機調試

前言

微信公衆號網頁開發的真機調試一直是很頭疼的事情。

緣由一

微信公衆號配置的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… 就會訪問電腦上的前端服務，而且是熱重載。經過更改前端服務器的轉發地址就能夠變化訪問後端服務器。 這樣就很方便調試了。