uni-app之旅-day01-home页

首页

3.0 创建 home 分支

• 🍕🍕🍕运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能
• git branch(查看分支)
• git checkout -b home(创建home分支)

3.1 配置网络请求

• 🌮🌮🌮由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。
• 在项目根路径打开命令窗口 执行命令 npm init -y 初始化package.json配置文件
• 安装 npm i @escook/request-miniprogram
• 在项目的 main.js 入口文件中，通过如下的方式进行配置
• 也提供了请求拦截器方法beforeRequest ，
• 也提供了 请求完成的方法afterRequest

//导入网络请求第三方包
import {$http} from "@escook/request-miniprogram"
uni.$http = $http;
// 配置请求根路径
$http.baseUrl = 'https://'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {uni.showLoading({title: '数据加载中...',})
}
// 请求完成之后隐藏loading
$http.afterRequest = function () {uni.hideLoading()
}

首页轮播图区域

3.2.1 请求轮播图的数据

• 🥞🥞🥞实现步骤：
• 在 data 中定义轮播图的数组
• 在 onLoad 生命周期函数中调用获取轮播图数据的方法
• 在 methods 中定义获取轮播图数据的方法

export default{data(){return {//1.轮播图数据swiperList:[],};},onLoad(){this.getSwiperList();},methods:{async getSwiperList(){const { data:res } = await uni.$http.get('/api/public/v1/home/swiperdata')console.log(res);if(res.meta.status !== 200){return uni.showToast({title:'数据请求失败',duration:1500,icon:'none'})}this.getSwiperList = res.message}}
}

3.2.2 渲染轮播图的 UI 结构

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><!-- 动态绑定属性src --><image :src="item.image_src" mode=""></image></view></swiper-item></swiper>

3.2.3配置小程序分包

🥟🍕🥟分包可以减少小程序首次启动时的加载时间

• 把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下
• 在项目根目录中，创建分包的根目录，命名为 subpkg
• 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

"subPackages": [{"root": "subpkg","pages": [{"path": "goods_detail/goods_detail","style": {}}	]}]

3.2.4 点击轮播图跳转到商品详情页面

• 🌮🌮🌮将 节点内的 view 组件，改造为 navigator 导航组件，并动态绑定 url 属性 的值，动态拼接商品的goods_id
• 改造之前的 UI 结构：

//改造前
<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-item v-for="(item, i) in swiperList" :key="i"><navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id"><!-- 动态绑定图片的 src 属性 --><image :src="item.image_src"></image></navigator>
</swiper-item>

封装 uni.$showMsg() 方法

• 🚜🚜🚜当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下
• 在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法,别的页面按需调用即可。

uni.$showMsg = function(title="数据加载失败!",duration=1500){uni.showToast({title,duration,icon:'none' })
}

3.3 分类导航区域

3.3.1 获取分类导航的数据

• 思路:
• 定义 data 数据
• 在 onLoad 中调用获取数据的方法
• 在 methods 中定义获取数据的方法
• home.vue中

//分类导航的数据列表
data(){return{//分类导航的数据列表navList:[],}
},
onLoad(){this.getNavList()
},
methods:{//获取分类数据getNavList(){const {data} = await  uni.$http.get('/api/public/v1/home/catitems');if(data.meta.status !==200){return uni.$showMsg(); }this.navList = data.message;}
}

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>

methods:{navClickHandler(item){if(item.name === '分类'){uni.switchTab({url:'/pages/cate/cate' }) }}
}

3.4 楼层区域

• 3.4.1 获取楼层数据
• 思路
• 定义数据
• 在 onLoad 中调用获取数据的方法
• 在 methods 中定义获取数据的方法

data(){return{floorList() }
},
onLoad(){this.getFloorList()
},
methods:{async getFloorList(){const {data} = await uni.$http.get('/api/public/v1/home/floordata');if(data.meta.status !== 200){return uni.$showMsg()}this.floorList = data.message;}
}

3.4.2 渲染楼层的标题

• UI 结构

<view class="floor-list"><!-- item项 --><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 渲染楼层里的图片

<!-- 标题 --><image :src="item.floor_title.image_src" class="floor-title" ></image>
<!-- 楼层图片区域 --><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>

• 楼层图片区域的样式

.floor-img-box{display: flex;padding-left: 10rpx;
}
.right-img-box{display: flex;flex-wrap: wrap;justify-content: space-around;
}

3.4.4 点击楼层图片跳转到商品列表页

• 在 subpkg 分包中，新建 goods_list 页面，为跳转页面做准备
• 楼层数据请求成功之后，通过双层 forEach 循环，处理 URL 地址：

async getFloorList(){const {data:res} = await uni.$http.get('/api/public/v1/home/floordata')console.log(res);if(res.meta.status !==200){return uni.$showMsg('')}// 通过双层forEach循环，处理URL地址res.message.forEach(floor=>{floor.product_list.forEach(prod=>{//添加一个自定义url属性把路径和"?"分割后的参数拼接在一起prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]})})this.floorList = res.message},

总结

• 特殊的标签、和网络请求配置