无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

頁(yè)面的演示效果如下：

我們看到，頁(yè)面上有一個(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 頁(yè)面。

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

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

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

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

另外，由于「小相冊(cè)」需要使用諸多云端能力，如圖片的上傳和下載，我們還需要進(jìn)行服務(wù)器端的部署和設(shè)置。具體請(qǐng)看接下來(lái)的步驟。

第三步：云端部署 server 代碼

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

如果你想更爽一點(diǎn)，那么可以選擇騰訊云官方提供的小程序云端鏡像?！感∠鄡?cè)」的服務(wù)器運(yùn)行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像，可以直接使用。可謂是一鍵部署好云端。

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

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

第四步：準(zhǔn)備域名和配置證書

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

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

第五步：Nginx 配置 https

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

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

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

sudo service nginx reload
sudo service nginx restart

第六步：域名解析

第七步：開(kāi)通和配置 COS

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

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

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

彈出的頁(yè)面中包括了我們所需要的三個(gè)信息：唯一的 APP ID，一對(duì)SecretID和SecretKey（用于調(diào)用 COS API）。保管好這些信息，我們?cè)谏院髸?huì)用到。

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

第八步：?jiǎn)?dòng)「小相冊(cè)」的服務(wù)端

在官方提供的鏡像中，小相冊(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)聽(tīng)的端口號(hào)
    port: '9993',
    ROUTE_BASE_PATH: '/applet',

    cosAppId: '填寫開(kāi)通 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' ，如果你在第七步中沒(méi)有創(chuàng)建該目錄，則無(wú)法調(diào)試成功。

小相冊(cè)示例使用 pm2 管理 Node 進(jìn)程，執(zhí)行以下命令啟動(dòng) node 服務(wù)：

pm2 start process.json

第九步：配置「小相冊(cè)」通信域名

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

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

然后點(diǎn)擊調(diào)試，即可打開(kāi)小相冊(cè)Demo開(kāi)始體驗(yàn)。

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

嗯，就這點(diǎn)不夠爽，沒(méi)有內(nèi)測(cè)邀請(qǐng)。