微信小程序黑马优购讲解

---

1.准备工作

1.首先拿到项目后做好项目搭建

(1)搭建之前首先要分析整个项目的剧本组成是否有源码或者是效果图（黑马优购有源码和效果图 和请求的接口文档）
(2)在源码或者效果图上分析页面的组成以及效果的展示页面跳转等
(3)在以上准备工作完成之后就要利用微信开发者工具进行开发

2.搭建基础页面

1.首先打开项目文件找到app.json中创建该项目需要的文件

2.在app.json中配置底部导航实现底部基本页面的跳转

3.底部tabbar配好路由可以跳不同的页面
接着就可以写首页的布局以及功能的实现
在请求数据时用的是封装的request请求
在根目录下创建http文件里面包含fetch.js http.js 和api.js在这个文件中来封装请求的接口
api.js

fetch.js

http.js

采用封装的方法可以处理项目在开发过程中出现一致的功能或者效果是可以用这种方式来提高开发效率

接着就可以通过项目的api文档来获取到接口请求过来的数据
首页的轮播图，nav导航，以及下面的楼层都是根据接口地址来获取所需要的所有数据最后渲染到页面上，可以采用组件化开发思想利用组件在首页注册引入。

分类页面

1.商品的分类页面是在首页给中间导航绑定点击事件然后在首页的js文件下写跳转的路由 这里用的是微信小程序文档的方法进行页面跳转

2.在分类页面，根据api接口文档在封装好的http文件中请求分类页面需要的的数据分类页面顶部的搜索按钮可以根据封装的直接引入，下面分类数据请求接口左侧的侧导航与右边的商品相当于竖向的tab切换
可以根据左侧对应的下标来找到对用的商品

列表页内容

1.通过在商品页面右侧的商品设置点击事件根据绑定的自定义是属性这样可以根据唯一的商品goods_id找到对应的商品列表数据
代码如下：

通过点击事件跳转到商品列表页（这里注意跳转路由需要传参就是商品的当前id）

这样可以实现到列表页一个跳转，在列表页根据传的参数id可以获取当前点击的对应的数据
然后遍历数据渲染到列表页

这里有部分功能的实现是上拉加载和下拉加刷新的功能实现
上拉加载下拉刷新

详情页面

跳转详情页也是根据配置详情页的接口这里需要商品的id根据id来获取整个商品的详情数据 在根据接口对页面进行渲染
代码如下：
在详情页面可以根据商品id来渲染页面
在详情页有加入收藏、分享、客服的功能 加入购物车 ：是根据效果来定义一个需要的数组 用一个数组来接收，给点击购物车绑定一个点击事件 当点击后将数据保存到数组里面并保存到本地存储里面，这样的话可以让数据不丢失 通过wx.setStorageSync 方法将数据保存 取的话可以使用wx.getStorageSync 方法获取本地存储的数据
这里要注意 添加购物车要判断商品id是否一致，当id一致时就不会往数组里面添加，只会增加对应的商品数量

handleCartAdd() {
   
    console.log(this.data.data);
    let k = false;
    // 判重复
    let price = this.data.data.goods_price;
    let image = this.data.data.goods_small_logo;
    let flag = false;
    // 复选框的状态
    let num =