微信小程序-相冊

1、無內(nèi)測邀請，1個小時快速搭建微信小程序選擇哪個小程序Demo？在知名同性交友網(wǎng)站 Github 上，小程序的 Demo 不少，但是大多只是簡單的 API 演示，有的甚至直接把頁面數(shù)據(jù)寫在了 json 文件里（分明有網(wǎng)絡(luò)請求 API）。我想體驗的是能夠?qū)⒎?wù)端和小程序端無縫連接起來（體驗夠爽）的項目。最終，我選擇了騰訊云官方推出的小相冊項目。小相冊主要實現(xiàn)了以下功能：· 列出對象存儲 COS 中的圖片列表。· 點擊左上角上傳圖片圖標(biāo)，可以調(diào)用相機拍照或從手機相冊選擇圖片，并將選中的圖片上傳到 對象存儲 COS 中。· 輕按任意圖片，可進入全屏圖片預(yù)覽模式，并可左右滑

2、動切換預(yù)覽圖片。· 長按任意圖片，可將其保存到本地，或從 對象存儲 COS 中刪除。效果演示圖（受開發(fā)工具的限制，部分功能尚未實現(xiàn)）對象存儲服務(wù)（Cloud Object Service）是騰訊云推出的面向企業(yè)和個人開發(fā)者提供的高可用，高穩(wěn)定，強安全的云端存儲服務(wù)。可以將任意數(shù)量和形式的非結(jié)構(gòu)化數(shù)據(jù)放入COS，并在其中實現(xiàn)數(shù)據(jù)的管理和處理。之所以選擇騰訊云的 Demo，一是因為它是騰訊自家推出的，項目的質(zhì)量有保障；二是因為它是少有的既講小程序開發(fā)，又介紹云端部署的項目。稍微有點經(jīng)驗的程序員都知道，架構(gòu)要動靜分離，靜態(tài)文件最好不要放在自己的服務(wù)器上，要放在專門用來存儲的對象存儲服務(wù)器C

3、OS上，并且用CDN 加速。小相冊后端采用的是 Node.js，Nginx作為反向代理。第一步：搭開發(fā)環(huán)境首先，我們需要在本地搭建好微信小程序的開發(fā)環(huán)境。即下載開發(fā)者工具。微信官方已經(jīng)推出了正式版 IDE，大家沒有必要再去下載破解版了。打開官網(wǎng)下載頁面，根據(jù)自己的操作系統(tǒng)選擇。我使用的是 Mac 版。安裝好之后打開運行，會要求微信掃碼登陸。之后，就可以看到創(chuàng)建項目的頁面了。選擇添加項目，沒有 AppID 就選無（如果亂寫會報錯，到時可能無法進入項目）。如果你選擇的項目目錄為空，請如圖所示勾選在“當(dāng)前目錄中創(chuàng)建quick start項目”。點擊“添加項目”之后，我們會進入開發(fā)工具的調(diào)試頁面。第二

4、步：下載小相冊源碼接下來，我們下載小相冊的源碼?？梢赃x擇直接從騰訊云官網(wǎng)提供的鏈接下載，也可以從騰訊云團隊的 Github 倉庫拉取。我推薦從 Github 倉庫拉取，這樣可以及時獲取最新的代碼。git clone 最終，我們會得到類似這樣的文件目錄。簡單解釋下目錄結(jié)構(gòu)：· applet（或app）: 小相冊應(yīng)用包代碼，可直接在微信開發(fā)者工具中作為項目打開。· server: 搭建的Node服務(wù)端代碼，作為服務(wù)器和app通信，提供 CGI 接口示例，用于拉取圖片資源、上傳圖片、刪除圖片。· assets：小相冊的演示截圖。源碼下載完成之后，我們打開微信 web 開

5、發(fā)者工具，新建項目小相冊，選擇目錄applet（或app）。小相冊源碼分析在進行部署之前，我們來簡單分析一下小相冊的具體代碼。畢竟只看效果不是我們的目的，我們的目的是以小相冊為例，了解如何開發(fā)小程序并與服務(wù)端進行交互。小相冊包含一個描述整體程序的 app 和多個描述各自頁面的 page。主程序 app 主要由三個文件組成，分別是 app.js（小程序邏輯）、app.json（小程序公共設(shè)置）和 app.wxss（小程序公共樣式表），其中前兩個為必備文件。config.js 文件中包含了一些部署域名的設(shè)置，現(xiàn)在不用管。在 pages 目錄下，有兩個 page 頁面，分別是 index 和 alb

6、um。頁面結(jié)構(gòu)算是比較簡單的，其中 index 是小程序啟動時默認(rèn)進入的頁面。每個頁面下，至少要有 .js（頁面邏輯）和 .wxml（頁面結(jié)構(gòu)）兩個文件，.wxss（頁面樣式表）和 .json（頁面配置）文件為選填。你可能注意到了，這些文件的文件名與父目錄的名稱相同。這是微信官方的規(guī)定，目的是減少配置項，方便開發(fā)者。接下來我們以 index 頁面為例做簡單的解釋。index.wxml 是這個頁面的表現(xiàn)層文件，其中的代碼非常簡單，可以分為上下兩大部分。<view> <view class="page-top"> <text class="

7、;username">恭喜你</text> <text class="text-info">成功地搭建了一個微信小程序</text> <view class="page-btn-wrap"> <button class="page-btn" bindtap="gotoAlbum">進入相冊</button> </view> </view> <view class="page-bottom&

