手把手教你搭建Windows環境微信小程序的本地測試服務器

Mac環境下

• 手把手教你搭建Mac環境微信小程序的本地測試服務器

問題的提出

• Windows環境
• 方便快捷地搭建小程序的測試服務器
• 小程序對於網絡請求的URL的特殊要求
  • 不能出現端口號
  • 不能用localhost
  • 必須用https

主要步驟

• 用json-server搭建簡單地服務器，搭建出來的服務器地址爲localhonst:3000
• 安裝nginx進行反向代理，以便隱藏端口號和替換localhost
• 搭建https服務
• 微信小程序設置

用到的工具

• json-server
• nginx
• openssl
• 微信小程序官方開發工具

首先須要在windows環境下安裝node.js

Node.js下載地址

選擇 Windows Installer 下載對應的系統版本就行，而後一路next。這種方式安裝好之後會把環境變量也配置好了，直接在命令行下輸入：

//出現對應的版本號信息就表示安裝成功了
node --version
複製代碼

json-server的使用

• 安裝

npm install -g json-server
複製代碼

• 選一個文件目錄新建json文件，好比cars.json

{
  "cars": [
    {
      "id": 1,
      "desc": "哈弗H6",
      "completed": false
    },
    {
      "id": 2,
      "desc": "吉利博越",
      "completed": false
    },
    {
      "id": 3,
      "desc": "寶駿560",
      "completed": false
    }
  ]
}
複製代碼

• 啓動json-server服務：在新建的json文件目錄，運行命令：json-server + 文件名

json-server cars.json
複製代碼

輸出：

Loading cars.json
Done

Resources
http://localhost:3000/cars

Home
http://localhost:3000
複製代碼

• 瀏覽器中輸入地址http://localhost:3000/cars就能看到輸出cars.json的內容
• 至此，就搭建了一個簡單的本地測試服務器，json-server支持get,post等，基本足夠開發測試用了，具體的能夠參考json-server官網
• 爲了將localhost:3000/todos這樣的接口改爲www.test.com/todos這樣的形式，就須要用nginx進行反向代理

用nginx進行反向代理

• nginx下載地址

• nginx安裝更簡單，從上述地址下載好之後直接解壓到本身的目錄就好了

• 到nginx的解壓目錄，找到nginx.exe文件，雙擊就啓動了。固然也能夠用命令行，後面會有常見的命令介紹

• 瀏覽器中鍵入http://localhost:8080,訪問到nginx的歡迎界面，即表示nginx安裝成功

• 配置nginx的反向代理:編輯nginx.conf文件。這個文件就在nginx.exe所在的目錄中的conf文件夾

• 修改nginx.conf文件中的server{}內容。這裏要注意的是，conf文件裏面主要有2個server{},一個是默認監聽http請求的8080端口的，另外一個是https請求的。其中https server默認是註釋掉的

server {
   listen       80;//將原來的8080改爲80端口，這樣就能隱藏請求中的端口號了
   server_name  www.test.com;//這裏改爲你想要的測試域名
   location / {
        proxy_pass http://127.0.0.1:3000/;//須要代理的地址，這裏是咱們json-server的默認地址
    }
    ...
}
複製代碼

• 重啓nginx服務

• 不要忘記將你的測試域名加入到hosts文件中啊！！！

//hosts文件中添加測試域名
127.0.0.1 www.test.com
複製代碼

• 通過以上的設置，nginx代理的設置的完成了。啓動json-server後能夠用一下方式訪問瀏覽器

localhost/cars
localhost
www.test.com
www.test.com/cars
複製代碼

其餘問題

nginx經常使用的命令(須要在nignx.exe所在目錄下，固然也能夠添加到環境變量裏面去)

• 啓動

nginx.exe
或者
start nginx
或者
雙擊nginx.exe

複製代碼

• 中止

nginx.exe -s stop
或者
nginx.exe -s quit
複製代碼

• 重啓

nginx.exe -s reload
複製代碼

windows修改hosts

• hosts文件目錄在：C:\Windows\system32\drivers\etc
• 修改hosts文件須要先拷貝一份hosts文件到非系統盤的目錄，好比桌面，而後再修改桌面的hosts文件，最後再把修改的hosts文件拷貝到系統hosts文件的目錄，彈出警告後選擇確認替換

