微信小程序提供了一套在微信上運行小程序的解決方案,有比較完整的框架、組件以及 API,在這個平臺上面的想象空間很大。
小相冊是結(jié)合騰訊云對象存儲服務(Cloud Object Service,簡稱COS)制作的一個微信小程序示例。在代碼結(jié)構(gòu)上包含如下兩部分:
applet
: 小相冊應用包代碼,可直接在微信開發(fā)者工具中作為項目打開server
: 搭建的 Node 服務端代碼,作為服務器和applet
通信,提供 CGI 接口示例用于拉取 COS 圖片資源、上傳圖片到 COS、刪除 COS 圖片等。小相冊主要功能如下:
拿到了本小程序源碼的朋友可以嘗試自己運行起來。
在微信小程序中,所有的網(wǎng)絡請求受到嚴格限制,不滿足條件的域名和協(xié)議無法請求,具體包括:
域名注冊好之后,可以登錄微信公眾平臺配置通信域名了。
小相冊的服務器運行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像,大家可以直接使用。
鏡像已包含所有小程序的服務器環(huán)境與代碼,需要體驗其它小程序的朋友無需重復部署
鏡像中已經(jīng)部署了 nginx,需要在 /etc/nginx/conf.d
下修改配置中的域名、證書、私鑰。
配置完成后,即可啟動 nginx。
nginx
我們還需要添加域名記錄解析到我們的云服務器上,這樣才可以使用域名進行 HTTPS 服務。
在騰訊云注冊的域名,可以直接使用云解析控制臺來添加主機記錄,直接選擇上面購買的 CVM。
解析生效后,我們在瀏覽器使用域名就可以進行 HTTPS 訪問。
小相冊示例的圖片資源是存儲在 COS 上的,要使用 COS 服務,需要登錄 COS 管理控制臺,然后在其中完成以下操作:
APP ID
SecretID
和SecretKey
(用于調(diào)用 COS API)在鏡像中,小相冊示例的 Node 服務代碼已部署在目錄/data/release/qcloud-applet-album
下:
進入該目錄:
cd /data/release/qcloud-applet-album
在該目錄下有個名為config.js
的配置文件(如下所示),按注釋修改對應的 COS 配置:
module.exports = { // Node 監(jiān)聽的端口號 port: '9993', ROUTE_BASE_PATH: '/applet', cosAppId: '填寫開通 COS 時分配的 APP ID', cosSecretId: '填寫密鑰 SecretID', cosSecretKey: '填寫密鑰 SecretKey', cosFileBucket: '填寫創(chuàng)建的公有讀私有寫的bucket名稱',};
小相冊示例使用pm2
管理 Node 進程,執(zhí)行以下命令啟動 node 服務:
pm2 start process.json
進入微信公眾平臺管理后臺設置服務器配置,配置類似如下設置:
注意:需要將 www.qcloud.la
設置為上面申請的域名,將 downloadFile 合法域名設置為在 COS 管理控制臺中自己創(chuàng)建的 bucket 的相應 CDN 加速訪問地址,如下圖所示:
在微信開發(fā)者工具將小相冊應用包源碼添加為項目,并把源文件config.js
中的通訊域名修改成上面申請的域名。
然后點擊調(diào)試即可打開小相冊Demo開始體驗。
這里有個問題。截止目前為止,微信小程序提供的上傳和下載 API 無法在調(diào)試工具中正常工作,需要用手機微信掃碼預覽體驗。
上傳圖片使用了微信小程序提供的wx.chooseImage(OBJECT)
獲取需要上傳的文件路徑,然后調(diào)用上傳文件接口wx.request(OBJECT)
發(fā)送 HTTPS POST 請求到自己指定的后臺服務器。和傳統(tǒng)表單文件上傳一樣,請求頭Content-Type
也是multipart/form-data
。后臺服務器收到請求后,使用 npm 模塊 multiparty 解析 multipart/form-data
請求,將解析后的數(shù)據(jù)保存為指定目錄下的臨時文件。拿到臨時文件的路徑后,就可直接調(diào)用 COS SDK 提供的文件上傳 API 進行圖片存儲,最后得到圖片的存儲路徑及訪問地址(存儲的圖片路徑也可以直接在 COS 管理控制臺看到)。
調(diào)用列舉目錄下文件&目錄 API可以獲取到在 COS 服務端指定 bucket 和該 bucket 指定路徑下存儲的圖片。
指定圖片的訪問地址,然后調(diào)用微信小程序提供的wx.downloadFile(OBJECT)
和wx.saveFile(OBJECT)
接口可以直接將圖片下載和保存本地。這里要注意圖片訪問地址的域名需要和服務器配置的 dowmloadFile 合法域名一致,否則無法下載。
刪除圖片也十分簡單,直接調(diào)用文件刪除 API 就可以將存儲在 COS 服務端的圖片刪除。