「小程序」這個(ge) 劃時代的產(chan) 品發布快一周了，互聯網技術人都在摩拳擦掌，躍躍欲試。可是小程序目前還在內(nei) 測，首批隻發放了 200 個(ge) 內(nei) 測資格（淚流滿麵）。本以為(wei) 沒有 AppID 這個(ge) 月就與(yu) 小程序無緣了，慶幸的是微信這兩(liang) 天發布了正式版開發者工具，無需內(nei) 測邀請也可以嚐鮮了。
因此也就有了我與(yu) 「小程序」的初體(ti) 驗，而我的感受隻有一個(ge) 字——爽！
在知名同性交友網站 Github 上，「小程序」的 Demo 不少，但是大多隻是簡單的 API 演示，有的甚至直接把頁麵數據寫(xie) 在了 json 文件裏（分明有網絡請求 API）。我想體(ti) 驗的是能夠將服務端和小程序端無縫連接起來（體(ti) 驗夠爽）的項目。最終，我選擇了騰訊雲(yun) 官方推出的「小相冊(ce) 」項目。
「小相冊(ce) 」主要實現了以下功能：
列出對象存儲(chu) COS 中的圖片列表。
點擊左上角上傳(chuan) 圖片圖標，可以調用相機拍照或從(cong) 手機相冊(ce) 選擇圖片，並將選中的圖片上傳(chuan) 到 對象存儲(chu) COS 中。
輕按任意圖片，可進入全屏圖片預覽模式，並可左右滑動切換預覽圖片。
長按任意圖片，可將其保存到本地，或從(cong) 對象存儲(chu) COS 中刪除。
效果演示圖（受開發工具的限製，部分功能尚未實現）
對象存儲(chu) 服務（Cloud Object Service）是騰訊雲(yun) 推出的麵向企業(ye) 和個(ge) 人開發者提供的高可用，高穩定，強安全的雲(yun) 端存儲(chu) 服務。可以將任意數量和形式的非結構化數據放入COS，並在其中實現數據的管理和處理。
之所以選擇騰訊雲(yun) 的 Demo，一是因為(wei) 它是騰訊自家推出的，項目的質量有保障；二是因為(wei) 它是少有的既講小程序開發，又介紹雲(yun) 端部署的項目。
稍微有點經驗的程序員都知道，架構要動靜分離，靜態文件最好不要放在自己的服務器上，要放在專(zhuan) 門用來存儲(chu) 的對象存儲(chu) 服務器COS上，並且用CDN 加速。「小相冊(ce) 」後端采用的是 Node.js，Nginx作為(wei) 反向代理。
首先，我們(men) 需要在本地搭建好微信「小程序」的開發環境。即下載開發者工具。微信官方已經推出了正式版 IDE，大家沒有必要再去下載破解版了。打開官網下載頁麵，根據自己的操作係統選擇。我使用的是 Mac 版。
安裝好之後打開運行，會(hui) 要求微信掃碼登陸。之後，就可以看到創建項目的頁麵了。
選擇添加項目，沒有 AppID 就選無（如果亂(luan) 寫(xie) 會(hui) 報錯，到時可能無法進入項目）。如果你選擇的項目目錄為(wei) 空，請如圖所示勾選在“當前目錄中創建quick start項目”。
點擊“添加項目”之後，我們(men) 會(hui) 進入開發工具的調試頁麵。
接下來，我們(men) 下載「小相冊(ce) 」的源碼。可以選擇直接從(cong) 騰訊雲(yun) 官網提供的鏈接下載，也可以從(cong) 騰訊雲(yun) 團隊的 Github 倉(cang) 庫拉取。我推薦從(cong) Github 倉(cang) 庫拉取，這樣可以及時獲取最新的代碼。
git clone https://github.com/CFETeam/weapp-demo-album.git
最終，我們(men) 會(hui) 得到類似這樣的文件目錄。
簡單解釋下目錄結構：
applet（或app）: 「小相冊(ce) 」應用包代碼，可直接在微信開發者工具中作為(wei) 項目打開。
server: 搭建的Node服務端代碼，作為(wei) 服務器和app通信，提供 CGI 接口示例，用於(yu) 拉取圖片資源、上傳(chuan) 圖片、刪除圖片。
assets：「小相冊(ce) 」的演示截圖。
源碼下載完成之後，我們(men) 打開微信 web 開發者工具，新建項目「小相冊(ce) 」，選擇目錄applet（或app）。
在進行部署之前，我們(men) 來簡單分析一下「小相冊(ce) 」的具體(ti) 代碼。畢竟隻看效果不是我們(men) 的目的，我們(men) 的目的是以「小相冊(ce) 」為(wei) 例，了解如何開發小程序並與(yu) 服務端進行交互。
「小相冊(ce) 」包含一個(ge) 描述整體(ti) 程序的 app 和多個(ge) 描述各自頁麵的 page。主程序 app 主要由三個(ge) 文件組成，分別是
app.js（小程序邏輯）、app.json（小程序公共設置）和app.wxss（小程序公共樣式表），其中前兩(liang) 個(ge) 為(wei) 必備文件。config.js文件中包含了一些部署域名的設置，現在不用管。在 pages 目錄下，有兩(liang) 個(ge) page 頁麵，分別是 index 和 album。頁麵結構算是比較簡單的，其中 index 是小程序啟動時默認進入的頁麵。每個(ge) 頁麵下，至少要有 .js（頁麵邏輯）和 .wxml（頁麵結構）兩(liang) 個(ge) 文件，.wxss（頁麵樣式表）和 .json（頁麵配置）文件為(wei) 選填。你可能注意到了，這些文件的文件名與(yu) 父目錄的名稱相同。這是微信官方的規定，目的是減少配置項，方便開發者。
接下來我們(men) 以 index 頁麵為(wei) 例做簡單的解釋。
index.wxml是這個(ge) 頁麵的表現層文件，其中的代碼非常簡單，可以分為(wei) 上下兩(liang) 大部分。
<view> <view class="page-top"> <text class="username">恭喜你</text> <text class="text-info">成功地搭建了一個(ge) 微信小程序</text> <view class="page-btn-wrap"> <button class="page-btn" bindtap="gotoAlbum">進入相冊(ce) </button> </view> </view> <view class="page-bottom"> <text class="qr-txt">分享二維碼邀請好友結伴一起寫(xie) 小程序！</text> <image src="../../images/qr.png" class="qr-img"></image> <image src="../../images/logo.png" class="page-logo"></image> </view> </view>
頁麵的演示效果如下：
我們(men) 看到，頁麵上有一個(ge) “進入相冊(ce) ”的按鈕。正常理解，點擊後該按鈕後我們(men) 就可以進入相冊(ce) 了（這不廢話嘛）。那小程序背後是怎樣實現該操作的呢？
在 index.wxml 中，我們(men) 發現對應的 button 標簽上定義(yi) 了一個(ge) bindtap 屬性，綁定了一個(ge) 叫做 gotoAlbum 的方法。而這個(ge) 方法可以在 index.js 文件中找到。事實上，文件中也隻定義(yi) 了這一個(ge) 方法，執行的具體(ti) 動作就是跳轉到 album 頁麵。
Page({
// 前往相冊(ce) 頁
gotoAlbum() {
wx.navigateTo({ url: '../album/album' });
},
});
album.js 頁麵中編寫(xie) 了程序的主要邏輯，包括選擇或拍攝圖片、圖片預覽、圖片下載和圖片刪除；album.wxml 中三種視圖容器 view、scroll-view、swiper均有使用，還提供了消息提示框 toast。具體(ti) 方法和視圖的實現請查看項目源碼。所有的這些功能都寫(xie) 在 Page 類中。
lib 目錄下提供了小程序會(hui) 用的一些輔助函數，包括異步訪問和對象存儲(chu) COS 的 API。
總的來說，和微信官方宣傳(chuan) 的一樣，在開發者工具下進行小程序的開發，效率確實提高了很多，而且有很多微信提高的組件和 API。所以，在開發速度這點上的體(ti) 驗還是非常爽的。
另外，由於(yu) 「小相冊(ce) 」需要使用諸多雲(yun) 端能力，如圖片的上傳(chuan) 和下載，我們(men) 還需要進行服務器端的部署和設置。具體(ti) 請看接下來的步驟。
雖然服務端的開發不是本文的重點，但是為(wei) 了全麵地體(ti) 驗「小相冊(ce) 」的整個(ge) 開發部署流程，我們(men) 還是有必要了解服務端的部署，這裏我們(men) 使用的是騰訊雲(yun) 。
如果你想更爽一點，那麽(me) 可以選擇騰訊雲(yun) 官方提供的小程序雲(yun) 端鏡像。「小相冊(ce) 」的服務器運行代碼和配置已經打包成騰訊雲(yun) CVM 鏡像，可以直接使用。可謂是一鍵部署好雲(yun) 端。
如果你以前沒有使用過騰訊雲(yun) ，可以選擇免費試用（我已經領取了 8 天的個(ge) 人版服務器），或者領取禮包以優(you) 惠的價(jia) 格購買(mai) 所需的服務。
你也可以選擇將「小相冊(ce) 」源碼中的server文件夾上傳(chuan) 到自己的服務器。
如果你已經有騰訊雲(yun) 的服務器和域名，並配置好了 https，那麽(me) 可以跳過第 4-6 步。
在微信小程序中，所有的網絡請求受到嚴(yan) 格限製，不滿足條件的域名和協議無法請求。簡單來說，就是你的域名必須走 https 協議。所以你還需要為(wei) 你的域名申請一個(ge) 證書(shu) 。如果沒有域名，請先注冊(ce) 一個(ge) 。由於(yu) 我們(men) 沒有收到內(nei) 測，也就暫時不用登錄微信公眾(zhong) 平台配置通信域名了。
微信小程序雲(yun) 端示例鏡像中，已經部署好了 Nginx，但是還需要在 /etc/nginx/conf.d 下修改配置中的域名、證書(shu) 、私鑰。
請將紅框部分換成自己的域名和證書(shu) ，並且將 proxy_pass 設置為(wei) Node.js 監聽的端口，我的是 9993。
配置完成後，重新加載配置文件並且重啟 Nginx。
sudo service nginx reload
sudo service nginx restart
我們(men) 還需要添加域名記錄，將域名解析到我們(men) 的雲(yun) 服務器上，這樣才可以使用域名進行 https 服務。在騰訊雲(yun) 注冊(ce) 的域名，可以直接使用雲(yun) 解析控製台來添加主機記錄，直接選擇上麵購買(mai) 的 CVM。
解析生效後，我們(men) 的域名就支持 https 訪問了。
由於(yu) 我們(men) 希望實現動靜分離的架構，所以選擇把「小相冊(ce) 」的圖片資源是存儲(chu) 在 COS 上的。要使用 COS 服務，需要登錄 COS 管理控製台，然後在其中完成以下操作。
點擊創建 Bucket。會(hui) 要求選擇所屬項目，填寫(xie) 相應名稱。這裏，我們(men) 隻需要填上自己喜歡的 Bucket 名稱即可。
然後在 Bucket 列表中，點擊剛剛創建的 Bucket。然後在新頁麵點擊“獲取API密鑰”。
彈出的頁麵中包括了我們(men) 所需要的三個(ge) 信息：唯一的 APP ID，一對SecretID和SecretKey（用於(yu) 調用 COS API）。保管好這些信息，我們(men) 在稍後會(hui) 用到。
最後，在新的 Bucket 容器中創建文件夾，命名為(wei) photos。這點後麵我們(men) 也會(hui) 提到。
在官方提供的鏡像中，小相冊(ce) 示例的 Node 服務代碼已部署在目錄 /data/release/qcloud-applet-album 下。進入該目錄，如果是你自己的服務器，請進入相應的文件夾。
cd /data/release/qcloud-applet-album
在該目錄下，有一個(ge) 名為(wei) config.js 的配置文件（如下所示），按注釋修改對應的 COS 配置：
module.exports = {
// Node 監聽的端口號
port: '9993',
ROUTE_BASE_PATH: '/applet', cosAppId: '填寫(xie) 開通 COS 時分配的 APP ID',
cosSecretId: '填寫(xie) 密鑰 SecretID',
cosSecretKey: '填寫(xie) 密鑰 SecretKey',
cosFileBucket: '填寫(xie) 創建的公有讀私有寫(xie) 的bucket名稱',
};
另外，cd ./routes/album/handlers，修改 list.js，將 const listPath 的值修改為(wei) 你的Bucket 下的圖片存儲(chu) 路徑。如果是根目錄，則修改為(wei) '/'。當前服務端的代碼中將該值設置為(wei) 了 '/photos' ，如果你在第七步中沒有創建該目錄，則無法調試成功。
小相冊(ce) 示例使用 pm2 管理 Node 進程，執行以下命令啟動 node 服務：
pm2 start process.json
接下來，在微信 web 開發者工具打開「小相冊(ce) 」項目，並把源文件config.js中的通訊域名 host 修改成你自己申請的域名。
將藍色框內(nei) 的內(nei) 容修改為(wei) 自己的域名
然後點擊調試，即可打開小相冊(ce) Demo開始體(ti) 驗。
最後提示一點，截止目前為(wei) 止，微信小程序提供的上傳(chuan) 和下載 API 無法在調試工具中正常工作，需要用手機微信掃碼預覽體(ti) 驗。但是由於(yu) 沒有內(nei) 測資格，我們(men) 暫時是沒辦法體(ti) 驗了。
嗯，就這點不夠爽，沒有內(nei) 測邀請。
服務項目
網站首頁
TEL：021-61554458
立即谘詢