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