1、开发工具介绍安装1、安装scss/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结构

<style lang="scss">

swiper {

height: 330rpx;

.swiperItem image {

width: 100%;

}

}

</style>

3、实现点击轮播图跳转到商品详情页6、全局封装一个提示方法7、首页-分类导航区域开发1、获取分类导航数据2、渲染分类导航UI3、实现点击分类导航可跳转响应页面8、首页-楼层区域的开发1、获取楼层的数据2、渲染楼层UI1、楼层标题和图片UI3、点击楼层图片跳转到列表页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结构

其中<uni-icons>使用了uniapp提供的组件

2、页面引用搜索组件1、页面引用组件

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

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

效果图如下：

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

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

2、跳转到搜索页面

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

3、搜索页面开发

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

4、搜索输入框加防抖处理5、输入搜索时自动带出搜索建议1、根据输入获取对应的搜索建议数据

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

2、搜索建议数据渲染UI3、点击搜索建议跳转到详情4、搜索历史数据展示

保存每次的搜索关键词

5、将搜索历史数据持久化存储到本地6、清空搜索历史记录操作7、点击搜索历史跳转到列表页面11 、列表页面开发1、列表数据请求参数的定义2、获取列表数据3、渲染商品列表UI结构4、商品价格通过过滤器保留两位小数5、上拉加载功能6、设置节流阀（防止频繁上拉）7、下拉刷新的功能8、点击商品跳转到详情页面9、封装商品列表子组件（组件属性传递）

创建组件

新版本为uni-modules目录

12、详情页面开发1、获取详情数据2、渲染详情页UI1、轮播图区域2、实现轮播图预览

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

3、商品信息区域

商品价格闪烁问题

4、商品图文

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

3、商品购物车导航区域1、渲染导航区域UI2、跳转到购物车页面