当前位置：首页 > article >正文

uni-app之旅-day01-home页

article 2024/11/19 22:52:44

首页

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
			},