五，首頁輪播圖的實現

我們這一節要來實現首頁頂部的輪播圖功能。
老規矩，先看效果圖

5-1，開通云開發

由于我們的頂部輪播圖要做成動態的數據，所以這個數據就要存到數據庫里。常用的存儲數據的數據庫有下面幾種

• 云開發自帶的數據庫
• mysql數據庫

由于mysql數據庫需要用Java，php或者python來開發后臺，比較麻煩，所以我們這里還是用我們云開發自帶的數據庫比較好些。

關于云開發的開通和一些云開發的基礎知識，不是本節的重點，我之前云開發基礎課里有講過，如果你沒有云開發基礎可以去翻看我的云開發課程
《零基礎入門小程序云開發》
也可以去b站搜索‘編程小石頭’觀看石頭哥給大家提供的福利視頻課。

大家開通好云開發以后，記得要在app.js里進行云開發環境初始化

5-1-1，云開發環境初始化

我們上面創建好云開發以后，就要去云開發控制臺獲取云開發環境id了。

這里的云開發環境id，建議大家直接復制，不要手寫，很容易寫錯的。

如上圖，就可以在app.js里做云開發環境的初始化了。只有初始化好云開發環境id，我們才可以使用云開發功能。

5-1-2，創建首頁輪播圖對應的數據集合

我們這里創建一個數據表，小程序云開發里叫數據集合。

如上圖所示，我們創建一個名為homeImgs的數據集合，用于存放首頁輪播圖的圖片鏈接。

5-2，上傳圖片到云存儲

我們的圖片如果想動態更新，就要想辦法把圖片存儲到云服務器里，云開發的云存儲功能就為我們很好的存放圖片。這里教大家如何把圖片存儲到云存儲里。
首先進入云開發控制臺，找到云存儲。

然后進入我們新創建的這個文件夾，就可以點擊“上傳文件”進行文件上傳了

然后我們隨便點擊一個我們上傳的圖片，就可以拿到圖片對應的鏈接了

https開頭的圖片鏈接，可以直接在瀏覽器里打開。

但是這個https開頭的鏈接有對應的有效期。所以我們的圖片如果是在小程序里展示，建議大家使用這個cloud開頭的圖片鏈接。

cloud開頭的這個鏈接在瀏覽器里不能顯示，但是在我們的小程序里是可以顯示的，并且是永久有效的。

5-3，添加圖片鏈接到輪播圖集合里

我們上面已經能拿到圖片的鏈接了，那么就可以把拿到的圖片鏈接添加到我們的輪播圖集合里了。

如果我們首頁輪播圖想顯示多個圖片的話，就可以把我們多個圖片鏈接都添加進來。

這里要記得每個數據里都是用imgUrl字段來保存圖片鏈接的。

5-4，首頁獲取輪播圖數據

我們數據都已經準備好了，接下來就是要在小程序里請求云開發數據庫里存儲的數據了，我們后期只需要改變云開發數據庫里的數據，小程序里的數據就可以動態改變了。
我們在home.js里定義請求數據的方法如下。

可以看到我們請求數據成功了，但是打印的時候卻是空數據。這是因為我們的云開發數據庫權限要設置成所有人可讀。

因為我們創建homeImgs集合時，默認的是僅創建者可讀寫。所以我們直接在小程序里請求時，是請求不到數據的。這里把權限改為所有用戶可讀即可。
我們再來請求下數據看看。

這個時候我們添加的3條圖片鏈接數據就可以全部請求到了。接下來我們就要把這些數據顯示到頁面上了

5-5，渲染頂部輪播圖

我們要借助swiper和swiper-item組件在頁面里渲染頂部輪播圖，所以要在home.wxml里定義如下的代碼。

然后home.js里的代碼也要稍做改造。

這樣我們的數據就可以在頁面上顯示出來了。

但是我們這里有問題

• 1，圖片沒有鋪滿全屏
• 2，輪播圖的提示點也沒有
• 3，輪播圖不能自動滾動
  下面我們就來解決這些問題

5-6，優化輪播圖

首先設置圖片的mode，讓圖片鋪滿。這里用到了image的mode屬性，如下圖。

我把官方文檔的鏈接給到大家：

https://developers.weixin.qq.com/miniprogram/dev/component/image.html
這里的mode裁剪模式，大家可以根據自己的需求設置。

home.wxml代碼如下：

home.wxss里的代碼如下：

可以看出，我們的圖片這個時候撐滿了屏幕，但是會有裁剪

這個取決于我們image組件的mode裁剪參數的設置，至于設置哪種裁剪模式，這個你可以根據自己的業務場景來定，最好的是設計出來的圖片完全符合比例。這樣就不會有裁剪的問題了。

5-7，設置自動輪播

我們要設置輪播圖的自動輪播等屬于，其實就是來設置swiper組件的一些屬性。其實官方都有給出來的。

這里也把對應的官方文檔鏈接給到大家，大家可以根據自己的需求去做設置。

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
我這里只設置下面兩個屬性

• indicator-dots：顯示指示點
• autoplay：自動輪播
  這樣我們完整的輪播圖功能就實現了。關于輪播圖的點擊和跳轉，我們后面章節再做講解，這節主要是帶大家實現動態的輪播圖功能。