实验3 402f92e127824ac0b295131aeb6df0fa

移动软件开发-实验3

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

1. 新建项目

利用 appid 新建一个项目，并删除 index 和 logs 文件夹的内容，初始化文件。

在这里插入图片描述

2. 搭建页面，美化样式

相关代码如下：

<!-- index.wxml -->

<!-- 视频播放器 -->
<video src="" id="myVideo" controls></video>

<!-- 弹幕区域 -->
<view class="danmuArea">
    <input type="text" placeholder="请输入弹幕内容"/>
    <button>
        <text>
            发送弹幕
        </text>
    </button>
</view>

<!-- 视频列表 -->
<view class="videoList">
    <view class="videoBar" wx:for="{{list}}" wx:key="index">
        <image src="../../images/play.png"></image>
        <text>测试标题</text>
    </view>
</view>

/* index.wxss */

video {
    width: 100%;
}

/* 弹幕样式 */
.danmuArea {
    display: flex;
    flex-direction: row;
    padding-right: 20rpx;
}
input {
    border: 1px solid #927938;
    /* flex-grow: 1; */
    height: 100rpx;
    border-radius: 20rpx;
    width: 80%;
    margin: 0rpx 20rpx;
    padding-left: 20rpx;
    
}
button {
    color: white;
    background-color: #987938;
    /* line-height: 100rpx !important; */
    border-radius: 20rpx;
    height: 100rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
button text {
    line-height: 5rpx;
}

/* 视频列表 */
.videoList {
    width: 100%;
    min-height: 400rpx;
}
.videoBar {
    width: 95%;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #987938;
    margin: 10rpx;
}
image {
    width: 70rpx;
    height: 70rpx;
    margin: 20rpx;
}
text {
    font-size: 45rpx;
    color: #987938;
    margin: 20rpx;
    flex-grow: 1;
}

效果如下：

3. 编写 js 实现视频播放

重要的步骤如下：

（1）在 js 文件中新建 list 数据对象，用于表示每条视频的信息（包括标题和视频地址）

（2） 在 wxml 文件中动态渲染

（3） 给视频播放列表绑定点击事件，动态切换视频播放组件的 src 属性

（4） 由于视频播放组件自身的特性，在更改视频播放组件的 src 后，需要利用创建的视频组件上下文（ctx），调用其 play() 函数

核心代码如下：

// index.js
/**
     * 页面的初始数据
     */
    data: {
        //   四个视频的地址
        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'
            }
        ],
        // 当前播放视频地址
        src: ""
    },

    //   点击播放函数
    playVideo(e) {
        this.setData({
            src: e.currentTarget.dataset.url
        })
        this.videoCtx.play()
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 创建视频播放组件的上下文
        this.videoCtx = wx.createVideoContext('myVideo')
    },

具体效果如下：

4.发送弹幕

本来以为弹幕需要自己创建 Dom 对象，给他添加动画，最后删除 Dom 巴拉巴拉，还挺麻烦的。没想到小程序中给视频播放组件设置了一个组件 enable-danmu ，同时设置了一个内置函数 sendDanmu({}) ，想要发送弹幕直接调用即可。虽说，额，有点丑，但是能很快达成目的，符合小程序小体量完成多功能的特点。

💡 核心代码如下：

// index.js
// 获取弹幕
    getDanmu(e) {
        // console.log(e.detail.value);
        this.setData({
            danmu: e.detail.value
        })
    },

    // 发送弹幕
    sendDanmu() {
        console.log("发送弹幕");
        let text = this.data.danmu;
        // 调用视频组件的函数，实现发送弹幕。
        this.videoCtx.sendDanmu({
            text: text,
            color: 'red'
        })
    },

<!-- index.wxml -->

<!-- 视频播放器 -->
<video src="{{src}}" id="myVideo" controls enable-danmu danmu-btn></video>

<!-- 弹幕区域 -->
<view class="danmuArea">
    <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"/>
    <button>
        <text bindtap="sendDanmu" bindtap="sendDanmu">发送弹幕</text>
    </button>
</view>

具体效果如下：简单的弹幕效果已经实现了。

仍然有改善的空间：

1. 每次发送弹幕的颜色都是红色，比较单一，容易产生审美疲劳
2. 发送弹幕后，输入框中仍保留着先前的弹幕

做出如下优化：

// 获取随机颜色 rgb
    getRandomColor() {
        let rgb = [];
        // 分别获取 r g b
        for (let i = 0; i < 3; i++) {
            // 先获取 [0, 256) 之间的随机数，再向下取整，得到[0, 255]之间的整数
            // 再将随机数转 16 进制
            let color = Math.floor(Math.random() * 256).toString(16);
            // 如果 16 进制只有一位，在前面补0，使其变为2位。
            color = color.length == 1 ? '0' + color : color;
            rgb.push(color);
        }
        // 同：
        // # + rgb[0] + rgb[1] + rgb[2]
        return '#' + rgb.join('')
    },
    // 每次发送弹幕后，清空弹幕框
		// 发送弹幕
    sendDanmu() {
        console.log("发送弹幕");
        let text = this.data.danmu;
        let color = this.getRandomColor()
        // 调用视频组件的函数，实现发送弹幕。
        this.videoCtx.sendDanmu({
            text: text,
            color: color
        })
        // 每次发送弹幕后，清空弹幕框
        this.setData({
            danmu: ''
        })
    },

💡 效果如下：

三、程序运行结果

如上所述。

四、问题总结与体会

由于老师给的文档非常详细到位，这次的作业基本没有问题。

对我来说，小程序的 video 组件我是比较陌生的，不管是在网页开发中，还是在小程序开发中，我都没有怎么接触过 video 这个组件。通过这次作业，我发现微信小程序对 video 这个组件封装的很好，麻雀虽小，五脏俱全。特别是对弹幕的傻瓜实现，很适合我这样的新手小白。