项目6 美好时光视频相册制作.pptxVIP

项目6美好时光视频相册制作;素质目标：

?坚持正确舆论,提升文化素养与思想道德。

?遵循网络规定,维护网络秩序与安全。

?弘扬传统文化,培育优秀网民素质。

?倡导网络文明,提高网络素养。

?负责任使用网络环境,共筑网络空间安全。;;6.1知识准备; 在本项目中将会完成一个美好时光视频相册页面的开发，该页面采用视频的方式来记录旅行中的难忘时光。在本小程序中播放视频的方式有两种，一种使用video组件，一种使用腾讯视频插件，在知识准备阶段先对这两种方式进行讲解。

美好时光视频相册页面结构如图所示：;6.1.1video组件;6.1.1video组件;6.1.1video组件;6.1.1video组件;6.1.2腾讯视频插件;6.1.2腾讯视频插件;6.1.2腾讯视频插件;6.2项目实施;任务1设计页面结构及样式;任务1设计页面结构及样式;任务1设计页面结构及样式;任务1设计页面结构及样式;任务1设计页面结构及样式;1.初始化数据

首先将需要展现在视频播放列表中的视频数据进行初始化，为了降低代码的耦合度，我们将视频数据封装到单独的js文件中再通过模块引用进行数据初始化。在项目根目录创建文件夹data，并在data下新建videodata.js文件，在这个文件中添加如下代码：

varvideoLists=[

//视频1

{

create_time:2022-2-2219:20:30,

title:风雨廊桥,

videoUrl::3000/1.mp4

},{

create_time:2019-8-1308:20:20,

title:美丽的禾木云海,

videoUrl::3000/2.mp4

},{;上述代码中，视频列表videoLists可以被看成小程序的独立模块，并用module.exports向外暴露接口。打开项目的pages/index/index.js文件，在首行添加引用模块方法，并在页面生命周期的onLoad()函数中进行数据更新方法的编写，代码如下所示：

//index.js

vardataObj=require(../../data/videodata.js)//引用的文件务必带js后缀，且不可使用绝对路径

Page({

onLoad:function()

{

//添加更新数据方法

this.setData({

videoLists:dataObj.videoLists

})

}

})

;2.更新播放列表

修改pages/index/index.wxml页面中区域3播放列表的代码，添加wx:for属性，将之前编写的一行列表显示展示为循???展示列表。具体修改代码如下所示：

……

!--区域3:视频列表--

viewclass=videoList

viewclass=videoRowwx:for={{videoLists}}wx:for-item=itemwx:key=index

imagesrc=/images/bofang.svg/

text{{item.title}}/text

/view

/view

;3.播放视频

修改区域3视频列表部分页面结构wxml部分代码，为第二层容器view组件添加属性data-url以及bindtap。用于记录每行视频对应的播放地址以及出发点击事件。其次需要为区域1的视频组件部分添加属性src用于更新选择的视频。;4.发送弹幕

实现了视频播放后，我们来添加发送弹幕的功能。在区域1的视频播放部分的video组件中添加enable-danmu和danmu-btn属性，用于运行发送弹幕和显示“发送弹幕”按钮，同时在区域2发送弹幕部分为button组件添加bindtap事件用于发送弹幕。;拓展训练;微信小程序视频录播系统;项目小结