8、quot;> <text class="qr-txt">分享二維碼邀請好友結(jié)伴一起寫小程序！</text> <image src="././images/qr.png" class="qr-img"></image> <image src="././images/logo.png" class="page-logo"></image> </view></view>頁面的演示效果如下：我們看到，頁

9、面上有一個“進入相冊”的按鈕。正常理解，點擊后該按鈕后我們就可以進入相冊了（這不廢話嘛）。那小程序背后是怎樣實現(xiàn)該操作的呢？在 index.wxml 中，我們發(fā)現(xiàn)對應(yīng)的 button 標(biāo)簽上定義了一個 bindtap 屬性，綁定了一個叫做gotoAlbum 的方法。而這個方法可以在 index.js 文件中找到。事實上，文件中也只定義了這一個方法，執(zhí)行的具體動作就是跳轉(zhuǎn)到 album 頁面。Page( / 前往相冊頁 gotoAlbum() wx.navigateTo( url: './album/album' ); ,);album.js 頁面中編寫了程序的主要邏輯，包括選擇

10、或拍攝圖片、圖片預(yù)覽、圖片下載和圖片刪除；album.wxml 中三種視圖容器 view、scroll-view、swiper均有使用，還提供了消息提示框 toast。具體方法和視圖的實現(xiàn)請查看項目源碼。所有的這些功能都寫在 Page 類中。lib 目錄下提供了小程序會用的一些輔助函數(shù)，包括異步訪問和對象存儲 COS 的 API?？偟膩碚f，和微信官方宣傳的一樣，在開發(fā)者工具下進行小程序的開發(fā)，效率確實提高了很多，而且有很多微信提高的組件和 API。所以，在開發(fā)速度這點上的體驗還是非常爽的。另外，由于小相冊需要使用諸多云端能力，如圖片的上傳和下載，我們還需要進行服務(wù)器端的部署和設(shè)置。具體請看接下

11、來的步驟。第三步：云端部署 server 代碼雖然服務(wù)端的開發(fā)不是本文的重點，但是為了全面地體驗小相冊的整個開發(fā)部署流程，我們還是有必要了解服務(wù)端的部署，這里我們使用的是騰訊云。如果你想更爽一點，那么可以選擇騰訊云官方提供的小程序云端鏡像。小相冊的服務(wù)器運行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像，可以直接使用?？芍^是一鍵部署好云端。如果你以前沒有使用過騰訊云，可以選擇免費試用（我已經(jīng)領(lǐng)取了 8 天的個人版服務(wù)器），或者領(lǐng)取禮包以優(yōu)惠的價格購買所需的服務(wù)。你也可以選擇將小相冊源碼中的server文件夾上傳到自己的服務(wù)器。第四步：準(zhǔn)備域名和配置證書如果你已經(jīng)有騰訊云的服務(wù)器和域名，并配置好了 h

12、ttps，那么可以跳過第 4-6 步。在微信小程序中，所有的網(wǎng)絡(luò)請求受到嚴(yán)格限制，不滿足條件的域名和協(xié)議無法請求。簡單來說，就是你的域名必須走 https 協(xié)議。所以你還需要為你的域名申請一個證書。如果沒有域名，請先注冊一個。由于我們沒有收到內(nèi)測，也就暫時不用登錄微信公眾平臺配置通信域名了。第五步：Nginx 配置 https微信小程序云端示例鏡像中，已經(jīng)部署好了 Nginx，但是還需要在 /etc/nginx/conf.d 下修改配置中的域名、證書、私鑰。請將紅框部分換成自己的域名和證書，并且將 proxy_pass 設(shè)置為 Node.js 監(jiān)聽的端口，我的是 9993。配置完成后，重新加載

13、配置文件并且重啟 Nginx。sudo service nginx reloadsudo service nginx restart第六步：域名解析我們還需要添加域名記錄，將域名解析到我們的云服務(wù)器上，這樣才可以使用域名進行 https 服務(wù)。在騰訊云注冊的域名，可以直接使用云解析控制臺來添加主機記錄，直接選擇上面購買的 CVM。解析生效后，我們的域名就支持 https 訪問了。第七步：開通和配置 COS由于我們希望實現(xiàn)動靜分離的架構(gòu)，所以選擇把小相冊的圖片資源是存儲在 COS 上的。要使用 COS 服務(wù)，需要登錄 COS 管理控制臺，然后在其中完成以下操作。1. 點擊創(chuàng)建 Bucket。會要

14、求選擇所屬項目，填寫相應(yīng)名稱。這里，我們只需要填上自己喜歡的 Bucket 名稱即可。2. 然后在 Bucket 列表中，點擊剛剛創(chuàng)建的 Bucket。然后在新頁面點擊“獲取API密鑰”。 彈出的頁面中包括了我們所需要的三個信息：唯一的 APP ID，一對SecretID和SecretKey（用于調(diào)用 COS API）。保管好這些信息，我們在稍后會用到。3. 最后，在新的 Bucket 容器中創(chuàng)建文件夾，命名為photos。這點后面我們也會提到。第八步：啟動小相冊的服務(wù)端在官方提供的鏡像中，小相冊示例的 Node 服務(wù)代碼已部署在目錄 /data/release/qcloud-applet-a

15、lbum下。進入該目錄，如果是你自己的服務(wù)器，請進入相應(yīng)的文件夾。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名稱',;另外，cd ./routes/album/handlers，修改 list.js，將 const listPath 的值修改為你的Bucket 下的圖片存儲路徑。如果是根目錄，則修改為 '/'。當(dāng)前服務(wù)端的代碼中將該值設(shè)置為了 '/photos' ，如果你在第七步中沒有創(chuàng)建