• 部署和運行
  • 整體架構(gòu)
  • 1. 準備域名和證書
  • 2. 云主機和鏡像部署
  • 3. 配置 HTTPS
  • 4. 域名解析
  • 5. 開通和配置 COS
  • 6. 啟動小相冊示例 Node 服務(wù)
  • 7. 微信小程序服務(wù)器配置
  • 8. 啟動小相冊 Demo
• 主要功能實現(xiàn)
  • 上傳圖片
  • 獲取圖片列表
  • 下載和保存圖片
  • 刪除圖片

微信小程序提供了一套在微信上運行小程序的解決方案，有比較完整的框架、組件以及 API，在這個平臺上面的想象空間很大。

小相冊是結(jié)合騰訊云對象存儲服務(wù)（Cloud Object Service，簡稱COS）制作的一個微信小程序示例。在代碼結(jié)構(gòu)上包含如下兩部分：

• applet: 小相冊應(yīng)用包代碼，可直接在微信開發(fā)者工具中作為項目打開
• server: 搭建的 Node 服務(wù)端代碼，作為服務(wù)器和applet通信，提供 CGI 接口示例用于拉取 COS 圖片資源、上傳圖片到 COS、刪除 COS 圖片等。

小相冊主要功能如下：

• 列出 COS 服務(wù)器中的圖片列表
• 點擊左上角上傳圖片圖標，可以調(diào)用相機拍照或從手機相冊選擇圖片，并將選中的圖片上傳到 COS 服務(wù)器中
• 輕按任意圖片，可進入全屏圖片預覽模式，并可左右滑動切換預覽圖片
• 長按任意圖片，可將其保存到本地，或從 COS 中刪除

部署和運行

拿到了本小程序源碼的朋友可以嘗試自己運行起來。

整體架構(gòu)

1. 準備域名和證書

在微信小程序中，所有的網(wǎng)絡(luò)請求受到嚴格限制，不滿足條件的域名和協(xié)議無法請求，具體包括：

• 只允許和在 MP 中配置好的域名進行通信，如果還沒有域名，需要注冊一個。
• 網(wǎng)絡(luò)請求必須走 HTTPS 協(xié)議，所以你還需要為你的域名申請一個證書。

域名注冊好之后，可以登錄微信公眾平臺配置通信域名了。

2. 云主機和鏡像部署

小相冊的服務(wù)器運行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像，大家可以直接使用。

鏡像已包含所有小程序的服務(wù)器環(huán)境與代碼，需要體驗其它小程序的朋友無需重復部署

3. 配置 HTTPS

鏡像中已經(jīng)部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、證書、私鑰。

配置完成后，即可啟動 nginx。

nginx

4. 域名解析

我們還需要添加域名記錄解析到我們的云服務(wù)器上，這樣才可以使用域名進行 HTTPS 服務(wù)。

在騰訊云注冊的域名，可以直接使用云解析控制臺來添加主機記錄，直接選擇上面購買的 CVM。

解析生效后，我們在瀏覽器使用域名就可以進行 HTTPS 訪問。

5. 開通和配置 COS

小相冊示例的圖片資源是存儲在 COS 上的，要使用 COS 服務(wù)，需要登錄 COS 管理控制臺，然后在其中完成以下操作：

• 開通 COS 服務(wù)分配得到唯一的APP ID
• 使用密鑰管理生成一對SecretID和SecretKey（用于調(diào)用 COS API）
• 在 Bucket 列表中創(chuàng)建公有讀私有寫訪問權(quán)限、CDN加速的 bucket（存儲圖片的目標容器）

6. 啟動小相冊示例 Node 服務(wù)

在鏡像中，小相冊示例的 Node 服務(wù)代碼已部署在目錄/data/release/qcloud-applet-album下：

進入該目錄：

cd /data/release/qcloud-applet-album

在該目錄下有個名為config.js的配置文件（如下所示），按注釋修改對應(yīng)的 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 服務(wù)：

pm2 start process.json

7. 微信小程序服務(wù)器配置

進入微信公眾平臺管理后臺設(shè)置服務(wù)器配置，配置類似如下設(shè)置：

注意：需要將 www.qcloud.la 設(shè)置為上面申請的域名，將 downloadFile 合法域名設(shè)置為在 COS 管理控制臺中自己創(chuàng)建的 bucket 的相應(yīng) CDN 加速訪問地址，如下圖所示：

8. 啟動小相冊 Demo

在微信開發(fā)者工具將小相冊應(yīng)用包源碼添加為項目，并把源文件config.js中的通訊域名修改成上面申請的域名。

然后點擊調(diào)試即可打開小相冊Demo開始體驗。

這里有個問題。截止目前為止，微信小程序提供的上傳和下載 API 無法在調(diào)試工具中正常工作，需要用手機微信掃碼預覽體驗。

主要功能實現(xiàn)

上傳圖片

上傳圖片使用了微信小程序提供的wx.chooseImage(OBJECT)獲取需要上傳的文件路徑，然后調(diào)用上傳文件接口wx.request(OBJECT)發(fā)送 HTTPS POST 請求到自己指定的后臺服務(wù)器。和傳統(tǒng)表單文件上傳一樣，請求頭Content-Type也是multipart/form-data。后臺服務(wù)器收到請求后，使用 npm 模塊 multiparty 解析 multipart/form-data 請求，將解析后的數(shù)據(jù)保存為指定目錄下的臨時文件。拿到臨時文件的路徑后，就可直接調(diào)用 COS SDK 提供的文件上傳 API 進行圖片存儲，最后得到圖片的存儲路徑及訪問地址（存儲的圖片路徑也可以直接在 COS 管理控制臺看到）。

獲取圖片列表

調(diào)用列舉目錄下文件&目錄 API可以獲取到在 COS 服務(wù)端指定 bucket 和該 bucket 指定路徑下存儲的圖片。

下載和保存圖片

指定圖片的訪問地址，然后調(diào)用微信小程序提供的wx.downloadFile(OBJECT)和wx.saveFile(OBJECT)接口可以直接將圖片下載和保存本地。這里要注意圖片訪問地址的域名需要和服務(wù)器配置的 dowmloadFile 合法域名一致，否則無法下載。

刪除圖片

刪除圖片也十分簡單，直接調(diào)用文件刪除 API 就可以將存儲在 COS 服務(wù)端的圖片刪除。