移动开发作业实验3

最新推荐文章于 2024-10-14 21:20:01 发布

shineahead

最新推荐文章于 2024-10-14 21:20:01 发布

阅读量93

点赞数 1

文章标签：微信小程序

本文链接：https://blog.csdn.net/shineahead/article/details/132502525

版权

一、实验目标

1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果

二、实验步骤

页面配置

创建项目文件：类似于前两个实验，把模板自动生成的一些配置文件给删除掉，这里不过多赘述了
创建其他文件：本项目还需要一个文件及用于存放播放图标，在这里命名为images

视图设计

导航栏设计

在这里插入图片描述

页面设计
1. 区域1：视频播放器，用于播放指定的视频
2. 区域2：弹幕发送区域，包含弹幕输入框和发送按钮
3. 区域3：视频列表，垂直排列多个视频标题，点击不同的标题就放对应的视频内容
计划使用的组件
1. 区域1：video组件
2. 区域2：view组件，并定义class=‘danmuArea’
3. 区域2内部：input和button组件
4. 区域3：view组件，并定义class=‘videoList’
5. 区域3内单元行：view组件，并定义class=‘videoBar’
6. 区域3单元行内：每行1个image组件用于显示播放图标，1个text组件用于显示视频标题
视频组件设计：区域1需要使用video组件来实现一个视频播放器，添加了代码之后的效果

在这里插入图片描述

弹幕区域设计：区域2需要使用view组件实现一个单行区域，包括文本输入框和发送按钮，添加代码并描绘样式之后的效果如下
视频列表设计：区域3需要使用view组件实现一个可以多扩展的多行区域，每行包含一个播放图标和一个视频标题文本。当前先设计第一行效果，后续使用wx:for属性循环添加全部内容

逻辑实现

更新播放列表：在区域3对view组件添加wx:for属性，改写为循环展示列表，然后在JS文件的data属性中追加list数组，用于存放视频信息。编写后的视频列表可以正确展示，如下

在这里插入图片描述

点击播放视频：在区域3对view组件添加data-url属性和bindtap属性，其中data-url用于记录每行视频对应的播放地址，bindtap用于出发点击事件。然后在JS文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止，成功播放视频。

但文档在这里有一个小问题：没有给video绑定src属性，但又在JS里面设置了src属性，所以这里需要手动补上

在这里插入图片描述

发送弹幕：在区域1对video组件添加enable-danmu和danmu-btn按钮，用于允许发送弹幕和显示“发送弹幕”按钮。然后在区域2的文本输入框追加bindinput属性，用于获取弹幕文本内容；为按钮增加bindtap属性，用于触发点击事件，成功发送红色的弹幕

在这里插入图片描述

如果希望发送随机颜色的弹幕内容，可以在JS中追加自定义函数getRandomColor，成功发送了彩色的弹幕

在这里插入图片描述

视频自动播放：通过查阅文档可知，在video组件中有一个属性autoplay，通过它便可以成功设置视频的自动播放效果

在这里插入图片描述

三、程序运行结果

发送红色弹幕

在这里插入图片描述

发送彩色弹幕

在这里插入图片描述

视频自动播放

在这里插入图片描述

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

4.1 实验过程中所遇到的问题

在实验中遇到了video的src属性缺失的问题
解决：首先文档中所给的代码并不多，仔细阅读之后发现在JS代码中设置了src属性但没有使用，故立即想到把该src属性添加到video的路由中去，这样便能成功访问视频的地址
实验要求实现视频的自动播放但文档中未提及
解决：通过查阅微信API文档，可以看到video组件具有一个autoplay属性，将其设置为true即可
在实验中遇到了文档所给函数的写法报错问题
解决：更换了函数的编写方法，改为引号赋值写法

在这里插入图片描述

收获和体会

通过这次移动开发的实验3，对于小程序的理解更加深入了。首先，了解了如何在JS代码中获取input输入框的值，以及如何在小程序中播放视频等等。此外，还学习到了页面的布局设计方式，怎么设计才能使得页面呈现出较美观的形式，并且在这个过程中还需要结合wxss的样式进行编写。事实上，wxss的样式与css极为相似，所以理解起来并不困难。