一個小時快速搭建微信小程序

在知名同性交友網站 Github 上，「小程序」的 Demo 很多，可是大多隻是簡單的 API 演示，有的甚至直接把頁面數據寫在了 json 文件裏（分明有網絡請求 API）。我想體驗的是可以將服務端和小程序端無縫鏈接起來（體驗夠爽）的項目。最終，我選擇了騰訊雲官方推出的「小相冊」項目。

「小相冊」主要實現瞭如下功能：

• 列出對象存儲 COS 中的圖片列表。

• 點擊左上角上傳圖片圖標，能夠調用相機拍照或從手機相冊選擇圖片，並將選中的圖片上傳到 對象存儲 COS 中。

• 輕按任意圖片，可進入全屏圖片預覽模式，並可左右滑動切換預覽圖片。

• 長按任意圖片，可將其保存到本地，或從 對象存儲 COS 中刪除。

效果演示圖（受開發工具的限制，部分功能還沒有實現）

對象存儲服務（Cloud Object Service）是騰訊雲推出的面向企業和我的開發者提供的高可用，高穩定，強安全的雲端存儲服務。能夠將任意數量和形式的非結構化數據放入COS，並在其中實現數據的管理和處理。

之因此選擇騰訊雲的 Demo，一是由於它是騰訊自家推出的，項目的質量有保障；二是由於它是少有的既講小程序開發，又介紹雲端部署的項目。

稍微有點經驗的程序員都知道，架構要動靜分離，靜態文件最好不要放在本身的服務器上，要放在專門用來存儲的對象存儲服務器COS上，而且用CDN 加速。「小相冊」後端採用的是 Node.js，Nginx做爲反向代理。

第一步：搭開發環境

首先，咱們須要在本地搭建好微信「小程序」的開發環境。即下載開發者工具。微信官方已經推出了正式版 IDE，你們沒有必要再去下載破解版了。打開官網下載頁面，根據本身的操做系統選擇。我使用的是 Mac 版。

安裝好以後打開運行，會要求微信掃碼登錄。以後，就能夠看到建立項目的頁面了。

選擇添加項目，沒有 AppID 就選無（若是亂寫會報錯，到時可能沒法進入項目）。若是你選擇的項目目錄爲空，請如圖所示勾選在「當前目錄中建立quick start項目」。

點擊「添加項目」以後，咱們會進入開發工具的調試頁面。

第二步：下載「小相冊」源碼

接下來，咱們下載「小相冊」的源碼。能夠選擇直接從騰訊雲官網提供的連接下載，也能夠從騰訊雲團隊的 Github 倉庫拉取。我推薦從 Github 倉庫拉取，這樣能夠及時獲取最新的代碼。

git clone https://github.com/CFETeam/weapp-demo-album.git

最終，咱們會獲得相似這樣的文件目錄。

簡單解釋下目錄結構：

• applet（或app）: 「小相冊」應用包代碼，可直接在微信開發者工具中做爲項目打開。

• server: 搭建的Node服務端代碼，做爲服務器和app通訊，提供 CGI 接口示例，用於拉取圖片資源、上傳圖片、刪除圖片。

• assets：「小相冊」的演示截圖。

源碼下載完成以後，咱們打開微信 web 開發者工具，新建項目「小相冊」，選擇目錄applet（或app）。

「小相冊」源碼分析

在進行部署以前，咱們來簡單分析一下「小相冊」的具體代碼。畢竟只看效果不是咱們的目的，咱們的目的是以「小相冊」爲例，瞭解如何開發小程序並與服務端進行交互。

「小相冊」包含一個描述總體程序的 app 和多個描述各自頁面的 page。主程序 app 主要由三個文件組成，分別是 app.js（小程序邏輯）、app.json（小程序公共設置）和 app.wxss（小程序公共樣式表），其中前兩個爲必備文件。config.js 文件中包含了一些部署域名的設置，如今不用管。

在 pages 目錄下，有兩個 page 頁面，分別是 index 和 album。頁面結構算是比較簡單的，其中 index 是小程序啓動時默認進入的頁面。每一個頁面下，至少要有 .js（頁面邏輯）和 .wxml（頁面結構）兩個文件，.wxss（頁面樣式表）和 .json（頁面配置）文件爲選填。你可能注意到了，這些文件的文件名與父目錄的名稱相同。這是微信官方的規定，目的是減小配置項，方便開發者。

接下來咱們以 index 頁面爲例作簡單的解釋。index.wxml 是這個頁面的表現層文件，其中的代碼很是簡單，能夠分爲上下兩大部分。

<view> <view class="page-top"> <text class="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"> <text class="qr-txt">分享二維碼邀請好友結伴一塊兒寫小程序！</text> <image src="../../images/qr.png" class="qr-img"></image> <image src="../../images/logo.png" class="page-logo"></image> </view> </view>

頁面的演示效果以下：

咱們看到，頁面上有一個「進入相冊」的按鈕。正常理解，點擊後該按鈕後咱們就能夠進入相冊了（這不廢話嘛）。那小程序背後是怎樣實現該操做的呢？

