微信小程序示相冊例利用騰訊雲僅限開發案例一

場景一:文件上傳下載

微信小程序框架提供了文件上傳下載的接口,用於將本地資源上傳到指定的服務器,或者將指定Url的資源下載到本地,但微信小程序框架只提供了客戶端的解決方案,缺少服務端的對應實現,需要小程序開發者從零開始構建自己的上傳下載存儲服務器,騰訊雲作爲專業的雲服務提供商,利用自身雲端海量極速穩定的基礎服務提供了文件上傳下載存儲的配套雲端解決方案,幫助開發者降低開發小程序的複雜度,使得開發者可以更加專注於業務的開發,更加高效。


正題來了:

小相冊是結合騰訊雲對象存儲服務(Cloud Object Service,簡稱COS)製作的一個微信小程序示例。在代碼結構上包含如下兩部分:

  • applet: 小相冊應用包代碼,可直接在微信開發者工具中作爲項目打開
  • server: 搭建的 Node 服務端代碼,作爲服務器和applet通信,提供 CGI 接口示例用於拉取 COS 圖片資源、上傳圖片到 COS、刪除 COS 圖片等。

小相冊主要功能如下:

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


整個服務的架構:



1. 準備域名和證書

在微信小程序中,所有的網絡請求受到嚴格限制,不滿足條件的域名和協議無法請求,具體包括:

  • 只允許和在 MP 中配置好的域名進行通信,如果還沒有域名,需要域名。
  • 網絡請求必須走 HTTPS 協議,所以你還需要爲你的域名免費域名證書。

域名註冊好之後,可以微信公衆平臺配置通信域名了。


2. 雲主機和鏡像部署

小相冊的服務器運行代碼和配置已經打包成騰訊雲 CVM 鏡像,大家可以直接使用

體驗騰訊雲小程序解決方案。


鏡像已包含「剪刀石頭布」和「小相冊」兩個小程序的服務器環境與代碼,需要體驗兩個小程序的朋友無需重複部署

3. 配置 HTTPS

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


配置完成後,即可啓動 nginx。

nginx

4. 域名解析

我們還需要添加域名記錄解析到我們的雲服務器上,這樣纔可以使用域名進行 HTTPS 服務。

在騰訊雲註冊的域名,可以直接使用 域名解析,直接選擇上面購買的 CVM。


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


5. 開通和配置 COS

小相冊示例的圖片資源是存儲在 COS 上的,要使用 COS 服務,需要登錄 COS 管理控制檯,然後在其中完成以下操作:

  • 開通 COS 服務分配得到唯一的APP ID
  • 使用密鑰管理生成一對SecretIDSecretKey(用於調用 COS API)
  • 在 Bucket 列表中創建公有讀私有寫訪問權限、CDN加速的 bucket(存儲圖片的目標容器)

6. 啓動小相冊示例 Node 服務

在鏡像中,小相冊示例的 Node 服務代碼已部署在目錄/data/release/qcloud-applet-album下:

進入該目錄:

cd /data/release/qcloud-applet-album

在該目錄下有個名爲config.js的配置文件(如下所示),按註釋修改對應的 COS 配置:

module.exports = {
    // Node 監聽的端口號
    port: '9993',
    ROUTE_BASE_PATH: '/applet',

    cosAppId: '填寫開通 COS 時分配的 APP ID',
    cosSecretId: '填寫密鑰 SecretID',
    cosSecretKey: '填寫密鑰 SecretKey',
    cosFileBucket: '填寫創建的公有讀私有寫的bucket名稱',
};

小相冊示例使用pm2管理 Node 進程,執行以下命令啓動 node 服務:

pm2 start process.json

7. 微信小程序服務器配置

進入微信公衆平臺管理後臺設置服務器配置,配置類似如下設置:


注意:需要將 www.qcloud.la 設置爲上面申請的域名,將 downloadFile 合法域名設置爲在 COS 管理控制檯中自己創建的 bucket 的相應 CDN 加速訪問地址,如下圖所示:


8. 啓動小相冊 Demo

在微信開發者工具將小相冊應用包源碼添加爲項目,並把源文件config.js中的通訊域名修改成上面申請的域名。


然後點擊調試即可打開小相冊Demo開始體驗。


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

主要功能實現

上傳圖片

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

獲取圖片列表

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

下載和保存圖片

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

刪除圖片

刪除圖片也十分簡單,直接調用API以將存儲在 COS 服務端的圖片刪除。




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章