🤵?♂? 個(gè)人主頁: @計(jì)算機(jī)魔術(shù)師
👨?💻 作者簡(jiǎn)介：CSDN內(nèi)容合伙人，全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者。

🌐 推薦一款找工作神器網(wǎng)站: 點(diǎn)擊跳轉(zhuǎn)牛客網(wǎng) |筆試題庫|面試經(jīng)驗(yàn)|實(shí)習(xí)招聘內(nèi)推|

還沒有賬戶的小伙伴 速速點(diǎn)擊鏈接登錄注冊(cè)把！🎉🎉

該文章收錄專欄
? 2022微信小程序京東商城實(shí)戰(zhàn) ?

文章目錄

• 一、新建tabBar分支（選讀*）
• 二、配置網(wǎng)絡(luò)請(qǐng)求（掛載$http)
• 三、輪播圖區(qū)域
• • • 3.1 主頁API
• 四、注意事項(xiàng)！：
• 五、渲染輪播圖UI結(jié)構(gòu)
• 六、輪播圖點(diǎn)擊頁面跳轉(zhuǎn)

一、新建tabBar分支（選讀*）

之所以為了創(chuàng)建分支，也是養(yǎng)成良好的項(xiàng)目開發(fā)習(xí)慣，這樣在開放項(xiàng)目井井有條
也可以跳過本節(jié)內(nèi)容，不影響閱讀觀感🌹

在根目錄下，右鍵打開bash
基于 master 分支在本地創(chuàng)建 home 子分支，用來開發(fā)和 home 相關(guān)的功能：

git checkout -b home

查看分支（前面有*代表著當(dāng)前分支）

git branch

二、配置網(wǎng)絡(luò)請(qǐng)求（掛載$http)

由于平臺(tái)的限制，小程序項(xiàng)目中不支持 axios，而且原生的 wx.request() API 功能較為簡(jiǎn)單，不支持?jǐn)r截器等全局定制的功能。因此，建議在 uni-app 項(xiàng)目中使用 @escook/request-miniprogram 第三方包發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求。

請(qǐng)參考 @escook/request-miniprogram 的官方文檔進(jìn)行安裝、配置、使用
官方文檔：https://www.npmjs.com/package/@escook/request-miniprogram

按照官方流程，我們首先安裝對(duì)應(yīng)包，使用命令行工具cmd進(jìn)入到項(xiàng)目根目錄下 進(jìn)行初始化一個(gè)package.json文件

npm init -y

復(fù)制官網(wǎng)的導(dǎo)入命令輸入

npm install @escook/request-miniprogram

