微信小程序入门开发懂你找图小程序

搭建 tabbar

页面路径

页面名称	路径
首页	index
横屏	horizontal
精美视频	video
搜索	search
我的	mine

首页模块

1. es6的 const 、 let 、 var
2. 箭头函数的关系
3. 数组的拼接(合并)

tabs组件

需求

1. 实现一个自定义组件 tabs
2. 功能类似之前上课 封装即可

推荐组件

精选大图

1. 使用小程序内置的发送异步的代码请求获取数据
2. 循环显示到页面上即可

月份

1. 使用小程序内置的发送异步的代码请求获取数据
2. 简单处理 时间格式 渲染到页面上

热门

1. 发送异步请求获取数据渲染页面
2. 分页功能

1. 使用 scroll-view 组件实现页面的部分滚动
2. 使用 css 的 calc 来计算 容器高度
3. 使用节流阀来控制分页请求
4. 使用 wx-showLoadding 和 wx-showToast 来页面友好显示

分类模块

需求

1. 发送请求获取分类数据
2. 实现数据的动态渲染
3. 使用scroll-view 标签实现页面的滚动
4. 点击 分类图片 跳转到 分类详情页面

根据分类图片的id 进行跳转

<navigator url="/pages/categoryDetail/categoryDetail?id=xxxxxxxxxxxxxxxx" >
</navigator>

分类详情

业务

1. 引用自定义tabs组件
2. 获取url上的id
3. 拼接请求参数, 发送请求 获取数据
4. 实现分页加载
5. 点击 tabs 标题时,重新发送 请求获取对应的数据

首页模块

专辑模块

需求

1. 发送请求,获取专辑数据,完成页面渲染
2. 使用 scroll-view 实现分页
3. 点击进入 专辑详情页面

1. 携带当前专辑数据,存放到全局中,方便在专辑详情页面获取
2. 全局数据``

getAPP().globalData.album=album;

专辑详情

1. 获取全局数据中专辑信息
2. 根据专辑信息获取专辑图册
3. 实现顶部轮播图 swiper
4. 实现页面滚动分页 scroll-view

精美视频

需求

1. 发送请求 获取数据页面渲染
2. 点击图片 ,进入到视频详情页面
3. 跳转页面的同时 ,使用 小程序中内置的全局数据共享方式 getApp().globalData进行数据传递

视频详情

需求

1. 获取上个页面传递过来的 视频数据

1. 在 getApp() 中获取

2. 渲染背景图片和视频

1. 使用 css 的 filter 实现滤镜效果
2. 使用 video 标签实现视频播放

3. 绑定 下载 点击事件

1. 使用 wx.downloadFile 将服务器上的视频下载到缓存中
2. 使用 wx.saveVideoToPhotosAlbum 将 缓存中的视频下载到 手机上

图片详情

需求

1. 给所有的图片的父容器都替换成 navigator 标签

1. 设置页面的跳转路径为 /pages/picture/picture
2. 同时设置携带的参数为 图片的路径

2. 绑定点击事件 实现图片的点击下载

1. 使用和下载视频类似的功能即可