项目介绍
1、该项目可实现从接口加载视频分类,轮播图图片,视频各信息。
2、点击某视频可以跳转到视频播放页面,包括视频播放模块、视频推荐模块、评论模块。
页面效果如下
项目主要功能实现
首页页面加载
首页的页面有公共头部、导航栏、轮播图、推荐视频四部分组成。
公共头部是自定义好的,封装好直接导入。
导航栏、轮播图、推荐视频模块是通过调用API获取,然后再根据返回的信息生成对应的模块。
下面是获取导航栏的数据,其他功能与这个相似
// 获取首页导航数据getNavList() {let that = this;wx.request({url: 'https://www.fastmock.site/mock/c8b94bc7b5f6687ccfe99d2c4132803f/bi/navList',success(res) {// console.log(res);if(res.data.code === 0) {that.setData({navList: res.data.data.navList})}// console.log(res.data.data.navList);}})},
视频详情页面加载
该页面有三部分组成公共头部、视频部分、视频推荐部分,当然获取数据的方式还是调用接口。
egg:视频部分有一点不尽人意,现在的接口只能返回前四个视频的数据,我将后面的视频都用了同一个视频url代替,所以最后呈现的除了前四个视频不同,其他视频内容是相同的。大概是这个样子。
代码部分
代码我放在了GitHub上,欢迎浏览:GitHub地址