小相冊微信小程序搭建過程

「微信小程序」這個劃時代的產(chǎn)品發(fā)布快一周了，互聯(lián)網(wǎng)技術人都在摩拳擦掌，躍躍欲試。

選擇哪個「小程序」Demo？

在知名同性交友網(wǎng)站 Github 上，「小程序」的 Demo 不少，但是大多只是簡單的 API 演示，有的甚至直接把頁面數(shù)據(jù)寫在了 json 文件里（分明有網(wǎng)絡請求 API）。我想體驗的是能夠?qū)⒎斩撕托〕绦蚨藷o縫連接起來（體驗夠爽）的項目。最終，我選擇了騰訊云官方推出的「小相冊」項目。

「小相冊」主要實現(xiàn)了以下功能：

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

• 點擊左上角上傳圖片圖標，可以調(diào)用相機拍照或從手機相冊選擇圖片，并將選中的圖片上傳到 對象存儲 COS 中。

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

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

效果演示圖（受開發(fā)工具的限制，部分功能尚未實現(xiàn)）

對象存儲服務（Cloud Object Service）是騰訊云推出的面向企業(yè)和個人開發(fā)者提供的高可用，高穩(wěn)定，強安全的云端存儲服務?？梢詫⑷我鈹?shù)量和形式的非結(jié)構(gòu)化數(shù)據(jù)放入COS，并在其中實現(xiàn)數(shù)據(jù)的管理和處理。

之所以選擇騰訊云的 Demo，一是因為它是騰訊自家推出的，項目的質(zhì)量有保障；二是因為它是少有的既講小程序開發(fā)，又介紹云端部署的項目。

稍微有點經(jīng)驗的程序員都知道，架構(gòu)要動靜分離，靜態(tài)文件最好不要放在自己的服務器上，要放在專門用來存儲的對象存儲服務器COS上，并且用CDN 加速?！感∠鄡浴购蠖瞬捎玫氖?Node.js，Nginx作為反向代理。

第一步：搭開發(fā)環(huán)境

首先，我們需要在本地搭建好微信「小程序」的開發(fā)環(huán)境。即下載開發(fā)者工具。微信官方已經(jīng)推出了正式版 IDE，大家沒有必要再去下載破解版了。打開官網(wǎng)下載頁面，根據(jù)自己的操作系統(tǒng)選擇。我使用的是 Mac 版。

安裝好之后打開運行，會要求微信掃碼登陸。之后，就可以看到創(chuàng)建項目的頁面了。

選擇添加項目，沒有 AppID 就選無（如果亂寫會報錯，到時可能無法進入項目）。如果你選擇的項目目錄為空，請如圖所示勾選在“當前目錄中創(chuàng)建quick start項目”。

點擊“添加項目”之后，我們會進入開發(fā)工具的調(diào)試頁面。

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

接下來，我們下載「小相冊」的源碼?？梢赃x擇直接從騰訊云官網(wǎng)提供的鏈接下載，也可以從騰訊云團隊的 Github 倉庫拉取。我推薦從 Github 倉庫拉取，這樣可以及時獲取最新的代碼。

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

最終，我們會得到類似這樣的文件目錄。

簡單解釋下目錄結(jié)構(gòu)：

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

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

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

源碼下載完成之后，我們打開微信 web 開發(fā)者工具，新建項目「小相冊」，選擇目錄applet（或app）。

「小相冊」源碼分析

在進行部署之前，我們來簡單分析一下「小相冊」的具體代碼。畢竟只看效果不是我們的目的，我們的目的是以「小相冊」為例，了解如何開發(fā)小程序并與服務端進行交互。

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

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

接下來我們以 index 頁面為例做簡單的解釋。index.wxml?是這個頁面的表現(xiàn)層文件，其中的代碼非常簡單，可以分為上下兩大部分。

恭喜你成功地搭建了一個微信小程序進入相冊分享二維碼邀請好友結(jié)伴一起寫小程序！

頁面的演示效果如下：

我們看到，頁面上有一個“進入相冊”的按鈕。正常理解，點擊后該按鈕后我們就可以進入相冊了（這不廢話嘛）。那小程序背后是怎樣實現(xiàn)該操作的呢？

在?index.wxml?中，我們發(fā)現(xiàn)對應的 button 標簽上定義了一個?bindtap?屬性，綁定了一個叫做?gotoAlbum?的方法。而這個方法可以在?index.js?文件中找到。事實上，文件中也只定義了這一個方法，執(zhí)行的具體動作就是跳轉(zhuǎn)到 album 頁面。

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

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

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

