1、开发工具介绍安装

1、安装scss/sass编译插件

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

2、新建项目

1、目录结构介绍

新版本的components组件目录变成了uni_modules

3、项目运行到微信开发者工具

1、填写自己的APPID

点击 manifest.json

2、配置微信开发者工具安装路径

3、开启微信开发者工具的服务端口

4、将项目运行到微信开发者工具

之后只要在hbuilder里修改内容就可以在微信开发者工具中看到效果,

实时开发的代码如果不生效，需要关闭小程序开发者工具，在重新运行下（忍不住吐槽，运行了好几次才可以）

4、项目效果图介绍

1、首页

2、分类页面

5、代码开发

1、tabBar页面开发

1、创建tabBar页面

2、设置tabBar效果

static目录下需要提前添加上自己的tabBar相关的图片，可将index页面删除，我们不需要

2、导航窗口开发

3、网络请求开发

1、安装第三方网络请求包

由于使用npm，所以必须执行下npm init -y，然后再执行npm install @escook/request-miniprogram

4、配置小程序的分包

5、首页-轮播图开发

1、获取轮播图的数据

2、渲染轮播图的UI结构

• 在home文件中利用快捷键uswiper写如下轮播图UI结构

• 美化UI结构

3、实现点击轮播图跳转到商品详情页

6、全局封装一个提示方法

7、首页-分类导航区域开发

1、获取分类导航数据

2、渲染分类导航UI

3、实现点击分类导航可跳转响应页面

8、首页-楼层区域的开发

1、获取楼层的数据

2、渲染楼层UI

1、楼层标题和图片UI

3、点击楼层图片跳转到列表页

1、创建列表页

2、实现点击图片跳转列表页

9、分类页面

1、定义分类页面结构

调用uniapp的方法获取当前设备的可用高度

如下将左右滚动区域的高度设置成当前设备的可用高度wh

添加样式

2、获取分类数据

定义一个active变量用于判断点击了哪个的样式

数据结构大致如下：

3、渲染分类数据到分类页面

1、左侧一级分类

实现点击后active

2、右侧二级分类

3、右侧三级分类

4、点击一级分类右侧默认定位到最顶端

scrollTop代表离顶部菜单的距离，0或1用户几乎看不到区别，这样变化才能正常刷新，否则菜单会保持在上一次位置。

5、点击三级分类跳转到详情页面

10、搜索组件使用

uniapp自己也提供了一些组件，可以直接使用，代码中如下

官网中也有介绍如何使用

1、自定义搜索组件

新版本的components组件目录变成了uni_modules

1、定义组件UI结构

其中使用了uniapp提供的组件

2、页面引用搜索组件

1、页面引用组件

我们在如home页面直接用组件名字my-search使用即可

2、将页面中的组件设置吸顶效果

效果图如下：

3、点击组件跳转对应的搜索页面

1、新建搜索页面

组件里定义点击方法，并将事件使用$emit 抛出

2、跳转到搜索页面

使用组件的页面接受组件抛出的事件，触发自己的方法gotoSearch,跳转到搜索页面

3、搜索页面开发

这里使用了uniapp的官方组件uni-search-bar，如果需要修改官方组件样式到对应目录里修改即可，新版目录为uni_modules

4、搜索输入框加防抖处理

5、输入搜索时自动带出搜索建议

1、根据输入获取对应的搜索建议数据

搜索建议返回的数据，可以类似如下结构

2、搜索建议数据渲染UI

3、点击搜索建议跳转到详情

4、搜索历史数据展示

保存每次的搜索关键词

5、将搜索历史数据持久化存储到本地

6、清空搜索历史记录操作

7、点击搜索历史跳转到列表页面

11 、列表页面开发

1、列表数据请求参数的定义

2、获取列表数据

3、渲染商品列表UI结构

4、商品价格通过过滤器保留两位小数

5、上拉加载功能

6、设置节流阀（防止频繁上拉）

7、下拉刷新的功能

8、点击商品跳转到详情页面

9、封装商品列表子组件（组件属性传递）

创建组件

新版本为uni-modules目录

12、详情页面开发

1、获取详情数据

2、渲染详情页UI

1、轮播图区域

2、实现轮播图预览

注意：预览图片功能不能对本地图片预览，只能http链接

3、商品信息区域

商品价格闪烁问题

4、商品图文

目前没后台接口，暂时没提供goods_introduce

3、商品购物车导航区域

1、渲染导航区域UI

2、跳转到购物车页面