uni-app之旅-day01-home页

news/2024/12/22 21:02:39/

首页

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

总结

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

http://www.ppmy.cn/news/1535880.html

相关文章

微服务实战——ElasticSearch（搜索）

微服务实战——ElasticSearch（搜索）

商品检索——ElasticSearch&#xff08;搜索&#xff09; 1. 检索条件&排序条件分析 全文检索&#xff1a;skuTitle -> keyword排序&#xff1a;saleCount&#xff08;销量&#xff09;、hotScore&#xff08;热度分&#xff09;、skuPrice&#xff08;价格&#xff0…
阅读更多...
iTextPDF中，要实现表格中的内容在数据长度超过边框时自动换行

iTextPDF中，要实现表格中的内容在数据长度超过边框时自动换行

在iTextPDF中&#xff0c;要实现表格中的内容在数据长度超过边框时自动换行&#xff0c;你可以使用Phrase对象并设置其HyphenationEvent&#xff0c;或者使用Chunk对象并设置其setSplitCharacter方法。以下是一些方法来实现这一功能&#xff1a; 1. 使用Phrase对象&#xff1a…
阅读更多...
CTF刷题buuctf

CTF刷题buuctf

[WUSTCTF2020]颜值成绩查询 拿到相关题目&#xff0c;其实根据功能和参数分析。需要传入一个学号然后进行针对于对应的学号进行一个查询&#xff0c;很可能就会存在sql注入。 其实这道题最难的点&#xff0c;在于过滤了空格&#xff0c;因此我们使用 /**/来过滤空格的限制。…
阅读更多...
数据库概述（3）

数据库概述（3）

课程主页&#xff1a;Guoliang Li Tsinghua 继续补充DBMS概况&#xff1a; DBMS概况 存储管理层 缓冲区管理 为了持久保存数据库里面的数据&#xff0c;必定要做持久化技术&#xff0c;也就是会用到磁盘&#xff0c;然而磁盘读取数据的速度是比较慢的&#xff0c;一般是毫…
阅读更多...
论文阅读笔记-A Comparative Study on Transformer vs RNN in Speech Applications

论文阅读笔记-A Comparative Study on Transformer vs RNN in Speech Applications

前言 介绍 序列到序列模型已广泛用于端到端语音处理中，例如自动语音识别（ASR），语音翻译（ST）和文本到语音（TTS）。本文着重介绍把Transformer应用在语音领域上并与RNN进行对比。与传统的基于RNN的模型相比，将Transformer应用于语音的主要困难之一是，它需要更复杂的配…
阅读更多...
基于pytorch的手写数字识别-训练+使用

基于pytorch的手写数字识别-训练+使用

import pandas as pd import numpy as np import torch import matplotlib import matplotlib.pyplot as plt from torch.utils.data import TensorDataset, DataLoadermatplotlib.use(tkAgg)# 设置图形配置 config {"font.family": serif,"mathtext.fontset&q…
阅读更多...
性能学习5：性能测试的流程

性能学习5：性能测试的流程

一.需求分析 二.性能测试计划 1&#xff09;测什么&#xff1f; - 项目背景 - 测试目的 - 测试范围 - ... 2&#xff09;谁来测试 - 时间进度与分工 - 交付清单 - ... 3&#xff09;怎么测 - 测试策略 - ... 三.性能测试用例 四.性能测试执行 五.性能分析和调优 六…
阅读更多...
Ultralytics_yolov10目标检测，预处理函数入口

Ultralytics_yolov10目标检测，预处理函数入口

日期&#xff1a;2024.10.7. 随着Ultralytics的更新&#xff0c;yolov5-v11可以统一使用Ultralytics包体&#xff0c;我之前分析的yolov5关键代码定位在Ultralytics中不适用&#xff0c;这篇博客更新一下。 1. Ultralytics包体版本&#xff1a; $ pip list | grep ultralytic…
阅读更多...
最新文章

Copyright @ 2022~2023