頁面的演示效果如下：

我們看到，頁面上有一個“進入相冊”的按鈕。正常理解，點擊后該按鈕后我們就可以進入相冊了（這不廢話嘛）。那小程序背后是怎樣實現(xiàn)該操作的呢？

在 index.wxml 中，我們發(fā)現(xiàn)對應的 button 標簽上定義了一個 bindtap 屬性，綁定了一個叫做 gotoAlbum 的方法。而這個方法可以在 index.js 文件中找到。事實上，文件中也只定義了這一個方法，執(zhí)行的具體動作就是跳轉(zhuǎn)到 album 頁面。

Page({
    // 前往相冊頁
    gotoAlbum() {
        wx.navigateTo({ url: '../album/album' });
    },
});

album.js 頁面中編寫了程序的主要邏輯，包括選擇或拍攝圖片、圖片預覽、圖片下載和圖片刪除；album.wxml 中三種視圖容器 view、scroll-view、swiper均有使用，還提供了消息提示框 toast。具體方法和視圖的實現(xiàn)請查看項目源碼。所有的這些功能都寫在 Page 類中。

lib 目錄下提供了小程序會用的一些輔助函數(shù)，包括異步訪問和對象存儲 COS 的 API。

總的來說，和微信官方宣傳的一樣，在開發(fā)者工具下進行小程序的開發(fā)，效率確實提高了很多，而且有很多微信提高的組件和 API。所以，在開發(fā)速度這點上的體驗還是非常爽的。

另外，由于「小相冊」需要使用諸多云端能力，如圖片的上傳和下載，我們還需要進行服務器端的部署和設置。具體請看接下來的步驟。

第三步：云端部署 server 代碼

雖然服務端的開發(fā)不是本文的重點，但是為了全面地體驗「小相冊」的整個開發(fā)部署流程，我們還是有必要了解服務端的部署，這里我們使用的是騰訊云。

如果你想更爽一點，那么可以選擇騰訊云官方提供的小程序云端鏡像?！感∠鄡浴沟姆掌鬟\行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像，可以直接使用。可謂是一鍵部署好云端。

如果你以前沒有使用過騰訊云，可以選擇免費試用（我已經(jīng)領取了 8 天的個人版服務器），或者領取禮包以優(yōu)惠的價格購買所需的服務。

你也可以選擇將「小相冊」源碼中的server文件夾上傳到自己的服務器。

第四步：準備域名和配置證書

如果你已經(jīng)有騰訊云的服務器和域名，并配置好了 https，那么可以跳過第 4-6 步。

在微信小程序中，所有的網(wǎng)絡請求受到嚴格限制，不滿足條件的域名和協(xié)議無法請求。簡單來說，就是你的域名必須走 https 協(xié)議。所以你還需要為你的域名申請一個證書。如果沒有域名，請先注冊一個。由于我們沒有收到內(nèi)測，也就暫時不用登錄微信公眾平臺配置通信域名了。

第五步：Nginx 配置 https

微信小程序云端示例鏡像中，已經(jīng)部署好了 Nginx，但是還需要在 /etc/nginx/conf.d 下修改配置中的域名、證書、私鑰。

請將紅框部分換成自己的域名和證書，并且將 proxy_pass 設置為 Node.js 監(jiān)聽的端口，我的是 9993。

配置完成后，重新加載配置文件并且重啟 Nginx。

sudo service nginx reload
sudo service nginx restart

第六步：域名解析

第七步：開通和配置 COS

由于我們希望實現(xiàn)動靜分離的架構，所以選擇把「小相冊」的圖片資源是存儲在 COS 上的。要使用 COS 服務，需要登錄 COS 管理控制臺，然后在其中完成以下操作。

1. 點擊創(chuàng)建 Bucket。會要求選擇所屬項目，填寫相應名稱。這里，我們只需要填上自己喜歡的 Bucket 名稱即可。

2. 然后在 Bucket 列表中，點擊剛剛創(chuàng)建的 Bucket。然后在新頁面點擊“獲取API密鑰”。

彈出的頁面中包括了我們所需要的三個信息：唯一的 APP ID，一對SecretID和SecretKey（用于調(diào)用 COS API）。保管好這些信息，我們在稍后會用到。

最后，在新的 Bucket 容器中創(chuàng)建文件夾，命名為photos。這點后面我們也會提到。

第八步：啟動「小相冊」的服務端

在官方提供的鏡像中，小相冊示例的 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名稱',
};

另外，cd ./routes/album/handlers，修改 list.js，將 const listPath 的值修改為你的Bucket 下的圖片存儲路徑。如果是根目錄，則修改為 '/'。當前服務端的代碼中將該值設置為了 '/photos' ，如果你在第七步中沒有創(chuàng)建該目錄，則無法調(diào)試成功。

小相冊示例使用 pm2 管理 Node 進程，執(zhí)行以下命令啟動 node 服務：

pm2 start process.json

第九步：配置「小相冊」通信域名

接下來，在微信 web 開發(fā)者工具打開「小相冊」項目，并把源文件config.js中的通訊域名 host 修改成你自己申請的域名。

將藍色框內(nèi)的內(nèi)容修改為自己的域名

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

最后提示一點，截止目前為止，微信小程序提供的上傳和下載 API 無法在調(diào)試工具中正常工作，需要用手機微信掃碼預覽體驗。但是由于沒有內(nèi)測資格，我們暫時是沒辦法體驗了。

嗯，就這點不夠爽，沒有內(nèi)測邀請。