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结构
<style lang="scss">
swiper {
height: 330rpx;
.swiperItem image {
width: 100%;
}
}
</style>
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结构
其中<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、搜索建议数据渲染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
