2019-10-29 分類: 微信小程序
「微信小程序」這個(gè)劃時(shí)代的產(chǎn)品發(fā)布快一周了,互聯(lián)網(wǎng)技術(shù)人都在摩拳擦掌,躍躍欲試。
在知名同性交友網(wǎng)站 Github 上,「小程序」的 Demo 不少,但是大多只是簡(jiǎn)單的 API 演示,有的甚至直接把頁面數(shù)據(jù)寫在了 json 文件里(分明有網(wǎng)絡(luò)請(qǐng)求 API)。我想體驗(yàn)的是能夠?qū)⒎?wù)端和小程序端無縫連接起來(體驗(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 中刪除。
效果演示圖(受開發(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 加速。「小相冊(cè)」后端采用的是 Node.js,Nginx作為反向代理。
首先,我們需要在本地搭建好微信「小程序」的開發(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)目目錄為空,請(qǐng)如圖所示勾選在“當(dāng)前目錄中創(chuàng)建quick start項(xiàng)目”。
點(diǎn)擊“添加項(xiàng)目”之后,我們會(huì)進(jìn)入開發(fā)工具的調(diào)試頁面。
接下來,我們下載「小相冊(cè)」的源碼。可以選擇直接從騰訊云官網(wǎng)提供的鏈接下載,也可以從騰訊云團(tuán)隊(duì)的 Github 倉(cāng)庫(kù)拉取。我推薦從 Github 倉(cāng)庫(kù)拉取,這樣可以及時(shí)獲取最新的代碼。
git clone https://github.com/CFETeam/weapp-demo-album.git
最終,我們會(huì)得到類似這樣的文件目錄。
簡(jiǎn)單解釋下目錄結(jié)構(gòu):
applet(或app): 「小相冊(cè)」應(yīng)用包代碼,可直接在微信開發(fā)者工具中作為項(xiàng)目打開。
server: 搭建的Node服務(wù)端代碼,作為服務(wù)器和app通信,提供 CGI 接口示例,用于拉取圖片資源、上傳圖片、刪除圖片。
assets:「小相冊(cè)」的演示截圖。
源碼下載完成之后,我們打開微信 web 開發(fā)者工具,新建項(xiàng)目「小相冊(cè)」,選擇目錄applet(或app)。
在進(jìn)行部署之前,我們來簡(jiǎn)單分析一下「小相冊(cè)」的具體代碼。畢竟只看效果不是我們的目的,我們的目的是以「小相冊(cè)」為例,了解如何開發(fā)小程序并與服務(wù)端進(jìn)行交互。
「小相冊(cè)」包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁面的 page。主程序 app 主要由三個(gè)文件組成,分別是?app.js(小程序邏輯)、app.json(小程序公共設(shè)置)和?app.wxss(小程序公共樣式表),其中前兩個(gè)為必備文件。config.js?文件中包含了一些部署域名的設(shè)置,現(xiàn)在不用管。
在 pages 目錄下,有兩個(gè) page 頁面,分別是 index 和 album。頁面結(jié)構(gòu)算是比較簡(jiǎn)單的,其中 index 是小程序啟動(dòng)時(shí)默認(rèn)進(jìn)入的頁面。每個(gè)頁面下,至少要有 .js(頁面邏輯)和 .wxml(頁面結(jié)構(gòu))兩個(gè)文件,.wxss(頁面樣式表)和 .json(頁面配置)文件為選填。你可能注意到了,這些文件的文件名與父目錄的名稱相同。這是微信官方的規(guī)定,目的是減少配置項(xiàng),方便開發(fā)者。
接下來我們以 index 頁面為例做簡(jiǎn)單的解釋。index.wxml?是這個(gè)頁面的表現(xiàn)層文件,其中的代碼非常簡(jiǎn)單,可以分為上下兩大部分。
恭喜你成功地搭建了一個(gè)微信小程序進(jìn)入相冊(cè)分享二維碼邀請(qǐng)好友結(jié)伴一起寫小程序!
頁面的演示效果如下:
我們看到,頁面上有一個(gè)“進(jìn)入相冊(cè)”的按鈕。正常理解,點(diǎn)擊后該按鈕后我們就可以進(jìn)入相冊(cè)了(這不廢話嘛)。那小程序背后是怎樣實(shí)現(xiàn)該操作的呢?
在?index.wxml?中,我們發(fā)現(xiàn)對(duì)應(yīng)的 button 標(biāo)簽上定義了一個(gè)?bindtap?屬性,綁定了一個(gè)叫做?gotoAlbum?的方法。而這個(gè)方法可以在?index.js?文件中找到。事實(shí)上,文件中也只定義了這一個(gè)方法,執(zhí)行的具體動(dòng)作就是跳轉(zhuǎn)到 album 頁面。
Page({//?前往相冊(cè)頁gotoAlbum()?{wx.navigateTo({?url:?'../album/album'?});},});
album.js?頁面中編寫了程序的主要邏輯,包括選擇或拍攝圖片、圖片預(yù)覽、圖片下載和圖片刪除;album.wxml 中三種視圖容器 view、scroll-view、swiper均有使用,還提供了消息提示框 toast。具體方法和視圖的實(shí)現(xiàn)請(qǐng)查看項(xiàng)目源碼。所有的這些功能都寫在 Page 類中。
lib 目錄下提供了小程序會(huì)用的一些輔助函數(shù),包括異步訪問和對(duì)象存儲(chǔ) COS 的 API。
總的來說,和微信官方宣傳的一樣,在開發(fā)者工具下進(jìn)行小程序的開發(fā),效率確實(shí)提高了很多,而且有很多微信提高的組件和 API。所以,在開發(fā)速度這點(diǎn)上的體驗(yàn)還是非常爽的。
另外,由于「小相冊(cè)」需要使用諸多云端能力,如圖片的上傳和下載,我們還需要進(jìn)行服務(wù)器端的部署和設(shè)置。具體請(qǐng)看接下來的步驟。
雖然服務(wù)端的開發(fā)不是本文的重點(diǎn),但是為了全面地體驗(yàn)「小相冊(cè)」的整個(gè)開發(fā)部署流程,我們還是有必要了解服務(wù)端的部署,這里我們使用的是騰訊云。
如果你想更爽一點(diǎn),那么可以選擇騰訊云官方提供的小程序云端鏡像。「小相冊(cè)」的服務(wù)器運(yùn)行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像,可以直接使用。可謂是一鍵部署好云端。
如果你以前沒有使用過騰訊云,可以選擇免費(fèi)試用(我已經(jīng)領(lǐng)取了 8 天的個(gè)人版服務(wù)器),或者領(lǐng)取禮包以優(yōu)惠的價(jià)格購(gòu)買所需的服務(wù)。
你也可以選擇將「小相冊(cè)」源碼中的server文件夾上傳到自己的服務(wù)器。
如果你已經(jīng)有騰訊云的服務(wù)器和域名,并配置好了 https,那么可以跳過第 4-6 步。
在微信小程序中,所有的網(wǎng)絡(luò)請(qǐng)求受到嚴(yán)格限制,不滿足條件的域名和協(xié)議無法請(qǐng)求。簡(jiǎn)單來說,就是你的域名必須走 https 協(xié)議。所以你還需要為你的域名申請(qǐng)一個(gè)證書。如果沒有域名,請(qǐng)先注冊(cè)一個(gè)。由于我們沒有收到內(nèi)測(cè),也就暫時(shí)不用登錄微信公眾平臺(tái)配置通信域名了。
微信小程序云端示例鏡像中,已經(jīng)部署好了 Nginx,但是還需要在?/etc/nginx/conf.d?下修改配置中的域名、證書、私鑰。
請(qǐng)將紅框部分換成自己的域名和證書,并且將?proxy_pass?設(shè)置為 Node.js 監(jiān)聽的端口,我的是 9993。
配置完成后,重新加載配置文件并且重啟 Nginx。
sudo?service?nginx?reloadsudo?service?nginx?restart
我們還需要添加域名記錄,將域名解析到我們的云服務(wù)器上,這樣才可以使用域名進(jìn)行 https 服務(wù)。在騰訊云注冊(cè)的域名,可以直接使用云解析控制臺(tái)來添加主機(jī)記錄,直接選擇上面購(gòu)買的 CVM。
解析生效后,我們的域名就支持 https 訪問了。
由于我們希望實(shí)現(xiàn)動(dòng)靜分離的架構(gòu),所以選擇把「小相冊(cè)」的圖片資源是存儲(chǔ)在 COS 上的。要使用 COS 服務(wù),需要登錄?COS 管理控制臺(tái),然后在其中完成以下操作。
點(diǎn)擊創(chuàng)建 Bucket。會(huì)要求選擇所屬項(xiàng)目,填寫相應(yīng)名稱。這里,我們只需要填上自己喜歡的 Bucket 名稱即可。
然后在 Bucket 列表中,點(diǎn)擊剛剛創(chuàng)建的 Bucket。然后在新頁面點(diǎn)擊“獲取API密鑰”。
彈出的頁面中包括了我們所需要的三個(gè)信息:唯一的 APP ID,一對(duì)SecretID和SecretKey(用于調(diào)用 COS API)。保管好這些信息,我們?cè)谏院髸?huì)用到。
最后,在新的 Bucket 容器中創(chuàng)建文件夾,命名為photos。這點(diǎn)后面我們也會(huì)提到。
在官方提供的鏡像中,小相冊(cè)示例的 Node 服務(wù)代碼已部署在目錄?/data/release/qcloud-applet-album?下。進(jìn)入該目錄,如果是你自己的服務(wù)器,請(qǐng)進(jìn)入相應(yīng)的文件夾。
cd?/data/release/qcloud-applet-album
在該目錄下,有一個(gè)名為?config.js?的配置文件(如下所示),按注釋修改對(duì)應(yīng)的 COS 配置:
module.exports?=?{//?Node?監(jiān)聽的端口號(hào)port:?'9993',ROUTE_BASE_PATH:?'/applet',cosAppId:?'填寫開通?COS?時(shí)分配的?APP?ID',cosSecretId:?'填寫密鑰?SecretID',cosSecretKey:?'填寫密鑰?SecretKey',cosFileBucket:?'填寫創(chuàng)建的公有讀私有寫的bucket名稱',};
另外,cd ./routes/album/handlers,修改?list.js,將?const listPath?的值修改為你的Bucket 下的圖片存儲(chǔ)路徑。如果是根目錄,則修改為?'/'。當(dāng)前服務(wù)端的代碼中將該值設(shè)置為了?'/photos'?,如果你在第七步中沒有創(chuàng)建該目錄,則無法調(diào)試成功。
小相冊(cè)示例使用 pm2 管理 Node 進(jìn)程,執(zhí)行以下命令啟動(dòng) node 服務(wù):
pm2?start?process.json
接下來,在微信 web 開發(fā)者工具打開「小相冊(cè)」項(xiàng)目,并把源文件config.js中的通訊域名 host 修改成你自己申請(qǐng)的域名。
將藍(lán)色框內(nèi)的內(nèi)容修改為自己的域名
然后點(diǎn)擊調(diào)試,即可打開小相冊(cè)Demo開始體驗(yàn)。
最后提示一點(diǎn),截止目前為止,微信小程序提供的上傳和下載 API 無法在調(diào)試工具中正常工作,需要用手機(jī)微信掃碼預(yù)覽體驗(yàn)。但是由于沒有內(nèi)測(cè)資格,我們暫時(shí)是沒辦法體驗(yàn)了
本文標(biāo)題:小相冊(cè)微信小程序搭建過程
URL地址:http://m.newbst.com/news/80738.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有微信小程序等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容