小程序优购商城项目讲解

1.新建⼩程序项⽬
填入自己的appid
搭建⽬录结构
styles 存放公共样式 components 存放组件 lib 存放第三⽅库 utils ⾃⼰的帮助库 request ⾃⼰的接⼝帮助库
2.在app.json中实现路由导航，跳转详情

3.引⼊字体图标 1. 打开阿⾥巴巴字体图标 ⽹站 2. 选择的图标 3. 添加⾄项⽬ 4. 下载到本地 5. 将样式⽂件 由 css 修改为 wxss 6. 在app.app.wxss中引⼊

@import "./styles/iconfont.wxss";

4.首先要完成首页的基本布局
1.首页有搜索框当点击的时候跳转到搜索也，我们可以把搜索框拆分出去方便后期使用，还有轮播图也拆分出去也能用到，不用在第二次布局节省了很多时间。
2.分类导航当点击分类，秒杀拍的时候会跳转到分类页，下面还有楼层获取接口渲染楼层，
3.使用tabbar实现底部导航当点击底部tabbar的时候会跳转到对应的页面，

2.当点击分类导航跳转至分类页，分类页也一样把拆分的组件拿过来引入到分类页，下面的布局分为左边选项卡，右边商品信息。当点击左边选项卡片的时候，右边会出现对应的商品，左边选项卡片和右边的商品信息都有一个scroll–view 组件，会实现上下滚动的效果，当鼠标移动到左边选项卡片会滑动滚轮的时候会上下滚动，右边的也一样。

3.当点击右边的商品信息的时候会跳转至商品的列表页面，头部布局seach引入的组件，头部的选项卡片当点击的时候选项卡片下面会出现对应的内容，2.渲染出商品图片、商品信息、商品的价格，3.用户上滑页面 滚动条触底 开始加载下一页数据，找到滚动条触底事件 小程序官方开发文档寻找
4.判断还有没有下一页数据，获取到总页数 只有总条数总页数 = Math.ceil(总条数 / 页容量 pagesize总页数 = Math.ceil( 23 / 10 ) = 3
5 获取到当前的页码 pagenum
6判断一下 当前的页码是否大于等于 总页数 表示 没有下一页数据
7假如没有下一页数据 弹出一个提示
8假如还有下一页数据 来加载下一页数据9. 当前的页码 ++ 10.重新发送请求
11. 数据请求回来 要对data中的数组 进行 拼接 而不是全部替换！！！
2 .下拉刷新页面
1 触发下拉刷新事件 需要在页面的json文件中开启一个配置项
找到 触发下拉刷新的事件
2 重置 数据 数组
3 重置页码 设置为1
4 重新发送请求
5 数据请求回来 需要手动的关闭 等待效果

4.当点击商品卡片的时候会跳转至商品详情页
1.实现头部的swiper 轮播图的布局，和对应的商品价格，以及对应的商品信息，点击轮播图 预览大图给轮播图绑定点击事件调用小程序的api previewImage
先构造要预览的图片数组 ，接收传递过来的url
2.商品收藏
1 页面onShow的时候 加载缓存中的商品收藏的数据
2 判断当前商品是不是被收藏
1 是 改变页面的图标
3 点击商品收藏按钮
1 判断该商品是否存在于缓存数组中
2 已经存在 把该商品删除
3 没有存在 把商品添加到收藏数组中 存入到缓存中即可
3.渲染图文详情，接口会出现对应内容，
4.当点击客服和分享的时候会出现模拟进入客服会话，和分享当前页的商品信息，可以在小程序的文档，组件中的button中找到对应内容插入进去就可以 。
4.点击 加入购物车
1 先绑定点击事件
2 获取缓存中的购物车数据 数组格式
3 先判断 当前的商品是否已经存在于 购物车
4 已经存在 修改商品数据 执行购物车数量++ 重新把购物车数组 填充回缓存中
5 不存在于购物车的数组中 直接给购物车数组添加一个新元素 新元素 带上 购买数量属性 num 重新把购物车数组 填充回缓存中
6 弹出提示，商品加入成功
5.当点击购物车图标的时候会跳转至购物车页面