uni-app 基础
创建 uni-app 项目方式
uni-app 支持两种方式创建项目：
-
通过 HBuilderX 创建
-
通过命令行创建（推荐）
HBuilderX 创建 uni-app 项目
创建步骤
1.下载安装 HbuilderX 编辑器
...大约 4 分钟
小兔鲜儿 - 项目起步
项目架构
项目架构图
拉取项目模板代码
项目模板包含：目录结构，项目素材，代码风格。
模板地址
git clone http://git.itcast.cn/heimaqianduan/erabbit-uni-app-vue3-ts.git heima-shop
...大约 4 分钟
小兔鲜儿 - 首页模块
涉及知识点：组件通信、组件自动导入、数据渲染、触底分页加载、下拉刷新等。
自定义导航栏
参考效果：自定义导航栏的样式需要适配不同的机型。
...大约 16 分钟
小兔鲜儿 - 推荐模块
主要实现 Tabs 交互、多 Tabs 列表分页加载数据。
动态获取数据
参考效果
推荐模块的布局结构是相同的，因此我们可以复用相同的页面及交互，只是所展示的数据不同。
...大约 8 分钟
小兔鲜儿 - 分类模块
用户点击左菜单的一级分类，切换右侧对应的二级分类和商品。
准备工作
参考效果
商品分类页中的广告位，可复用之前定义的轮播图组件 XtxSwiper。
...大约 5 分钟
小兔鲜儿 - 商品详情(登录前)
商品详情页分为两部分讲解：
- 登录前：展示商品信息，轮播图交互（当前模块）
- 登录后：加入购物车，立即购买（SKU 模块）
准备工作
参考效果
用户点击商品列表，跳转到对应的商品详情页。
...大约 14 分钟
小兔鲜儿 - 微信登录
涉及知识点：微信授权登录，文件上传，Store 状态管理等。
微信登录
微信小程序的开放能力，允许开发者获取微信用户的基本信息（昵称、性别、手机号码等），开发者常用来实现注册/登录的功能。
登录方式
常见登录/注册方式：
- 用户名/手机号 + 密码
- 手机号 + 验证码
- 授权登录
实际开发过程中常常需要实现以上的一种或多种方式，我们的项目主要实现授权登录。
...大约 6 分钟
小兔鲜儿 - 用户模块
在用户登录/注册成功后，展示会员信息，更新会员信息。
会员中心页(我的)
主要实现两部分业务：
- 渲染当前登录会员的昵称和头像，从 Store 中获取。
- 猜你喜欢分页加载，可封装成组合式函数实现复用逻辑。
...大约 13 分钟
小兔鲜儿 - 地址模块
- 能够获取不同类型的表单数据
- 能够动态设置导航栏的标题
- 能够使用 uni-ui 组件库的组件
- 能够完成收货地址的增删改查的功能
准备工作
静态结构
地址模块共两个页面：地址管理页，地址表单页 ，划分到会员分包中。
...大约 12 分钟