COURSE 小程序教程
我們的作品，他們的故事
Our work, their stories
Our work, their stories
一個小時快速搭建微信小程序教程
發布人:龍兵科技
16-11-07
「小程序」這個劃時代的產品發布快一周了，互聯網技術人都在摩拳擦掌，躍躍欲試?？墒切〕绦蚰壳斑€在內測，首批只發放了 200 個內測資格（淚流滿面）。本以為沒有 AppID 這個月就與小程序無緣了，慶幸的是微信這兩天發布了正式版開發者工具，無需內測邀請也可以嘗鮮了。
因此也就有了我與「小程序」的初體驗，而我的感受只有一個字——爽！
選擇哪個「小程序」Demo？
在知名同性交友網站 Github 上，「小程序」的 Demo 不少，但是大多只是簡單的 API 演示，有的甚至直接把頁面數據寫在了 json 文件里（分明有網絡請求 API）。我想體驗的是能夠將服務端和小程序端無縫連接起來（體驗夠爽）的項目。最終，我選擇了騰訊云官方推出的「小相冊」項目。
「小相冊」主要實現了以下功能：
列出對象存儲 COS 中的圖片列表。
點擊左上角上傳圖片圖標，可以調用相機拍照或從手機相冊選擇圖片，并將選中的圖片上傳到 對象存儲 COS 中。
輕按任意圖片，可進入全屏圖片預覽模式，并可左右滑動切換預覽圖片。
長按任意圖片，可將其保存到本地，或從 對象存儲 COS 中刪除。
效果演示圖（受開發工具的限制，部分功能尚未實現）
對象存儲服務（Cloud Object Service）是騰訊云推出的面向企業和個人開發者提供的高可用，高穩定，強安全的云端存儲服務。可以將任意數量和形式的非結構化數據放入COS，并在其中實現數據的管理和處理。
之所以選擇騰訊云的 Demo，一是因為它是騰訊自家推出的，項目的質量有保障；二是因為它是少有的既講小程序開發，又介紹云端部署的項目。
稍微有點經驗的程序員都知道，架構要動靜分離，靜態文件最好不要放在自己的服務器上，要放在專門用來存儲的對象存儲服務器COS上，并且用CDN 加速。「小相冊」后端采用的是 Node.js，Nginx作為反向代理。
第一步：搭開發環境
首先，我們需要在本地搭建好微信「小程序」的開發環境。即下載開發者工具。微信官方已經推出了正式版 IDE，大家沒有必要再去下載破解版了。打開官網下載頁面，根據自己的操作系統選擇。我使用的是 Mac 版。
安裝好之后打開運行，會要求微信掃碼登陸。之后，就可以看到創建項目的頁面了。
選擇添加項目，沒有 AppID 就選無（如果亂寫會報錯，到時可能無法進入項目）。如果你選擇的項目目錄為空，請如圖所示勾選在“當前目錄中創建quick start項目”。
點擊“添加項目”之后，我們會進入開發工具的調試頁面。
第二步：下載「小相冊」源碼
接下來，我們下載「小相冊」的源碼?？梢赃x擇直接從騰訊云官網提供的鏈接下載，也可以從騰訊云團隊的 Github 倉庫拉取。我推薦從 Github 倉庫拉取，這樣可以及時獲取最新的代碼。
最終，我們會得到類似這樣的文件目錄。
簡單解釋下目錄結構：
applet（或app）: 「小相冊」應用包代碼，可直接在微信開發者工具中作為項目打開。
server: 搭建的Node服務端代碼，作為服務器和app通信，提供 CGI 接口示例，用于拉取圖片資源、上傳圖片、刪除圖片。
assets：「小相冊」的演示截圖。
因此也就有了我與「小程序」的初體驗，而我的感受只有一個字——爽！
選擇哪個「小程序」Demo？
在知名同性交友網站 Github 上，「小程序」的 Demo 不少，但是大多只是簡單的 API 演示，有的甚至直接把頁面數據寫在了 json 文件里（分明有網絡請求 API）。我想體驗的是能夠將服務端和小程序端無縫連接起來（體驗夠爽）的項目。最終，我選擇了騰訊云官方推出的「小相冊」項目。
「小相冊」主要實現了以下功能：
列出對象存儲 COS 中的圖片列表。
點擊左上角上傳圖片圖標，可以調用相機拍照或從手機相冊選擇圖片，并將選中的圖片上傳到 對象存儲 COS 中。
輕按任意圖片，可進入全屏圖片預覽模式，并可左右滑動切換預覽圖片。
長按任意圖片，可將其保存到本地，或從 對象存儲 COS 中刪除。
效果演示圖（受開發工具的限制，部分功能尚未實現）
對象存儲服務（Cloud Object Service）是騰訊云推出的面向企業和個人開發者提供的高可用，高穩定，強安全的云端存儲服務。可以將任意數量和形式的非結構化數據放入COS，并在其中實現數據的管理和處理。
之所以選擇騰訊云的 Demo，一是因為它是騰訊自家推出的，項目的質量有保障；二是因為它是少有的既講小程序開發，又介紹云端部署的項目。
稍微有點經驗的程序員都知道，架構要動靜分離，靜態文件最好不要放在自己的服務器上，要放在專門用來存儲的對象存儲服務器COS上，并且用CDN 加速。「小相冊」后端采用的是 Node.js，Nginx作為反向代理。
第一步：搭開發環境
首先，我們需要在本地搭建好微信「小程序」的開發環境。即下載開發者工具。微信官方已經推出了正式版 IDE，大家沒有必要再去下載破解版了。打開官網下載頁面，根據自己的操作系統選擇。我使用的是 Mac 版。
安裝好之后打開運行，會要求微信掃碼登陸。之后，就可以看到創建項目的頁面了。
選擇添加項目，沒有 AppID 就選無（如果亂寫會報錯，到時可能無法進入項目）。如果你選擇的項目目錄為空，請如圖所示勾選在“當前目錄中創建quick start項目”。
點擊“添加項目”之后，我們會進入開發工具的調試頁面。
第二步：下載「小相冊」源碼
接下來，我們下載「小相冊」的源碼?？梢赃x擇直接從騰訊云官網提供的鏈接下載，也可以從騰訊云團隊的 Github 倉庫拉取。我推薦從 Github 倉庫拉取，這樣可以及時獲取最新的代碼。
最終，我們會得到類似這樣的文件目錄。
簡單解釋下目錄結構：
applet（或app）: 「小相冊」應用包代碼，可直接在微信開發者工具中作為項目打開。
server: 搭建的Node服務端代碼，作為服務器和app通信，提供 CGI 接口示例，用于拉取圖片資源、上傳圖片、刪除圖片。
assets：「小相冊」的演示截圖。
下一篇:電商類微信小程序實例教程
