個人名片：
作者簡介：一名大二在校生，討厭編程
???個人主頁：小新愛學習.
個人：
?系列專欄：?
每日一句：努力的意義是給所愛之人一個美好的未來！
文章目錄
3. 首頁 3.0 創建 home 分支
運行如下的命令，基于 分支在本地創建 home 子分支，用來開發和 home 首頁相關的功能：
git checkout -b home
3.1 配置網絡請求
由于平臺的限制，小程序項目中不支持 axios，而且原生的 wx.() API 功能較為簡單，不支持攔截器等全局定制的功能。因此，建議在 uni-app 項目中使用 @/- 第三方包發起網絡數據請求。
請參考 @/- 的官方文檔進行安裝、配置、使用
官方文檔：@/-
最終，在項目的 main.js 入口文件中，通過如下的方式進行配置：
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置請求根路徑
$http.baseUrl = 'https://www.uinav.com'
// 請求開始之前做一些事情
$http.beforeRequest = function (options) {
uni.showLoading({
title: '數據加載中...',
})
}
// 請求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading()
}
3.2 輪播圖區域 3.2.1 請求輪播圖的數據
實現步驟：
1. 在 data 中定義輪播圖的數組
2. 在 生命周期函數中調用獲取輪播圖數據的方法
3. 在 中定義獲取輪播圖數據的方法
示例代碼：
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
},
},
}
3.2.2 渲染輪播圖的 UI 結構 渲染 UI 結構：
<template>
<view>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<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>
美化 UI 結構：
3.2.3 配置小程序分包
分包可以減少小程序首次啟動時的加載時間
為此，我們在項目中，把 相關的 4 個頁面放到主包中，其它頁面（例如：商品詳情頁、商品列表頁）放到分包中。在 uni-app 項目中，配置分包的步驟如下：
在項目根目錄中，創建分包的根目錄，命名為
在 pages.json 中，和 pages 節點平級的位置聲明 節點，用來定義分包相關的結構：
{
"pages": [
{
"path": "pages/home/home",
"style": {}
},
{
"path": "pages/cate/cate",
"style": {}
},
{
"path": "pages/cart/cart",
"style": {}
},
{
"path": "pages/my/my",
"style": {}
}
],
"subPackages": [
{
"root": "subpkg",
"pages": []
}
]
}
在 目錄上鼠標右鍵，點擊 新建頁面 選項，并填寫頁面的相關信息：
3.2.4 點擊輪播圖跳轉到商品詳情頁面
將 節點內的 view 組件，改造為 導航組件，并動態綁定 url 屬性 的值。
改造之前的 UI 結構：
<swiper-item v-for="(item, i) in swiperList" :key="i">
<view class="swiper-item">
<image :src="item.image_src">image>
view>
swiper-item>
改造之后的 UI 結構：
<swiper-item v-for="(item, i) in swiperList" :key="i">
<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
<image :src="item.image_src">image>
navigator>
swiper-item>
3.2.5 封裝 uni.$() 方法
當數據請求失敗之后，經常需要調用 uni.({ /* 配置對象 */ }) 方法來提示用戶。此時小程序跳轉到淘客，可以在全局封裝一個 uni.$() 方法，來簡化 uni.() 方法的調用。具體的改造步驟如下：
在 main.js 中小程序跳轉到淘客，為 uni 對象掛載自定義的 $() 方法：
// 封裝的展示消息提示的方法
uni.$showMsg = function (title = '數據加載失??！', duration = 1500) {
uni.showToast({
title,
duration,
icon: 'none',
})
}
今后，在需要提示消息的時候，直接調用 uni.$() 方法即可：
async getSwiperList() {
const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
if (res.meta.status !== 200) return uni.$showMsg()
this.swiperList = res.message
}
3.3 分類導航區域 3.3.1 獲取分類導航的數據
實現思路：
定義 data 數據
在 中調用獲取數據的方法
在 中定義獲取數據的方法
示例代碼如下：
export default {
data() {
return {
// 1. 分類導航的數據列表
navList: [],
}
},
onLoad() {
// 2. 在 onLoad 中調用獲取數據的方法
this.getNavList()
},
methods: {
// 3. 在 methods 中定義獲取數據的方法
async getNavList() {
const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
if (res.meta.status !== 200) return uni.$showMsg()
this.navList = res.message
},
},
}
3.3.2 渲染分類導航的 UI 結構 定義如下的 UI 結構：
<view class="nav-list">
<view class="nav-item" v-for="(item, i) in navList" :key="i">
<image :src="item.image_src" class="nav-img">image>
view>
view>
通過如下的樣式美化頁面結構：
.nav-list {
display: flex;
justify-content: space-around;
margin: 15px 0;
.nav-img {
width: 128rpx;
height: 140rpx;
}
}
3.3.2 點擊第一項，切換到分類頁面 為 nav-item 綁定點擊事件處理函數：
<view class="nav-list">
<view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
<image :src="item.image_src" class="nav-img">image>
view>
view>
定義 事件處理函數：
// nav-item 項被點擊時候的事件處理函數
navClickHandler(item) {
// 判斷點擊的是哪個 nav
if (item.name === '分類') {
uni.switchTab({
url: '/pages/cate/cate'
})
}
}
3.4 樓層區域 3.4.1 獲取樓層數據
實現思路：
定義 data 數據
在 中調用獲取數據的方法
在 中定義獲取數據的方法
示例代碼如下：
export default {
data() {
return {
// 1. 樓層的數據列表
floorList: [],
}
},
onLoad() {
// 2. 在 onLoad 中調用獲取樓層數據的方法
this.getFloorList()
},
methods: {
// 3. 定義獲取樓層列表數據的方法
async getFloorList() {
const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
if (res.meta.status !== 200) return uni.$showMsg()
this.floorList = res.message
},
},
}
3.4.2 渲染樓層的標題 定義如下的 UI 結構：
<view class="floor-list">
<view class="floor-item" v-for="(item, i) in floorList" :key="i">
<image :src="item.floor_title.image_src" class="floor-title">image>
view>
view>
美化樓層標題的樣式：
.floor-title {
height: 60rpx;
width: 100%;
display: flex;
}
3.4.3 渲染樓層里的圖片 定義樓層圖片區域的 UI 結構：
<view class="floor-img-box">
<view class="left-img-box">
<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix">image>
view>
<view class="right-img-box">
<view class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0">
<image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}">image>
view>
view>
view>
美化樓層圖片區域的樣式：
.right-img-box {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.floor-img-box {
display: flex;
padding-left: 10rpx;
}
3.4.4 點擊樓層圖片跳轉到商品列表頁 在 分包中，新建 頁面
樓層數據請求成功之后，通過雙層 循環，處理 URL 地址：
// 獲取樓層列表數據
async getFloorList() {
const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
if (res.meta.status !== 200) return uni.$showMsg()
// 通過雙層 forEach 循環，處理 URL 地址
res.message.forEach(floor => {
floor.product_list.forEach(prod => {
prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
})
})
this.floorList = res.message
}
把圖片外層的 view 組件，改造為 組件，并動態綁定 url 屬性 的值：
<!-- 樓層圖片區域 -->
<view class="floor-img-box">
<!-- 左側大圖片的盒子 -->
<navigator class="left-img-box" :url="item.product_list[0].url">
<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
</navigator>
<!-- 右側 4 個小圖片的盒子 -->
<view class="right-img-box">
<navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0" :url="item2.url">
<image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
</navigator>
</view>
</view>
3.5 分支的合并與提交 將本地的 home 分支進行本地的 提交：
git add .
git commit -m "完成了 home 首頁的開發"
將本地的 home 分支推送到遠程倉庫進行保存：
git push -u origin home
將本地的 home 分支合并到本地的 分支：
git checkout master
git merge home
刪除本地的 home 分支：
git branch -d home