微信小程序开发教程4（unitapp部分）

　　1、开发工具介绍安装
　　1、安装scsssass编译插件
　　https：ext。dcloud。net。cnplugin？namecompilenodesass
　　2、新建项目
　　1、目录结构介绍
　　新版本的components组件目录变成了unimodules3、项目运行到微信开发者工具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，所以必须执行下npminity，然后再执行npminstallescookrequestminiprogram
　　4、配置小程序的分包
　　5、首页轮播图开发
　　1、获取轮播图的数据
　　2、渲染轮播图的UI结构在home文件中利用快捷键uswiper写如下轮播图UI结构
　　美化UI结构
　　3、实现点击轮播图跳转到商品详情页
　　6、全局封装一个提示方法
　　7、首页分类导航区域开发
　　1、获取分类导航数据
　　2、渲染分类导航UI
　　3、实现点击分类导航可跳转响应页面
　　8、首页楼层区域的开发
　　1、获取楼层的数据
　　2、渲染楼层UI1、楼层标题和图片UI
　　3、点击楼层图片跳转到列表页1、创建列表页
　　2、实现点击图片跳转列表页
　　9、分类页面1、定义分类页面结构
　　调用uniapp的方法获取当前设备的可用高度
　　如下将左右滚动区域的高度设置成当前设备的可用高度wh
　　添加样式
　　2、获取分类数据
　　定义一个active变量用于判断点击了哪个的样式
　　数据结构大致如下：
　　3、渲染分类数据到分类页面1、左侧一级分类
　　实现点击后active
　　2、右侧二级分类
　　3、右侧三级分类
　　4、点击一级分类右侧默认定位到最顶端
　　scrollTop代表离顶部菜单的距离，0或1用户几乎看不到区别，这样变化才能正常刷新，否则菜单会保持在上一次位置。5、点击三级分类跳转到详情页面
　　10、搜索组件使用
　　uniapp自己也提供了一些组件，可以直接使用，代码中如下
　　官网中也有介绍如何使用
　　1、自定义搜索组件
　　新版本的components组件目录变成了unimodules1、定义组件UI结构
　　其中使用了uniapp提供的组件
　　2、页面引用搜索组件1、页面引用组件
　　我们在如home页面直接用组件名字mysearch使用即可
　　2、将页面中的组件设置吸顶效果
　　效果图如下：
　　3、点击组件跳转对应的搜索页面1、新建搜索页面
　　组件里定义点击方法，并将事件使用emit抛出
　　2、跳转到搜索页面
　　使用组件的页面接受组件抛出的事件，触发自己的方法gotoSearch，跳转到搜索页面
　　3、搜索页面开发
　　这里使用了uniapp的官方组件unisearchbar，如果需要修改官方组件样式到对应目录里修改即可，新版目录为unimodules
　　4、搜索输入框加防抖处理
　　5、输入搜索时自动带出搜索建议1、根据输入获取对应的搜索建议数据
　　搜索建议返回的数据，可以类似如下结构
　　2、搜索建议数据渲染UI
　　3、点击搜索建议跳转到详情
　　4、搜索历史数据展示
　　保存每次的搜索关键词
　　5、将搜索历史数据持久化存储到本地
　　6、清空搜索历史记录操作
　　7、点击搜索历史跳转到列表页面
　　11、列表页面开发1、列表数据请求参数的定义
　　2、获取列表数据
　　3、渲染商品列表UI结构
　　4、商品价格通过过滤器保留两位小数
　　5、上拉加载功能
　　6、设置节流阀（防止频繁上拉）
　　7、下拉刷新的功能
　　8、点击商品跳转到详情页面
　　9、封装商品列表子组件（组件属性传递）
　　创建组件
　　新版本为unimodules目录
　　12、详情页面开发1、获取详情数据
　　2、渲染详情页UI1、轮播图区域
　　2、实现轮播图预览
　　注意：预览图片功能不能对本地图片预览，只能http链接3、商品信息区域
　　商品价格闪烁问题
　　4、商品图文
　　目前没后台接口，暂时没提供goodsintroduce
　　3、商品购物车导航区域1、渲染导航区域UI
　　2、跳转到购物车页面