微信小程序黑马优购总结：

⾸先拿到项⽬后做好项⽬搭建
(1)搭建之前⾸先要分析整个项⽬的剧本组成是否有源码或者是效果图（⿊马优购有源码和效果图 和请求的接⼝⽂档）
(2)在源码或者效果图上分析页⾯的组成以及效果的展⽰页⾯跳转等
(3)在以上准备⼯作完成之后就要利⽤微信开发者⼯具进⾏开发

 1.⾸先打开项⽬⽂件找到app.json中创建该项⽬需要的⽂件

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

 3.底部tabbar配好路由可以跳不同的页⾯

4.接着就可以写⾸页的布局以及功能的实现（index页面首页）

首页里面分为一下步骤：

1.搜索功能

2.轮播图

我们在呢个微信开发文档里面复制视图容器里面有一个swiper这里面有一个轮播图代码 我们进行复制

请求数据并将后台返回来的数据渲染到页面上即可

 

3.导航栏区域

我们在want里面找到呢个导航组件找到第一个grid宫格进行复制

然后还是一样的 请求数据 后台返回来 我们进行渲染就可以了 就可以实现出效果

4.楼层效果

(楼层这一块需要渲染两层)

我们先给一个div先把这个名字给渲染出来  然后再通过want里面的找到呢个layout进行布局渲染图片

5.分类页面cate

分类这一块也是分的三大块 ，分别是搜索框和左侧菜单栏渲染以及右侧的内容区域。

我们可以看到刚刚的首页也有搜索框 我们就可以把搜索框拆成一个组件。这样我们就可以少写一个组件。

第一步 我们需要请求接口，将后台返回来的数据渲染到页面上 来完成分类的渲染。右侧数据来渲染我所有数据的children属性。

第二部 右侧的数据，根据效果图 我们可以看到当我们点击左侧区域的时候右侧的数据会跟着我们变化而变化。

 渲染的时候 v-for不能重复了 起的名字要不一样 这样会出现报错 

当我们点击左侧标签文字的时候 会进行切换 当我们点击那个就会对应到那个图片

我们要绑定一个change属性来进行切换

 当我们点击图片的时候跳转到商品列表里面 我们要进行传值 传cid

@click="goList(ite1.cat_id)"

 这样就可以跳转商品列表里面了

6.商品列表页面list

商品列表页面就是 我们点击分类的时候 传过来的数据  然后我们在接受这个cid 

需要在呢个onLoad生命周期函数里面 一个页面只能调用一次 页面加载的时候触发 可以在onLoad

的参数中获取打开当前页面的路径参数

 把这些传过来

 传过来以后我们在want里面复制呢个卡片 把这些请求的数据给渲染出来就可以了

接口里面：

这样当我们点击分类图片的时候 他的每一个数据都会到商品列表里面了

6.1排序：

商品列表里面我们还可以进行价格排序 从小到大 从大到小 他的原理就是说：

我们在页面写两个button按钮都给他们绑定点击事件

就说我这个数组里面所有的数组找到呢个价格 进行sort排序 a-b b-a

 当我们点击列表的时候 跳转到商品详情页面 我们需要进行传goods_id

 @tap="goDetail(item.goods_id)"

点击图片给他绑定事件 

使用navigateTo进行跳转

 

6.2.下拉刷新上拉加载

下拉刷新:

我需要将我获取的列表重新赋值给一个值&#