企业官网建设流程全解析

index.wxml文件

<navigation-bar title="video组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">华为开发者大会-2026</view> <view class="video-layout"> <video id="my-video" src="{{videoPath}}" controls="true" danmu-list="{{danmuList}}" enable-danmu="true" danmu-btn="true" /> </view> <view class="txt-style">弹幕内容</view> <input type="text" placeholder="在此处输入弹幕内容" bind:blur="inputBlur" /> <button type="primary" bind:tap="sendDanmu">发送弹幕</button> </view> </scroll-view>

index.wxss文件

page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .video-layout { display: flex; justify-content: center; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }

index.js文件

function getRandomColor() { let rgb = [] for (let index = 0; index < 3; index++) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } console.log(rgb); return '#' + rgb.join('') } Page({ data: { videoPath: 'https://636c-cloud1-d5gy9l3hc0a2586a8-1504552563.tcb.qcloud.la/videos/%E5%8D%8E%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85%E5%A4%A7%E4%BC%9A2026.mp4?sign=26344cba7e4b974bd6763ecdffbe7d7e&t=1792908571', danmuList: [ { text: '鸿蒙世界，奔腾不息', color: '#ff0000', time: 1 }, { text: 'HarmonyOS 7', color: '#ff00ff', time: 5 }, { text: '华为开发者大会2026', color: '#00ff00', time: 10 }, { text: '携手助力，筑牢金融安全', color: '#00ffff', time: 20 } ] }, onLoad() { const query = wx.createSelectorQuery() query.select('#my-video').context() query.exec((res) => { if (res[0]) { this.videoCtx = res[0].context } }) }, inputBlur(e) { console.log(e); this.inputValue = e.detail.value }, sendDanmu() { this.videoCtx.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } })

app.wxss文件

/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 4rpx solid #FF9500; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }

本文实现了一个基于微信小程序的视频播放页面，集成弹幕功能。通过<video>组件播放华为开发者大会2026视频，支持弹幕发送与显示。用户可输入弹幕内容并随机生成颜色，点击“发送弹幕”按钮实时推送至视频。页面采用scroll-view滚动布局，结合navigation-bar实现导航栏自定义，整体结构清晰，交互流畅，展现了小程序在多媒体互动应用中的实践能力。