文章目录
- 搭建 tabbar
- 页面路径
- 首页模块
- tabs组件
- 需求
- 推荐组件
- 精选大图
- 月份
- 热门
- 分类模块
- 需求
- 分类详情
- 业务
- 首页模块
- 专辑模块
- 需求
- 专辑详情
- 精美视频
- 需求
- 视频详情
- 需求
- 图片详情
- 需求
搭建 tabbar
页面路径
| 页面名称 | 路径 |
|---|---|
| 首页 | index |
| 横屏 | horizontal |
| 精美视频 | video |
| 搜索 | search |
| 我的 | mine |
首页模块
- es6的 const 、 let 、 var
- 箭头函数的关系
- 数组的拼接(合并)
tabs组件
需求
- 实现一个自定义组件 tabs
- 功能类似之前上课 封装即可
推荐组件
精选大图
- 使用小程序内置的发送异步的代码请求获取数据
- 循环显示到页面上即可
月份
- 使用小程序内置的发送异步的代码请求获取数据
- 简单处理 时间格式 渲染到页面上
热门
- 发送异步请求获取数据渲染页面
- 分页功能
- 使用 scroll-view 组件实现页面的部分滚动
- 使用 css 的 calc 来计算 容器高度
- 使用节流阀来控制分页请求
- 使用 wx-showLoadding 和 wx-showToast 来页面友好显示
分类模块
需求
- 发送请求获取分类数据
- 实现数据的动态渲染
- 使用scroll-view 标签实现页面的滚动
- 点击 分类图片 跳转到 分类详情页面
根据分类图片的id 进行跳转
<navigator url="/pages/categoryDetail/categoryDetail?id=xxxxxxxxxxxxxxxx" >
</navigator>
分类详情
业务
- 引用自定义tabs组件
- 获取url上的id
- 拼接请求参数, 发送请求 获取数据
- 实现分页加载
- 点击 tabs 标题时,重新发送 请求获取对应的数据
首页模块
专辑模块
需求
- 发送请求,获取专辑数据,完成页面渲染
- 使用 scroll-view 实现分页
- 点击进入 专辑详情页面
- 携带当前专辑数据,存放到全局中,方便在专辑详情页面获取
- 全局数据``
getAPP().globalData.album=album;
专辑详情
- 获取全局数据中专辑信息
- 根据专辑信息获取专辑图册
- 实现顶部轮播图 swiper
- 实现页面滚动分页 scroll-view
精美视频
需求
- 发送请求 获取数据页面渲染
- 点击图片 ,进入到视频详情页面
- 跳转页面的同时 ,使用 小程序中内置的全局数据共享方式 getApp().globalData进行数据传递
视频详情
需求
- 获取上个页面传递过来的 视频数据
- 在 getApp() 中获取
- 渲染背景图片和视频
- 使用 css 的 filter 实现滤镜效果
- 使用 video 标签实现视频播放
- 绑定 下载 点击事件
- 使用 wx.downloadFile 将服务器上的视频下载到缓存中
- 使用 wx.saveVideoToPhotosAlbum 将 缓存中的视频下载到 手机上
图片详情
需求
- 给所有的图片的父容器都替换成 navigator 标签
- 设置页面的跳转路径为 /pages/picture/picture
- 同时设置携带的参数为 图片的路径
- 绑定点击事件 实现图片的点击下载
- 使用和下载视频类似的功能即可