總的來說，和微信官方宣傳的一樣，在開發(fā)者工具下進行小程序的開發(fā)，效率確實提高了很多，而且有很多微信提高的組件和 API。所以，在開發(fā)速度這點上的體驗還是非常爽的。

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

第三步：云端部署 server 代碼

雖然服務端的開發(fā)不是本文的重點，但是為了全面地體驗「小相冊」的整個開發(fā)部署流程，我們還是有必要了解服務端的部署，這里我們使用的是騰訊云。

如果你想更爽一點，那么可以選擇騰訊云官方提供的小程序云端鏡像?！感∠鄡浴沟姆掌鬟\行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像，可以直接使用?？芍^是一鍵部署好云端。

如果你以前沒有使用過騰訊云，可以選擇免費試用（我已經(jīng)領取了 8 天的個人版服務器），或者領取禮包以優(yōu)惠的價格購買所需的服務。

你也可以選擇將「小相冊」源碼中的server文件夾上傳到自己的服務器。

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

如果你已經(jīng)有騰訊云的服務器和域名，并配置好了 https，那么可以跳過第 4-6 步。

在微信小程序中，所有的網(wǎng)絡請求受到嚴格限制，不滿足條件的域名和協(xié)議無法請求。簡單來說，就是你的域名必須走 https 協(xié)議。所以你還需要為你的域名申請一個證書。如果沒有域名，請先注冊一個。由于我們沒有收到內(nèi)測，也就暫時不用登錄微信公眾平臺配置通信域名了。

第五步：Nginx 配置 https

微信小程序云端示例鏡像中，已經(jīng)部署好了 Nginx，但是還需要在?/etc/nginx/conf.d?下修改配置中的域名、證書、私鑰。

請將紅框部分換成自己的域名和證書，并且將?proxy_pass?設置為 Node.js 監(jiān)聽的端口，我的是 9993。

配置完成后，重新加載配置文件并且重啟 Nginx。

sudo?service?nginx?reloadsudo?service?nginx?restart

第六步：域名解析

我們還需要添加域名記錄，將域名解析到我們的云服務器上，這樣才可以使用域名進行 https 服務。在騰訊云注冊的域名，可以直接使用云解析控制臺來添加主機記錄，直接選擇上面購買的 CVM。

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

第七步：開通和配置 COS

由于我們希望實現(xiàn)動靜分離的架構(gòu)，所以選擇把「小相冊」的圖片資源是存儲在 COS 上的。要使用 COS 服務，需要登錄?COS 管理控制臺，然后在其中完成以下操作。

1. 點擊創(chuàng)建 Bucket。會要求選擇所屬項目，填寫相應名稱。這里，我們只需要填上自己喜歡的 Bucket 名稱即可。

   
   

3. 然后在 Bucket 列表中，點擊剛剛創(chuàng)建的 Bucket。然后在新頁面點擊“獲取API密鑰”。

   
   

彈出的頁面中包括了我們所需要的三個信息：唯一的 APP ID，一對SecretID和SecretKey（用于調(diào)用 COS API）。保管好這些信息，我們在稍后會用到。

1. 最后，在新的 Bucket 容器中創(chuàng)建文件夾，命名為photos。這點后面我們也會提到。

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

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

cd?/data/release/qcloud-applet-album

在該目錄下，有一個名為?config.js?的配置文件（如下所示），按注釋修改對應的 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 下的圖片存儲路徑。如果是根目錄，則修改為?'/'。當前服務端的代碼中將該值設置為了?'/photos'?，如果你在第七步中沒有創(chuàng)建該目錄，則無法調(diào)試成功。

小相冊示例使用 pm2 管理 Node 進程，執(zhí)行以下命令啟動 node 服務：

pm2?start?process.json

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

接下來，在微信 web 開發(fā)者工具打開「小相冊」項目，并把源文件config.js中的通訊域名 host 修改成你自己申請的域名。

將藍色框內(nèi)的內(nèi)容修改為自己的域名

然后點擊調(diào)試，即可打開小相冊Demo開始體驗。

最后提示一點，截止目前為止，微信小程序提供的上傳和下載 API 無法在調(diào)試工具中正常工作，需要用手機微信掃碼預覽體驗。但是由于沒有內(nèi)測資格，我們暫時是沒辦法體驗了

本文標題：小相冊微信小程序搭建過程
URL地址：http://www.muchs.cn/news/80738.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有微信小程序等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)