本文使用node.js和express來為小程序搭建服務器。node.js簡單說是運行在服務端的javascript;而express是node.js的一個Web應用框架,使用express可以非常簡單快捷地搭建起網站。
0、背景
官方要求小程序的包最多不能超過2M,減小小程序包大小最有效的方法就是將本地圖片上傳至服務器。
本文搭建服務器,以小程序從后台獲取圖片為例,實現小程序與后台的通信。
小程序采用這篇教程mpvue從一無所有開始仿大眾點評小程序中的demo(但圖片均移動到了public/images
),
可以從這里下載項目文件
1、開發准備
要搭建小程序后台有兩種選擇
(1)購買雲服務器。詳細可見這里。
(或直接使用雲開發,雲開發是小程序在2018.9新增的功能,詳細可見這里)
(2)使用代理服務器,可實現搭建本地服務器,進行本地開發調試。
例如使用charels進行反代理,教程可見:mac版、win版
注意映射的線上域名和服務器端口要與實際設置的一致。比如這里采用的線上域名為https://wx.test.cn
,搭建的服務器端口為localhost:3000

2、安裝Express
按以上兩種方法搭建好服務器后,在服務器上安裝好Node.js,打開命令行:
npm install -g express@3
npm install express-generator --save -g
選擇一個工作目錄,打開命令行運行:
mkdir server
cd server
express -e
npm install
安裝完成后輸入:
npm start
此時便用Express搭建了一個服務器並監聽端口3000。可以用瀏覽器打開localhost:3000或https://wx.test.cn/進行訪問。
3、路由控制
初始化項目后,一般工程結構如下
server
├── node_modules
├── public
├── routes
├── view
├── app.js
└── package.json
我們這里只要關心app.js
和public
,
app.js
是工程的入口文件,待會我們在這里編寫路由控制;public
是存放各種資源的文件夾,這里可以保存image、css、javascript等文件
(1)首先我們將從這里下載項目文件中的public文件夾,與原public文件夾合並;
(2)然后打開app.js
,在app.use('/users', usersRouter);
后添加
app.get('/public/images/*', function (req, res) {
res.sendfile( __dirname + "/" + req.url );
console.log("Request for " + req.url + " received.");
})
這段命令的意思是當客戶端用get命令請求/public/images/下的資源時,服務器將對應的圖片資源傳送過去。
(3)中斷原先的進程,再次運行:
npm start
我們可以在瀏覽器上打開網址https://wx.test.cn/public/images/my/user.png
,測試是否可以請求到圖片。

將小程序中原先指向本地圖片的鏈接均改為指向服務器的圖片。
此時使用微信開發者工具再次打開小程序,即可看到完整的頁面。同時也可以進行預覽發布