# uniapp-learning

**Repository Path**: zhaozhaostudy/uniapp-learning

## Basic Information

- **Project Name**: uniapp-learning
- **Description**: uniapp微信小程序个人学习项目，黑马优购商城
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-04-17
- **Last Updated**: 2023-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


uniapp微信小程序个人学习项目，黑马优购商城

1. 起步
1.1 uni-app 简介
1.2 开发工具
1.2.1 下载 HBuilderX
1.2.2 安装 HBuilderX
1.2.3 安装 scss/sass 编译
1.2.4 快捷键方案切换
1.2.5 修改编辑器的基本设置
1.3 新建 uni-app 项目
1.4 目录结构
1.5 把项目运行到微信开发者工具
1.6 使用 Git 管理项目
1.6.1 本地管理
1.6.2 把项目托管到码云
2. tabBar
2.1 创建 tabBar 分支
2.2 创建 tabBar 页面
2.3 配置 tabBar 效果
2.4 删除默认的 index 首页
2.5 修改导航条的样式效果
2.6 分支的提交与合并
3. 首页
3.1 创建 home 分支
3.2 配置网络请求
3.3 轮播图区域
3.3.1 请求轮播图的数据
3.3.2 渲染轮播图的 UI 结构
3.3.3 配置小程序分包
3.3.4 点击轮播图跳转到商品详情页面
3.3.5 封装 uni.$showMsg() 方法
3.4 分类导航区域
3.4.1 获取分类导航的数据
3.4.2 渲染分类导航的 UI 结构
3.4.3 点击第一项，切换到分类页面
3.5 楼层区域
3.5.1 获取楼层数据
3.5.2 渲染楼层的内容
3.5.3 点击楼层图片跳转到商品列表页
3.6 分支的合并与提交
4. 分类
4.0 创建 cate 分支
4.1 渲染分类页面的基本结构
4.2 获取分类数据
4.3 动态渲染左侧的一级分类列表
4.4 动态渲染右侧的二级分类列表
4.5 动态渲染右侧的三级分类列表
4.6 切换一级分类后重置滚动条的位置
4.7 点击三级分类跳转到商品列表页面
4.8 分支的合并与提交
5. 搜索
5.0 创建 search 分支
5.1 自定义搜索组件
5.1.1 自定义 my-search 组件
5.1.2 通过自定义属性增强组件的通用性
5.1.3 为自定义组件封装 click 事件
5.1.4 实现首页搜索组件的吸顶效果
5.2 搜索建议
5.2.1 渲染搜索页面的基本结构
5.2.2 实现搜索框自动获取焦点
5.2.3 实现搜索框的防抖处理
5.2.4 根据关键词查询搜索建议列表
5.2.5 渲染搜索建议列表
5.3 搜索历史
5.3.1 渲染搜索历史记录的基本结构
5.3.2 实现搜索建议和搜索历史的按需展示
5.3.3 将搜索关键词存入 historyList
5.3.4 解决关键字前后顺序的问题
5.3.5 解决关键词重复的问题
5.3.6 一行代码解决上述保存关键字顺序和重复的问题
5.3.6 将搜索历史记录持久化存储到本地
5.3.7 清空搜索历史记录
5.3.8 点击搜索历史跳转到商品列表页面
5.4 分支的合并与提交
6. 商品列表
6.0 创建 goodslist 分支
6.1 定义请求参数对象
6.2 获取商品列表数据
6.3 渲染商品列表结构
6.4 把商品 item 项封装为自定义组件
6.5 使用过滤器处理价格
6.6 上拉加载更多
6.6.1 初步实现上拉加载更多
6.6.2 通过节流阀防止发起额外的请求
6.6.3 判断数据是否加载完毕
6.7 下拉刷新
6.8 点击商品 item 项跳转到详情页面
6.9 分支的合并与提交
7. 商品详情
7.0 创建 goodsdetail 分支
7.1 添加商品详情页的编译模式
7.2 获取商品详情数据
7.3 渲染商品详情页的 UI 结构
7.3.1 渲染轮播图区域
7.3.2 实现轮播图预览效果
7.3.3 渲染商品信息区域
7.3.4 渲染商品详情信息
7.3.5 解决商品价格闪烁的问题
7.4 渲染详情页底部的商品导航区域
7.4.1 渲染商品导航区域的 UI 结构
7.4.2 点击跳转到购物车页面
7.5 分支的合并与提交

#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)