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