這篇文章主要介紹了微信小程序快速搭建步驟以及流程，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
合浦網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),合浦網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為合浦成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的合浦做網(wǎng)站的公司定做！
選擇哪個「小程序」Demo？
在知名同性交友網(wǎng)站 Github 上，「小程序」的 Demo 不少，但是大多只是簡單的 API 演示，有的甚至直接把頁面數(shù)據(jù)寫在了 json 文件里（分明有網(wǎng)絡(luò)請求 API）。我想體驗的是能夠?qū)⒎?wù)端和小程序端無縫連接起來（體驗夠爽）的項目。最終，我選擇了騰訊云官方推出的「小相冊」項目。
「小相冊」主要實現(xiàn)了以下功能：
列出對象存儲 COS 中的圖片列表。
點擊左上角上傳圖片圖標(biāo)，可以調(diào)用相機(jī)拍照或從手機(jī)相冊選擇圖片，并將選中的圖片上傳到 對象存儲 COS 中。
輕按任意圖片，可進(jìn)入全屏圖片預(yù)覽模式，并可左右滑動切換預(yù)覽圖片。
長按任意圖片，可將其保存到本地，或從 對象存儲 COS 中刪除。
效果演示圖（受開發(fā)工具的限制，部分功能尚未實現(xiàn)）
對象存儲服務(wù)（Cloud Object Service）是騰訊云推出的面向企業(yè)和個人開發(fā)者提供的高可用，高穩(wěn)定，強(qiáng)安全的云端存儲服務(wù)?？梢詫⑷我鈹?shù)量和形式的非結(jié)構(gòu)化數(shù)據(jù)放入COS，并在其中實現(xiàn)數(shù)據(jù)的管理和處理。
之所以選擇騰訊云的 Demo，一是因為它是騰訊自家推出的，項目的質(zhì)量有保障；二是因為它是少有的既講小程序開發(fā)，又介紹云端部署的項目。
稍微有點經(jīng)驗的程序員都知道，架構(gòu)要動靜分離，靜態(tài)文件最好不要放在自己的服務(wù)器上，要放在專門用來存儲的對象存儲服務(wù)器COS上，并且用cdn 加速?！感∠鄡浴购蠖瞬捎玫氖?Node.js，Nginx作為反向代理。
第一步：搭開發(fā)環(huán)境
首先，我們需要在本地搭建好微信「小程序」的開發(fā)環(huán)境。即下載開發(fā)者工具。微信官方已經(jīng)推出了正式版 IDE，大家沒有必要再去下載破解版了。打開官網(wǎng)下載頁面，根據(jù)自己的操作系統(tǒng)選擇。我使用的是 Mac 版。
安裝好之后打開運(yùn)行，會要求微信掃碼登陸。之后，就可以看到創(chuàng)建項目的頁面了。
選擇添加項目，沒有 AppID 就選無（如果亂寫會報錯，到時可能無法進(jìn)入項目）。如果你選擇的項目目錄為空，請如圖所示勾選在“當(dāng)前目錄中創(chuàng)建quick start項目”。
點擊“添加項目”之后，我們會進(jìn)入開發(fā)工具的調(diào)試頁面。
第二步：下載「小相冊」源碼
接下來，我們下載「小相冊」的源碼?？梢赃x擇直接從騰訊云官網(wǎng)提供的鏈接下載，也可以從騰訊云團(tuán)隊的 Github 倉庫拉取。我推薦從 Github 倉庫拉取，這樣可以及時獲取最新的代碼。
git clone https://github.com/CFETeam/weapp-demo-album.git
最終，我們會得到類似這樣的文件目錄。
簡單解釋下目錄結(jié)構(gòu)：
源碼下載完成之后，我們打開微信 web 開發(fā)者工具，新建項目「小相冊」，選擇目錄applet（或app）。
「小相冊」源碼分析
在進(jìn)行部署之前，我們來簡單分析一下「小相冊」的具體代碼。畢竟只看效果不是我們的目的，我們的目的是以「小相冊」為例，了解如何開發(fā)小程序并與服務(wù)端進(jìn)行交互。
「小相冊」包含一個描述整體程序的 app 和多個描述各自頁面的 page。主程序 app 主要由三個文件組成，分別是 app.js（小程序邏輯）、app.json（小程序公共設(shè)置）和 app.wxss（小程序公共樣式表），其中前兩個為必備文件。config.js 文件中包含了一些部署域名的設(shè)置，現(xiàn)在不用管。
在 pages 目錄下，有兩個 page 頁面，分別是 index 和 album。頁面結(jié)構(gòu)算是比較簡單的，其中 index 是小程序啟動時默認(rèn)進(jìn)入的頁面。每個頁面下，至少要有 .js（頁面邏輯）和 .wxml（頁面結(jié)構(gòu)）兩個文件，.wxss（頁面樣式表）和 .json（頁面配置）文件為選填。你可能注意到了，這些文件的文件名與父目錄的名稱相同。這是微信官方的規(guī)定，目的是減少配置項，方便開發(fā)者。
接下來我們以 index 頁面為例做簡單的解釋。index.wxml 是這個頁面的表現(xiàn)層文件，其中的代碼非常簡單，可以分為上下兩大部分。
恭喜你 成功地搭建了一個微信小程序 進(jìn)入相冊 分享二維碼邀請好友結(jié)伴一起寫小程序！
頁面的演示效果如下：
我們看到，頁面上有一個“進(jìn)入相冊”的按鈕。正常理解，點擊后該按鈕后我們就可以進(jìn)入相冊了（這不廢話嘛）。那小程序背后是怎樣實現(xiàn)該操作的呢？
在 index.wxml 中，我們發(fā)現(xiàn)對應(yīng)的 button 標(biāo)簽上定義了一個 bindtap 屬性，綁定了一個叫做 gotoAlbum 的方法。而這個方法可以在 index.js 文件中找到。事實上，文件中也只定義了這一個方法，執(zhí)行的具體動作就是跳轉(zhuǎn)到 album 頁面。
Page({ // 前往相冊頁
gotoAlbum() {
wx.navigateTo({ url: '../album/album' });
},
});album.js 頁面中編寫了程序的主要邏輯，包括選擇或拍攝圖片、圖片預(yù)覽、圖片下載和圖片刪除；album.wxml 中三種視圖容器 view、scroll-view、swiper均有使用，還提供了消息提示框 toast。具體方法和視圖的實現(xiàn)請查看項目源碼。所有的這些功能都寫在 Page 類中。
lib 目錄下提供了小程序會用的一些輔助函數(shù)，包括異步訪問和對象存儲 COS 的 API。
總的來說，和微信官方宣傳的一樣，在開發(fā)者工具下進(jìn)行小程序的開發(fā)，效率確實提高了很多，而且有很多微信提高的組件和 API。所以，在開發(fā)速度這點上的體驗還是非常爽的。
另外，由于「小相冊」需要使用諸多云端能力，如圖片的上傳和下載，我們還需要進(jìn)行服務(wù)器端的部署和設(shè)置。具體請看接下來的步驟。
第三步：云端部署 server 代碼
雖然服務(wù)端的開發(fā)不是本文的重點，但是為了全面地體驗「小相冊」的整個開發(fā)部署流程，我們還是有必要了解服務(wù)端的部署，這里我們使用的是騰訊云。
如果你想更爽一點，那么可以選擇騰訊云官方提供的小程序云端鏡像。「小相冊」的服務(wù)器運(yùn)行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像，可以直接使用?？芍^是一鍵部署好云端。
如果你以前沒有使用過騰訊云，可以選擇免費(fèi)試用（我已經(jīng)領(lǐng)取了 8 天的個人版服務(wù)器），或者領(lǐng)取禮包以優(yōu)惠的價格購買所需的服務(wù)。
你也可以選擇將「小相冊」源碼中的server文件夾上傳到自己的服務(wù)器。
第四步：準(zhǔn)備域名和配置證書
如果你已經(jīng)有騰訊云的服務(wù)器和域名，并配置好了 https，那么可以跳過第 4-6 步。
在微信小程序中，所有的網(wǎng)絡(luò)請求受到嚴(yán)格限制，不滿足條件的域名和協(xié)議無法請求。簡單來說，就是你的域名必須走 https 協(xié)議。所以你還需要為你的域名申請一個證書。如果沒有域名，請先注冊一個。由于我們沒有收到內(nèi)測，也就暫時不用登錄微信公眾平臺配置通信域名了。
第五步：Nginx 配置 https
微信小程序云端示例鏡像中，已經(jīng)部署好了 Nginx，但是還需要在 /etc/nginx/conf.d 下修改配置中的域名、證書、私鑰。
.jpg)
請將紅框部分換成自己的域名和證書，并且將 proxy_pass 設(shè)置為 Node.js 監(jiān)聽的端口，我的是 9993。
配置完成后，重新加載配置文件并且重啟 Nginx。
sudo service nginx reload
sudo service nginx restart
第六步：域名解析
我們還需要添加域名記錄，將域名解析到我們的云服務(wù)器上，這樣才可以使用域名進(jìn)行 https 服務(wù)。在騰訊云注冊的域名，可以直接使用云解析控制臺來添加主機(jī)記錄，直接選擇上面購買的 CVM。
解析生效后，我們的域名就支持 https 訪問了。
第七步：開通和配置 COS
由于我們希望實現(xiàn)動靜分離的架構(gòu)，所以選擇把「小相冊」的圖片資源是存儲在 COS 上的。要使用 COS 服務(wù)，需要登錄 COS 管理控制臺，然后在其中完成以下操作。
點擊創(chuàng)建 Bucket。會要求選擇所屬項目，填寫相應(yīng)名稱。這里，我們只需要填上自己喜歡的 Bucket 名稱即可。
然后在 Bucket 列表中，點擊剛剛創(chuàng)建的 Bucket。然后在新頁面點擊“獲取API密鑰”。
彈出的頁面中包括了我們所需要的三個信息：唯一的 APP ID，一對SecretID和SecretKey（用于調(diào)用 COS API）。保管好這些信息，我們在稍后會用到。
微信小程序應(yīng)用號交流群 563752274。
最后，在新的 Bucket 容器中創(chuàng)建文件夾，命名為photos。這點后面我們也會提到。
第八步：啟動「小相冊」的服務(wù)端
在官方提供的鏡像中，小相冊示例的 Node 服務(wù)代碼已部署在目錄 /data/release/qcloud-applet-album 下。進(jìn)入該目錄，如果是你自己的服務(wù)器，請進(jìn)入相應(yīng)的文件夾。
cd /data/release/qcloud-applet-album
在該目錄下，有一個名為 config.js 的配置文件（如下所示），按注釋修改對應(yīng)的 COS 配置：
module.exports = { // Node 監(jiān)聽的端口號
port: '9993',
ROUTE_BASE_PATH: '/applet',
cosAppId: '填寫開通 COS 時分配的 APP ID',
cosSecretId: '填寫密鑰 SecretID',
cosSecretKey: '填寫密鑰 SecretKey',
cosFileBucket: '填寫創(chuàng)建的公有讀私有寫的bucket名稱',
};另外，cd ./routes/album/handlers，修改 list.js，將 const listPath 的值修改為你的Bucket 下的圖片存儲路徑。如果是根目錄，則修改為 '/'。當(dāng)前服務(wù)端的代碼中將該值設(shè)置為了 '/photos' ，如果你在第七步中沒有創(chuàng)建該目錄，則無法調(diào)試成功。
小相冊示例使用 pm2 管理 Node 進(jìn)程，執(zhí)行以下命令啟動 node 服務(wù)：
pm2 start process.json
第九步：配置「小相冊」通信域名
接下來，在微信 web 開發(fā)者工具打開「小相冊」項目，并把源文件config.js中的通訊域名 host 修改成你自己申請的域名。
.jpg)
將藍(lán)色框內(nèi)的內(nèi)容修改為自己的域名
然后點擊調(diào)試，即可打開小相冊Demo開始體驗。
最后提示一點，截止目前為止，微信小程序提供的上傳和下載 API 無法在調(diào)試工具中正常工作，需要用手機(jī)微信掃碼預(yù)覽體驗。但是由于沒有內(nèi)測資格，我們暫時是沒辦法體驗了。
嗯，就這點不夠爽，沒有內(nèi)測邀請。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序快速搭建步驟以及流程”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
分享題目：微信小程序快速搭建步驟以及流程
標(biāo)題鏈接：
http://weahome.cn/article/pdpspe.html
重慶分公司
重慶分公司
