微信小程序黑马优购讲解

• 1.准备工作
• • 1.首先拿到项目后做好项目搭建
  • 2.搭建基础页面
  • 分类页面
  • 列表页内容

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可以获取当前点击的对应的数据
然后遍历数据渲染到列表页