XXXX19学生和老师,中文字幕高清视频在线不卡

首頁(yè) > 小程序資訊 > 小程序常見(jiàn)問(wèn)題

微信小程序云端解決方案教程一：文件上傳下載應(yīng)用場(chǎng)景

時(shí)間：2016-10-15 16:55:00

內(nèi)容架構(gòu)：

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

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

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

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

小相冊(cè)主要功能如下：

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

部署和運(yùn)行

拿到了本小程序源碼的朋友可以嘗試自己運(yùn)行起來(lái)。

整體架構(gòu)

1. 準(zhǔn)備域名和證書

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

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

域名注冊(cè)好之后，可以登錄微信公眾平臺(tái)配置通信域名了。

2. 云主機(jī)和鏡像部署

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

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

3. 配置 HTTPS

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

配置完成后，即可啟動(dòng) nginx。

nginx

4. 域名解析

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

在騰訊云注冊(cè)的域名，可以直接使用云解析控制臺(tái)來(lái)添加主機(jī)記錄，直接選擇上面購(gòu)買的 CVM。

解析生效后，我們?cè)跒g覽器使用域名就可以進(jìn)行 HTTPS 訪問(wèn)。

5. 開(kāi)通和配置 COS

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

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

6. 啟動(dòng)小相冊(cè)示例 Node 服務(wù)

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

進(jìn)入該目錄：

cd /data/release/qcloud-applet-album

在該目錄下有個(gè)名為config.js的配置文件（如下所示），按注釋修改對(duì)應(yīng)的 COS 配置：

module.exports = {    // Node 監(jiān)聽(tīng)的端口號(hào)    port: '9993',    ROUTE_BASE_PATH: '/applet',    cosAppId: '填寫開(kāi)通 COS 時(shí)分配的 APP ID',    cosSecretId: '填寫密鑰 SecretID',    cosSecretKey: '填寫密鑰 SecretKey',    cosFileBucket: '填寫創(chuàng)建的公有讀私有寫的bucket名稱',};

小相冊(cè)示例使用pm2管理 Node 進(jìn)程，執(zhí)行以下命令啟動(dòng) node 服務(wù)：

pm2 start process.json

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

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

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

8. 啟動(dòng)小相冊(cè) Demo

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

然后點(diǎn)擊調(diào)試即可打開(kāi)小相冊(cè)Demo開(kāi)始體驗(yàn)。

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

主要功能實(shí)現(xiàn)

上傳圖片

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

獲取圖片列表

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

下載和保存圖片

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