实验步骤
新建项目
新建一个空的微信小程序项目。
配置文件
1. 在pages页面下创建index.js、index.json、index.wxml和index.wxss文件。
2. 新建images文件夹,在文件夹下导入所需图片素材。
导航栏设计与实现
设计导航栏为金色,标题”口述校史“为白色。
在app.json文件中更改配置实现导航栏设计:
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#987938",
"backgroundColor": "#eeeeee"
}
}
页面设计与实现
由上至下,分别视频播放区,弹幕发送区和视频列表区,各面板之间保留一定的间隔。
使用<video>标签实现视频播放区的功能:
<video id= 'myVideo' controls src = '{{src}}'></video>
对应JavaScript函数实现视频跳转选择功能:
playVideo:function(e){
this.videoCtx.stop()
this.setData({
src:e.currentTarget.dataset.url,
})
this.videoCtx.play()
},
添加wxss样式,在原有基础上添加视频摆放区边框,优化页面结构:
video{
width : 99% ;
border: 2px solid #987938;
}
在原有基础上添加额外功能,点赞与投币功能:
对应wxml和js代码如下:
<view class="post-container">
<view class="action-icons">
<image src="{{likeIconPath}}" class="action-icon" bindtap="handleLike" mode="aspectFit"></image> <text>{{likes}}</text>
<image src="{{coinIconPath}}" class="action-icon" bindtap="handleCoin" mode="aspectFit"></image> <text>{{coins}}</text>
</view>
</view>
handleLike: function() {
this.setData({
likes: this.data.likes + 1
});
if (this.data.likes > 0) {
this.setData({
likeIconPath: this.data.likedIconPath
});
}
},
// 处理投币事件
handleCoin: function() {
this.setData({
coins: this.data.coins + 1
});
if (this.data.coins > 0) {
this.setData({
coinIconPath: this.data.coinedIconPath
});
}
},
使用<input>标签和<button>标签实现弹幕的输入和发送功能
-
<view class= 'danmuArea'> <input class='bindinput' type = 'text' placeholder = '请输入弹幕内容' bindinput = 'getDanmu'></input> <button bindtap = 'sendDanmu'>发送弹幕</button> </view>
getDanmu函数实现弹幕的获取和发送:
getDanmu:function(e){ this.setData({ danmuTxt:e.detail.value, }) }, sendDanmu:function(e){ let text = this.data.danmuTxt; this.videoCtx.sendDanmu({ text:text, color:getRandomColor() }); },
getRandomColor()函数实现弹幕的随机颜色,通过产生随机数得到随机16机制色彩编码:
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:color rgb.push(color) } return '#'+rgb.join('') }
修改wxss代码,实现页面优化:
.danmuArea{ display: flex; flex-direction: row; width: 280px; height: 40px; margin-left:20px ; } .bindinput{ border: 2px solid rgb(105, 105, 105); padding: 8px; width: 160px; height: 15px; border-radius: 8px; } button { color: white; background-color: #987938; font-size: 16px; text-align: center; border: none; border-radius: 8px; /* 边框圆角*/ cursor: pointer; /* 鼠标悬停时显示指针 */ margin-left: 8px; height: 42px; }
-
在原有基础上添加评论功能:
使用<textarea>标签和<button>标签实现评论功能:
<view class="container"> <view class="input-area"> <textarea placeholder="请输入你的评论..." bindinput="inputChange" data-key="comment" value="{{comment}}"></textarea> <button bindtap="submitComment">提交评论</button> </view> <view class="comment-list"> <text class="plq">评论区</text> <block wx:for="{{comments}}" wx:key="index"> <view class="comment-item"> <!-- {{item.content}} - {{item.formattedTime}} --> 评论:{{item}} <text>Time: {{formattedTime}}</text> </view> </block> </view> </view>
获取评论内容并发布,附带发表时间,js代码如下:
inputChange: function(e) { const key = e.currentTarget.dataset.key; this.setData({ [key]: e.detail.value }); }, // 提交评论 submitComment: function() { if (this.data.comment.trim() !== '') { const newComments = [...this.data.comments, this.data.comment]; this.setData({ comments: newComments, comment: '' // 清空输入框 }); const timestamp = 1609459200000; // 调用函数处理时间戳 this.setData({ formattedTime: this.formatTime(timestamp) }); } else { wx.showToast({ title: '评论不能为空', icon: 'none' }); } } , formatTime: function(timestamp) { const date = new Date(timestamp); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hour = String(date.getHours()).padStart(2, '0'); const minute = String(date.getMinutes()).padStart(2, '0'); const second = String(date.getSeconds()).padStart(2, '0'); return `${year}-${month}-${day}`; },
wxss代码:
.container { padding: 20px; } .input-area { margin-bottom: 20px; } textarea { width: 260px; height: 50px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; }
-
使用<image>标签和<text>标签实现视频列表功能
<view class = 'videoList'> <text>视频列表</text> <view class = 'videoBar' wx:for = '{{list}}' wx:key = 'video{{index}}' data-url = '{{item.videoUrl}}' bindtap = 'playVideo'> <image class="tubiao" src = '/image/play.jpg'></image> <text>{{item.title}}</text> </view> </view>
js代码:
循环遍历数组输出视频列表
title:'杨国宜先生口述校史实录', list: [ { id: '299371', title: '杨国宜先生口述校史实录', videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4' }, { id: '299396', title: '唐成伦先生口述校史实录', videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4' }, { id: '299378', title: '倪光明先生口述校史实录', videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4' }, { id: '299392', title: '吴仪兴先生口述校史实录', videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4' } ]
wxss代码:
.post-container { padding: 20px; display: flex; flex-direction: column; align-items: center; } .action-icons { display: flex; justify-content: center; margin-bottom: 1px; } .action-icon { width: 40px; height: 40px; margin: 0 10px; cursor: pointer; } .stat-display { font-size: 24px; color: #333; } .stat-display text { margin-right: 25px; }
-
-