微信小程序開發學習筆記《18》uni-app框架-網絡請求

博主正在學習微信小程序開發，希望記錄自己學習過程同時與廣大網友共同學習討論。建議仔細閱讀uni-app對應官方文檔

一、下載網絡請求包

這個包是以前黑馬程序員老師寫的一個包，跟著課程學習，感覺挺好用的。
在資源管理器自己項目的頁面下，調用cmd或者powershell，首先初始化npm

npm init -y

然后下載大佬的包。

npm install @escook/request-miniprogram

下載的包會存放在如圖所示

因為是node包管理下載的。

二、導入配置包

在main.js文件中頭部加入如下代碼，實現導入與配置。

//導入網絡請求包（npm install @escook/request-miniprogram） 使用的是劉龍彬寫的
import {$http} from '@escook/request-miniprogram'
uni.$http = $http     //設置uni里面的$http為導入的$http

請求攔截器在網絡請求過程中起著非常重要的作用。他們主要是用來處理一些預處理操作，如檢查用戶登陸狀態，修改請求信息，添加額外的頭部信息等。
uni包含了所有wx.api，所以可以無縫將wx換為uni。

$http.beforeRequest = function(options){uni.showLoading({title:'數據加載中...'})
}

響應攔截器提供了一種有效的處理服務響應的方法，使我們能夠全局處理接口的響應數據，統一處理接口的錯誤和異常等。

$http.afterRequest = function(){uni.hideLoading()
}

三、請求輪播圖的數據

實現步驟:

1. 在data中定義輪播圖的數組
2. 在onLoad生命周期函數中調用獲取輪播圖數據的方法
3. 在methods中定義獲取輪播圖數據的方法

在對應需要輪播圖的頁面，輸入一下代碼，

<template><view>Home</view>
</template><script>export default {data() {return {// 1．輪播圖的數據列表，默認為空數組swiperList:[],}},onLoad() { // 聲明生命周期函數// 2．在小程序頁面剛加載的時候，調用獲取輪播圖數據的方法this.getSwiperList()},methods: {// 3．獲取輪播圖數據的方法async getSwiperList() {// 3.1發起請求const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata ')// 3.2 請求失敗if (res.meta.status !== 200) {return uni.showToast({title: '數據請求失敗! ',duration: 1500,icon: 'none',})}// 3.3請求成功,為data中的數據賦值this.swiperList = res.message},},}
</script><style lang="scss"></style>

其中在發起網絡請求之前，需要設置請求的根路徑。

//在main.js入口文件中設置
//請求的根路徑
$http.baseUrl = 'https://www.uinav.com'      //這個是自己后端寫的，根據自己后端項目需要寫出對應根路徑

四、渲染輪播圖的UI結構

1.渲染UI結構:

<template><view><!--輪播圖區域。可以通過uswp快捷生成模板！--><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!--循環渲染輪播圖的item項--><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><!--動態綁定圖片的 src屬性--><image :src="item.image_src"></image></view></swiper-item></swiper></view>
</template>

2.美化UI結構

<style lang="scss">swiper { height: 330rpx;.swiper-item,image {width: 100%;height: 100%;}}
</style>

以上學習筆記都是博主在B站學習黑馬程序員課程時的學習筆記，如果有什么問題，煩請聯系我刪除。