在入口文件進(jìn)行相關(guān)配置main.js
導(dǎo)入對(duì)應(yīng)包并進(jìn)行掛載，以及定義 響應(yīng)攔截器和請(qǐng)求響應(yīng)器
(在uni-app開發(fā)中，盡量都是以u(píng)ni作為頂級(jí)對(duì)象）

//導(dǎo)入網(wǎng)絡(luò)請(qǐng)求包 import {$http } from '@escook/request-miniprogram' //掛載 uni.$http = $http //設(shè)置請(qǐng)求地址的域名 $http.baseUrl = 'https://www.uinav.com' // 請(qǐng)求攔截器 $http.beforeRequest = function() {uni.showLoading({title: '數(shù)據(jù)加載中...',}); } // 響應(yīng)攔截器 $http.afterRequest = function(){uni.hideLoading() }

三、輪播圖區(qū)域

請(qǐng)求輪播圖的數(shù)據(jù)
實(shí)現(xiàn)步驟：

在 data 中定義輪播圖的數(shù)組

在 onLoad 生命周期函數(shù)中調(diào)用獲取輪播圖數(shù)據(jù)的方法

在 methods 中定義獲取輪播圖數(shù)據(jù)的方法

3.1 主頁API

獲取首頁輪播圖數(shù)據(jù)：

• 請(qǐng)求路徑：https://請(qǐng)求域名/api/public/v1/home/swiperdata
• 請(qǐng)求方法：GET
• 請(qǐng)求參數(shù)

參數(shù)名參數(shù)說明備注

無

• 響應(yīng)參數(shù)

參數(shù)名參數(shù)說明備注

image_src	圖片路徑
open_type	導(dǎo)航鏈接類型
navigator_url	導(dǎo)航鏈接路徑

• 響應(yīng)數(shù)據(jù)參考

{"message": [{"image_src": "https://www.zhengzhicheng.cn/pyg/banner1.png","open_type": "navigate","goods_id": 129,"navigator_url": "/pages/goods_detail/main?goods_id=129"},{"image_src": "https://www.zhengzhicheng.cn/pyg/banner2.png","open_type": "navigate","goods_id": 395,"navigator_url": "/pages/goods_detail/main?goods_id=395"},{"image_src": "https://www.zhengzhicheng.cn/pyg/banner3.png","open_type": "navigate","goods_id": 38,"navigator_url": "/pages/goods_detail/main?goods_id=38"}],"meta": { "msg": "獲取成功", "status": 200 } }

在home.vue 文件 中

<script>export default {data() {return {// 定義數(shù)據(jù)swiperList: []};},onLoad() {// 調(diào)取方法，獲取輪播圖數(shù)據(jù)this.getSwiperList()},methods: {async getSwiperList() {// '/' 根目錄即為在main.js的文件配置的 baseUrl const res = await uni.$http.get('/api/public/v1/home/swiperdata')//輸出 數(shù)據(jù)console.log(res.data)}}} </script>

打印成功（獲取數(shù)據(jù)成功）

通過meta的status屬性值判斷是否 成功獲取數(shù)據(jù)

methods: {async getSwiperList() {// '/' 根目錄即為在main.js的文件配置的 baseUrl const res = await uni.$http.get('/api/public/v1/home/swiperdata')// 調(diào)取失敗彈出錯(cuò)誤提示if (res.data.meta.status != 200) {uni.showToast({title: "數(shù)據(jù)拉取失敗", // 文字顯示'icon': "error", // 顯示錯(cuò)誤圖標(biāo)"duration": 1500 // 設(shè)置停留事件為 1.5s duration - 持續(xù)事件})// 將調(diào)用的數(shù)據(jù) 賦值this.swiperList = res.data.message}}}

賦值成功

四、注意事項(xiàng)！：

這里賦值不能像 原生小程序 調(diào)用 this.setData()使用，在小程序中可以使用this.data 更新數(shù)據(jù)不更新視圖和 thsi.setData({}) 數(shù)據(jù)和視圖同步更新（會(huì)重新加載數(shù)據(jù)渲染頁面），原理是因?yàn)樵谛〕绦蛑?渲染層和邏輯層無法直接數(shù)據(jù)共享，需要通過evalutejavascipt ，而setData將其封裝。

uni-app 框架 比 原生小程序 性能優(yōu)化好得多， 在小程序中需要使用setData()方法實(shí)現(xiàn)差量數(shù)據(jù)跟新，如果不使用則代碼性能不好，那么在實(shí)現(xiàn)邏輯交換修改數(shù)據(jù)會(huì)麻煩得多，而uni-app則在底層實(shí)現(xiàn)自動(dòng)差量數(shù)據(jù)更新，簡(jiǎn)單而高性能。
uni-app 與 原生小程序 (很不錯(cuò)文章）

五、渲染輪播圖UI結(jié)構(gòu)

uswiper 快速生成 輪播代碼塊

• 使用 vue-for 動(dòng)態(tài)循環(huán)輪播圖數(shù)組，循環(huán)動(dòng)態(tài)綁定需要標(biāo)簽屬性節(jié)點(diǎn)前都要加上 :（冒號(hào):是 v-bind的縮寫，即動(dòng)態(tài)綁定數(shù)據(jù)，后面可以跟變量或者變量表達(dá)式，如果沒有冒號(hào)的則為字符串，此時(shí)循環(huán)會(huì)無法顯示效果

<!-- 模板 --> <template><view><!-- 渲染輪播圖UI結(jié)構(gòu) --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 類似python for i,j in object 得到對(duì)應(yīng)項(xiàng)目i以及索引j --><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><image :src="item.image_src"></image></view></swiper-item></swiper></view> </template><!-- 樣式 --> <style lang="scss">swiper {height: 333rpx;.swiper-item,image {width: 100%;height: 100%;}} </style>

• 效果：
  

六、輪播圖點(diǎn)擊頁面跳轉(zhuǎn)

• 輪播圖UI結(jié)構(gòu)的view標(biāo)簽改為navigator標(biāo)簽

由于navigator 標(biāo)簽 是導(dǎo)航標(biāo)簽，是按照內(nèi)部組件的大小，分配頁面的
這里將view組件轉(zhuǎn)化為 navigator組件，并加上url屬性跳轉(zhuǎn)到商品頁，對(duì)其傳商品id參數(shù)

改造前：

<!-- 渲染輪播圖UI結(jié)構(gòu) --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 類似python for i,j in object 得到對(duì)應(yīng)項(xiàng)目i以及索引j --><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><image :src="item.image_src"></image></view></swiper-item></swiper>

改造后

<!-- 渲染輪播圖UI結(jié)構(gòu) --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!-- 類似python for i,j in object 得到對(duì)應(yīng)項(xiàng)目i以及索引j --><swiper-item v-for="(item,i) in swiperList" :key="i"><!-- 拼接字符串進(jìn)行動(dòng)態(tài)傳參--!><navigator class="swiper-item" :url="'/subpackages/goods_detail/goods_detail?good_id=' + item.goods_id"><image :src="item.image_src"></image></navigator> </swiper-item></swiper>

• 注意事項(xiàng)！：
  由于是動(dòng)態(tài)傳參，所以在配置url屬性中前面要加上分號(hào):（:是v-bind的縮寫，不然無法跳轉(zhuǎn)頁面。

效果：

• 頁面也成功傳參
  
  ?謝謝你的閱讀，您的點(diǎn)贊和收藏就是我創(chuàng)造的最大動(dòng)力！?

總結(jié)

以上是生活随笔為你收集整理的【小程序项目开发-- 京东商城】uni-app开发之轮播图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。