值得讀一讀，把各個(gè)點(diǎn)研究明白。

正文——

源碼下載：https://github.com/CFETeam/weapp-demo-album

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

• app: 小相冊(cè)應(yīng)用包代碼，可直接在微信開(kāi)發(fā)者工具中作為項(xiàng)目打開(kāi)
• server: 搭建的Node服務(wù)端代碼，作為服務(wù)器和app通信，提供 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)

準(zhǔn)備域名和證書(shū)

（如果只是為了學(xué)習(xí)，在小程序項(xiàng)目屬性中設(shè)置不校驗(yàn)域名，可以跳過(guò)這一步）

在微信小程序中，所有的網(wǎng)路請(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è) SSL 證書(shū)。

騰訊云提供域名注冊(cè)和證書(shū)申請(qǐng)服務(wù)，還沒(méi)有域名或者證書(shū)的可以去使用

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

Nginx 和 Node 代碼部署

（作者安裝nginx，是為了映射域名，如果在本機(jī)調(diào)試學(xué)習(xí)，可以不安裝nginx，直接使用127.0.0.1這個(gè)本機(jī)地址即可）

小相冊(cè)服務(wù)要運(yùn)行，需要進(jìn)行以下幾步：

• 部署 Nginx，Nginx 的安裝和部署請(qǐng)大家自行搜索（注意需要把 SSL 模塊也編譯進(jìn)去）
• 配置 Nginx 反向代理到 http://127.0.0.1:9993
• Node 運(yùn)行環(huán)境，可以安裝 Node V6.6.0
• 部署 server 目錄的代碼到服務(wù)器上，如 /data/release/qcloud-applet-album
• 使用 npm install 安裝依賴模塊
• 使用 npm install pm2 -g 安裝 pm2

上述環(huán)境配置比較麻煩，剪刀石頭布的服務(wù)器運(yùn)行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像，推薦大家直接使用。

• 鏡像部署完成之后，云主機(jī)上就有運(yùn)行 WebSocket 服務(wù)的基本環(huán)境、代碼和配置了。
• 騰訊云用戶可以免費(fèi)領(lǐng)取禮包，體驗(yàn)騰訊云小程序解決方案。
• 鏡像已包含「剪刀石頭布」和「小相冊(cè)」兩個(gè)小程序的服務(wù)器環(huán)境與代碼，需要體驗(yàn)兩個(gè)小程序的朋友無(wú)需重復(fù)部署

配置 HTTPS

（這一步也可以省去）

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

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

nginx

域名解析

（這一步也可以省去）

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

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

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

開(kāi)通和配置 COS

（這一步是必須的，幾乎以后部署到線上，也是需要學(xué)習(xí)的。與cos類似的圖片存儲(chǔ)服務(wù)，還有七牛云存儲(chǔ)，也有免費(fèi)的開(kāi)發(fā)者試用。）

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

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

啟動(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: '填寫(xiě)開(kāi)通 COS 時(shí)分配的 APP ID',
    cosSecretId: '填寫(xiě)密鑰 SecretID',
    cosSecretKey: '填寫(xiě)密鑰 SecretKey',
    cosFileBucket: '填寫(xiě)創(chuàng)建的公有讀私有寫(xiě)的bucket名稱',
};

代碼運(yùn)行需要臨時(shí)目錄，在部署目錄下創(chuàng)建一個(gè)臨時(shí)目錄 tmp。

mkdir tmp

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

pm2 start process.json

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

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

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