微信小程序（七）

微信小程序复习笔记

57项目实战-目录和页面结构划分

移动端的页面结构都是按照底部的tabBar划分的
页面生成之后分别要对应一个tarbBarItem
图标的路径可以是相对路径也可以是绝对路径

接下来想开发哪个页面就去那个页面里面进行开发就可以了

55 首页里面做轮播图和推荐数据请求

所有页面的导航都需要做一个修改
先做整体一样的那些设置再APP.json里面就可以设置
先做首页导航的修改


如上 对网络请求做一个封装 接下来就使用它来发送网络请求
现在做的是首页 所以要去首页里面找一个生命周期来发送网络请求 希望当前页面创建完之后就立马发送网络请求
照着老师视频打 和他的数据就一样

如下东西 如果整个项目都是一样的话 可以单独搞一个config.js文件



像下面这种导出方式的话别人是可以给导出的自己起名字的

如果项目所有地方的baseURL都一样的话

那意味着别人到时候都不需要传前缀了

报错 主要是首页

此时面向的是home.js如果到时候要做分类界面的话就面向
就相当于又做了一个分层处理


上面打印出来的这个数据最终是要 在界面里面做展示
要在home.wml里面使用这个数据
所以把这两个数据放在data里面
先定义

56轮播图效果的实现

可以滚动但是图片宽高比例而有问题需要设置一下
mode="widthFix"这个是根据图片的大小显示图片正确的一个比例


想让图片采取滑动的话
加了circular就一直有轮播的效果
让它自动滚动的话还有一个autoplay跟circular一样也默认为false
可以设置间隔时间 interval=‘3000’>



希望指示器的颜色与主题保持一致

改的应该是选中的那个颜色

把这些代码抽成一个组件 放到下面这个组件或者components这个公共组件 看它是私用的还是公用的

这里面放首页里面所有的子组件

所以轮播图推荐放到componengs里面去 首页和详情页里面都可以使用

那么首页想用轮播图 就要先在首页json文件里面做一个注册
然后就可以用了 传历史数据

57项目实践-推荐数据的展示

细节 所有的轮播图都有一个默认的高度
小程序有给swiper设置默认高度150px
可以自己把swiper找到重新设置

·

然后对它做一个flex布局


后面就没有东西了 图片太大了 再调整一下

距离顶部太近



如上不希望文字跑上去 那么干脆用view 可以独占一行

觉得文字距离图片有点近的话

上面这根线可以整体给它搞一个border-bottom底部边框 到时候看起来就有一个分割线
也把它抽成一坨单独的组件
这个东西在其它界面就用不到


把样式也放过去


然后在首页里面对它进行注册

要注意文件放的位置和层级关系

58本周流行的展示

有一个bug 如果从iphone换到iphone屏幕上不适配 轮播图和本周流行都没有完全占用宽度

高度之前调整过 希望整个宽度占据整个屏幕的宽度
写样式

把本周流行抽成组件

本周流行的样式还没有做一个抽取 所以现在home中写


把样式也拿过来

回到首页json中注册引用

59项目实战tab-control组件

再把下面这个工具栏加上去

老师把它封装的直接拿过来的

60项目实战首页商品数据的请求

把之前封装过的文件硬盘打开复制过来
然后在首页里面对它进行一个使用
先在首页json文件中对它进行一个注册

在home中使用

tab-control要想展示数据得传入一些东西
在如下地方初始化数据是个不好的习惯
这样修改数据的时候直接在上面地方修改

tab-control在内部点击的时候它会发出去一个事件
当外部想要监听的时候只需要监听如下就可以了
回到首页对那个东西做一个监听

注意下面这三个都要一致 不然获取不到东西


如下 一致了才能打印出结果 才能获得结果


这样子点击哪个下面就展示哪个的数据

从服务器里面请求过来商品数据 把商品进行一个相关展示
1数据模型设计 请求到数据在下面进行存储就可以了

2 发送网络请求 将数据存起来


导入函数之后接下来就是发送网络请求

在hjs中以下划线开头的函数称为私有函数 因为这个函数就在内部使用
想使用数据的话直接在上面调用那个函数就可以了

代码过多时可以如下备注

接下来在下面

导入之前那个函数就可以发送网络请求
注意接口改了

下面这里写死不好 不然得处理三个接近的函数


干脆让别人传入一个类型 根据类型处理数据

意味着想请求哪个数据直接在哪个传入就可以

还有个页码是写死的 页码没有必要让别人传进来 当有类型时 可以根据类型 如下那个地方有记录页码

获取页码
然后把页码给它传过去


请求到了三个数据

把下面流行的数据赛到流行 把新款的数据赛到新款

ES6语法在数组前面加…他会自动将数组展开
但是上面那个样子 界面并不会发生刷新

想办法用oldList 把下面那个数组替换掉


注释掉其它两个只有new里面才有数据

已经请求了三条数据放进来了 下一次请求的时候页码都需要加1
所以要再到下面这个地方拿对应类型的页码


我的page还是0 没有请求到页数

typekey和pagekey那里要用模板字符串

61 商品数据标题展示

搞一个变量记录当前类型

把类型抽到一个常量里面


这样子点击其它的类型 数据就发生改变了

62：自定义goods-item

如下效果


这样子就跟刚才效果一样
已经抽成了一个独立组件现在给它写相关的杨式布局就ok了
接下来做下面的文字



希望在界面上一行显示2个item

弄那个搜藏小图标一般会用为元素：：before