在 index.wxml 中，咱們發現對應的 button 標籤上定義了一個 bindtap 屬性，綁定了一個叫作 gotoAlbum 的方法。而這個方法能夠在 index.js 文件中找到。事實上，文件中也只定義了這一個方法，執行的具體動做就是跳轉到 album 頁面。

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

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

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

總的來講，和微信官方宣傳的同樣，在開發者工具下進行小程序的開發，效率確實提升了不少，並且有不少微信提升的組件和 API。因此，在開發速度這點上的體驗仍是很是爽的。

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

第三步：雲端部署 server 代碼

雖然服務端的開發不是本文的重點，可是爲了全面地體驗「小相冊」的整個開發部署流程，咱們仍是有必要了解服務端的部署，這裏咱們使用的是騰訊雲。

若是你想更爽一點，那麼能夠選擇騰訊雲官方提供的小程序雲端鏡像。「小相冊」的服務器運行代碼和配置已經打包成騰訊雲 CVM 鏡像，能夠直接使用。可謂是一鍵部署好雲端。

若是你之前沒有使用過騰訊雲，能夠選擇免費試用（我已經領取了 8 天的我的版服務器），或者領取禮包以優惠的價格購買所需的服務。

你也能夠選擇將「小相冊」源碼中的server文件夾上傳到本身的服務器。

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

若是你已經有騰訊雲的服務器和域名，並配置好了 https，那麼能夠跳過第 4-6 步。

在微信小程序中，全部的網絡請求受到嚴格限制，不知足條件的域名和協議沒法請求。簡單來講，就是你的域名必須走 https 協議。因此你還須要爲你的域名申請一個證書。若是沒有域名，請先註冊一個。因爲咱們沒有收到內測，也就暫時不用登陸微信公衆平臺配置通訊域名了。

第五步：Nginx 配置 https

微信小程序雲端示例鏡像中，已經部署好了 Nginx，可是還須要在 /etc/nginx/conf.d 下修改配置中的域名、證書、私鑰。

請將紅框部分換成本身的域名和證書，而且將 proxy_pass 設置爲 Node.js 監聽的端口，個人是 9993。

配置完成後，從新加載配置文件而且重啓 Nginx。

sudo service nginx reload sudo service nginx restart

第六步：域名解析

咱們還須要添加域名記錄，將域名解析到咱們的雲服務器上，這樣纔可使用域名進行 https 服務。在騰訊雲註冊的域名，能夠直接使用雲解析控制檯來添加主機記錄，直接選擇上面購買的 CVM。

解析生效後，咱們的域名就支持 https 訪問了。

第七步：開通和配置 COS

因爲咱們但願實現動靜分離的架構，因此選擇把「小相冊」的圖片資源是存儲在 COS 上的。要使用 COS 服務，須要登陸 COS 管理控制檯，而後在其中完成如下操做。

1. 點擊建立 Bucket。會要求選擇所屬項目，填寫相應名稱。這裏，咱們只須要填上本身喜歡的 Bucket 名稱便可。
   

2. 而後在 Bucket 列表中，點擊剛剛建立的 Bucket。而後在新頁面點擊「獲取API密鑰」。
   

彈出的頁面中包括了咱們所須要的三個信息：惟一的 APP ID，一對SecretID和SecretKey（用於調用 COS API）。保管好這些信息，咱們在稍後會用到。

1. 最後，在新的 Bucket 容器中建立文件夾，命名爲photos。這點後面咱們也會提到。

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

在官方提供的鏡像中，小相冊示例的 Node 服務代碼已部署在目錄 /data/release/qcloud-applet-album 下。進入該目錄，若是是你本身的服務器，請進入相應的文件夾。

cd /data/release/qcloud-applet-album

在該目錄下，有一個名爲 config.js 的配置文件（以下所示），按註釋修改對應的 COS 配置：

module.exports = { // Node 監聽的端口號 port: '9993', ROUTE_BASE_PATH: '/applet', cosAppId: '填寫開通 COS 時分配的 APP ID', cosSecretId: '填寫密鑰 SecretID', cosSecretKey: '填寫密鑰 SecretKey', cosFileBucket: '填寫建立的公有讀私有寫的bucket名稱', };

另外，cd ./routes/album/handlers，修改 list.js，將 const listPath 的值修改成你的Bucket 下的圖片存儲路徑。若是是根目錄，則修改成 '/'。當前服務端的代碼中將該值設置爲了 '/photos' ，若是你在第七步中沒有建立該目錄，則沒法調試成功。

小相冊示例使用 pm2 管理 Node 進程，執行如下命令啓動 node 服務：

pm2 start process.json

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

接下來，在微信 web 開發者工具打開「小相冊」項目，並把源文件config.js中的通信域名 host 修改爲你本身申請的域名。

將藍色框內的內容修改成本身的域名

而後點擊調試，便可打開小相冊Demo開始體驗。

最後提示一點，截止目前爲止，微信小程序提供的上傳和下載 API 沒法在調試工具中正常工做，須要用手機微信掃碼預覽體驗。可是因爲沒有內測資格，咱們暫時是沒辦法體驗了。

嗯，就這點不夠爽，沒有內測邀請。

轉：https://segmentfault.com/a/1190000007033827?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io