https服務安裝

利用openssl生成證書

• openssl工具下載地址：http://slproweb.com/products/Win32OpenSSL.html

• 下載之後一直next安裝，命令行輸入：openssl不報錯的就安裝成功了，安裝過程當中已經將openssl加入到環境變量中了

生成ssl密鑰

• 設置server.key。過程當中須要輸入key的密碼，這個密碼要記住，後面生成私鑰會用到

openssl genrsa -des3 -out server.key 1024
複製代碼

• 參數設置。這個過程當中會讓咱們輸入一些信息，好比國家、地區、組織等，直接輸入「.」不設置，可是不要一個都不設置，不然會沒法生成server.csr文件

openssl req -new -key server.key -out server.csr
複製代碼

• 寫RSA祕鑰，密碼就是server.key的密碼

openssl rsa -in server.key -out server_nopwd.key
複製代碼

• 獲取私鑰

openssl x509 -req -days 365 -in server.csr -signkey server_nopwd.key -out server.crt
複製代碼

修改nginx配置文件nginx.conf

server {
   listen       80;//將原來的8080改爲80端口，這樣就能隱藏請求中的端口號了
   server_name  www.test.com;//這裏改爲你想要的測試域名
   
   //主要是增長下面三行
   ssl on;
   ssl_certificate D:\MyWorkSpace\json-server\server.crt;//你的證書地址
   ssl_certificate_key D:\MyWorkSpace\json-server\server_nopwd.key;//私鑰地址
   
   location / {
        proxy_pass http://127.0.0.1:3000/;//須要代理的地址，這裏是咱們json-server的默認地址
    }
}
複製代碼

• 以上配置之後，用http://www.test.com/cars訪問瀏覽器會出現400 bad request的問題,用https://www.test.com/cars又會出現net::ERR_CONNECTION_REFUSED
• 繼續修改nginx.conf,主要是修改https server{}模塊，主要修改點：
  • 將https server{}模塊註釋去掉
  • 添加ssl相關配置
  • 添加代理設置

# HTTPS server
#
server {
    listen       443 ssl;
    server_name  localhost;

    ssl_certificate D:\MyWorkSpace\json-server\server.crt;//你的證書地址
    ssl_certificate_key D:\MyWorkSpace\json-server\server_nopwd.key;//私鑰地址

    location / {
        proxy_pass http://127.0.0.1:3000/;
                root   html;
          # index index.html index.htm;
    }
}

複製代碼

• 至此，https服務配置完成，能夠在瀏覽器中用https://www.test.com/cars訪問

其餘問題

• Chrome中總是訪問的不是安全的連接

須要將咱們前面生成的證書crt文件添加到系統證書裏面，並設置爲一直信任
複製代碼

• 啓動nginx報錯

nginx: [emerg] bind() to 0.0.0.0:443 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
複製代碼

後面查出緣由是443端口被VMware佔用了，直接卸載了VMware就能夠了。

微信小程序配置

• 登錄微信小程序管理頁面，設置-->開發設置-->服務器域名-->添加本身的測試域名。須要注意的是一個月只能修改5次
• 利用微信小程序打開項目，在配置信息中點擊刷新，便可看到剛剛修改的域名
• 在須要網絡請求的地方添加log打印，以便查看返回的結果信息

wx.request({
  url: 'https://www.test.com/cars',
  method:'GET',
  header: {
    'content-type': 'application/json'     
  },
  success: function (res) {
    console.log(res.data)
  }
})
showRequestInfo()
複製代碼

• 若是一切正常的話，在調試界面的conole下會輸出json-server服務器返回的objects列表，也就是咱們編寫的cars.json文件的內容

其餘問題

• 網絡請求服務器API的時候報此服務器的證書無效.

在項目頁面的基礎信息中，勾選下面的「開發環境不校驗請求域名以及TLS版本
複製代碼

---

以上就是windows下搭建小程序服務器的過程

---

今天你進步了嘛？歡迎關注個人微信公衆號，和我一塊兒天天進步一點點！