实验3：视频播放小程序

本实验来自于周文洁老师的《微信小程序开发实战》第六章。主要内容是使用小程序媒体API制作一个视频播放小程序，视频素材来自于某高校档案馆的《口述校史》栏目，它录制了多位耄耋之年的老教工回忆工作时期对大学的印象。本实验的学习目标：1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。

一、实验目标

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

二、实验步骤

页面配置

和前两次实验一样的操作，在此就不过多赘述

创建一个images文件夹存放播放图标（存放位置如下）

视图设计

主要为导航栏设计和页面设计。

导航栏设计在app.json中自定义

{"pages":["pages/index/index"],"window":{"navigationBarBackgroundColor": "#987938","navigationBarTitleText": "pilipili"},"style": "v2","sitemapLocation": "sitemap.json"
}

页面设计主要是三个区域：视频播放器，弹幕发射区域以及视频列表（详细代码见文章末尾）

区域1使用组件来实现一个视频播放器

区域2使用组件实现一个单行区域，包括文本输入框和发送按钮

区域3使用组件实现一个可扩展的多行区域

逻辑实现

逻辑实现的关键在于更新播放列表，点击播放视频以及发送弹幕

更新播放视频在区域3对组件添加wx:for属性，改写为循环展示列表

点击播放视频在区域3对组件添加data-url属性和bindtap属性，其中data-url用于记录每行视频对于的播放地址，bindtap用于触发点击事件

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

关于发送彩色弹幕，只需在js文件额外追加一个函数

function getRandomColor() {let rgb = []for(let i =0;i<3;++i){let color = Math.floor(Math.random()*256).toString(16)color = color.length == 1 ? '0' + color:colorrgb.push(color)}return '#' + rgb.join('')
}

三、程序运行结果

列出程序的最终运行结果及截图。

播放视频

发送弹幕（为随机彩色弹幕）

四、问题总结与体会

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

1.问题：渲染层错误

检查后发现有地方代码打错了。不过这篇文章对这个报错有两种解决方式

2.问题：生成错误

应该用冒号。

3.问题：关于WXML文档的runtime warning，网上找到的解决办法是尝试在控制台输入openVendor() ，清除里面的wcsc wcsc.exe 然后重启工具，但是没能解决问题

如果一定想去掉这个警告，可以在wx：for的组件属性里增加一个 wx:key=“unique”，unique请替换成数据绑定列表里的任意一个字段的字段名，但是换成wx:key="video{{index}}"仍然有这个警告

本次实验的实验文档没有什么问题，重点是要细心，不要打错东西。我有很多报错都是因为打错或者打少了才出现。

部分源码：

index.wxml

<!--index.wxml-->
<!--区域1：视频播放器-->
<video id ='myVideo'controls src="{{src}}" enable-danmu danmu-btn></video>
<!--区域2：弹幕区域-->
<view class="danmuArea"><input type="text" placeholder="发条弹幕"bindinput = "getDanmu"></input><button bindtap="sendDanmu">发送弹幕</button>
</view>
<!--区域3：视频列表-->
<view class="videoList"><view class="videoBar"wx:for='{{list}}'wx:key="video{{index}}"data-url='{{item.videoUrl}}'bindtap='playVideo'><image src="/images/play.png"></image><text>{{item.title}}</text></view>
</view>

index.wxss

/**index.wxss**/
/*视频组件样式*/
video{width: 100%;
}
/*弹幕区域样式*/
.danmuArea{display: flex;flex-direction: row;
}/*文本输入框样式*/
input{border: 1rpx solid #987938;flex-grow: 1;height: 100rpx;
}/*按键样式*/
button{color: white;background-color: #987938;
}/*视频列表区域样式*/
.videoList{width: 100%;min-height:400rpx;
}
/*单行列表区域样式*/
.videoBar{width: 95%;display: flex;flex-direction: row;border-bottom: 1rpx solid #987938;margin: 10rpx;
}
/*播放图标样式*/
image{width: 70rpx;height: 70rpx;margin: 20rpx;
}
/*文本标题样式*/
text{font-size: 45rpx;color: #987938;margin: 20rpx;flex-grow: 1;
}

index.js

// index.js
// 获取应用实例
const app = getApp()Page({/*** 页面的初始数据*/data: {danmuTxt:"",list: [{id: '1001',title: '杨国宜先生口述校史实录',videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'},{id: '1002',title: '唐成伦先生口述校史实录',videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'},{id: '1003',title: '倪光明先生口述校史实录',videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'},{id: '1004',title: '吴仪兴先生口述校史实录',videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'}]},/** * 播放视频*/playVideo:function(e){this.videoCtx.stop()this.setData({src:e.currentTarget.dataset.url})this.videoCtx.play() },//更新弹幕内容
getDanmu:function(e){this.setData({danmuTxt:e.detail.value
})
},//发送弹幕
sendDanmu:function(e){let text = this.data.danmuTxt;
this.videoCtx.sendDanmu({text:text,color:getRandomColor()
})
},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.videoCtx = wx.createVideoContext('myVideo')},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})function getRandomColor() {let rgb = []for(let i =0;i<3;++i){let color = Math.floor(Math.random()*256).toString(16)color = color.length == 1 ? '0' + color:colorrgb.push(color)}return '#' + rgb.join('')
}

OUC软件开发实验3相关推荐

OUC软件开发实验4
实验4:高校新闻网本实验来自于周文洁老师的<微信小程序开发实战>第十五章.在学习了小程序的基础知识和各类API以后,尝试独立动手创建一个小程序前端综合设计实例.我们将从零开始详解如何模仿 ...
OUC软件开发实验1
实验1:第一个微信小程序 2.1自动生成小程序 2.2手动创建小程序 2.2.1 项目创建 2.2.2 页面配置 2.2.3 视图设计 2.2.4 逻辑实现本实验来自于周文洁老师的<微信小程序 ...
OUC软件开发实验5
实验5:第一个Android应用小程序一.实验目标 1.Textview imageview使用:2.LinearLayout使用二.实验步骤基础知识 TextView match_parent ...
OUC软件开发实验6
实验6:做一个APP首页一.实验目标 1.ScrollView使用:2.RelativeLayout使用:3.插件之间的穿插使用. 二.实验步骤基础知识 ScrollView了解 layout_w ...
OUC-移动软件开发-实验5
移动软件开发-实验5 一.实验目标模仿微信"发现"页创建列表布局学习使用Textview imageview.LinearLayout 二.实验步骤 1. 搭建 Java 环境 ...
移动软件开发实验3
移动软件开发实验3 一. 实验目标 1.掌握视频列表的切换方法: 2.掌握视频自动播放方法: 3.掌握视频随机颜色弹幕效果. 二.实验步骤 1.创建项目 ·创建页面文件 ·删除和修改文件 ·创建其他 ...
OUC-移动软件开发-实验1
2022年夏季<移动软件开发>实验报告姓名:陈李焘学号:20020007003 Untitled (备注:将实验报告发布在博客.代码公开至 github 是加分项,不是必须做的) 一 ...
ouc 2022 移动软件开发实验五：第一个 Android 应用小程序
一.实验目标 1.安卓移动端开发环境搭建 2.编写第一个 Android 应用小程序二.实验步骤 1.安卓移动端开发环境搭建 1.1 电脑安装 jdk 创建一个英文名称的文件夹(尽量别用中文),将下 ...
ouc2022移动软件开发实验二：天气查询小程序
一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤 1."和风天气"密钥申请 "和风天气"有着可以 ...

OUC软件开发实验3