企业官网建设流程全解析

一、实验目的

1. 掌握小程序video视频组件常用属性，实现视频播放。
2. 理解弹幕机制，学会配置预设弹幕列表danmuList。
3. 掌握wx.createSelectorQuery()获取VideoContext视频上下文，调用sendDanmu()发送实时弹幕。
4. 实现随机十六进制颜色函数，让发送的弹幕颜色随机变化。
5. 了解小程序基础库版本差异：danmu‑btn弹幕开关按钮仅低版本基础库生效，高版本该属性失效。
6. 掌握 input 输入框bind:blur失去焦点事件获取用户输入内容。

二、实验环境

• 开发工具：微信开发者工具
• 项目模式：不使用云服务、不使用模板
• 渲染引擎：renderer:"webview"webview 渲染模式

三、实验需求分析

基础功能

1. 页面展示 video 视频播放器，视频播放到指定时间自动播放预设弹幕。
2. 提供输入框，用户输入文字，点击按钮发送弹幕，弹幕颜色随机生成。
3. 页面包含橙色外边框，红色页面标题，原生导航栏标题为 video 组件。

作业扩充要求

1. 切换低版本调试基础库：播放器显示弹幕开关按钮。
2. 切换高版本调试基础库：弹幕开关按钮消失，弹幕发送功能仍然正常可用。

四、核心知识点梳理

1.video 组件核心属性

表格

2.VideoContext 视频上下文

通过wx.createSelectorQuery()查询获取 video 组件上下文对象，调用sendDanmu({text,color})接口，实现向视频发送实时弹幕。

3. 随机十六进制颜色

利用Math.random()生成 0‑255 的数字，使用toString(16)转为十六进制；如果是单字符，前面补0，拼接成#RRGGBB标准颜色格式。

4.input bind:blur 事件

输入框失去焦点才捕获输入内容，保存文本用于后续发送弹幕。

5. 视频资源注意事项

❌禁止直接把 mp4 视频放在小程序项目文件夹，模拟器可以播放，真机直接黑屏。 ✅方案 1：云开发存储上传视频，复制云文件 ID；✅方案 2：外网 HTTPS 视频链接。

五、完整代码实现

1.app.json（全局配置，原生导航栏）

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "video组件", "navigationBarTextStyle": "black", "navigationBarBackgroundColor": "#ffffff" }, "style": "v2", "renderer": "webview", "componentFramework": "glass‑easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

2.pages/index/index.wxml

<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"></video> </view> <view class="txt‑style">弹幕内容</view> <input type="text" placeholder="在此处输入弹幕内容" bind:blur="inputBlur"/> <button type="primary" bind:tap="sendDanmu">发送弹幕</button> </view> </scroll-view>

3.pages/index/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); } return '#' + rgb.join(''); } Page({ data:{ // 此处替换为你的https视频地址 / 云文件ID videoPath:"https://www.w3schools.com/html/mov_bbb.mp4", // 预设弹幕：text文字、color颜色、time出现时间(秒) 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(){ // 获取VideoContext视频上下文，用于发送弹幕 const query = wx.createSelectorQuery(); query.select('#my‑video').context(); query.exec((res)=>{ if(res[0]){ this.videoCtx = res[0].context; } }) }, inputBlur(e){ // 输入框失去焦点保存输入内容 this.inputValue = e.detail.value; }, sendDanmu(){ // 发送自定义弹幕，随机颜色 this.videoCtx.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } })

4.pages/index/index.wxss

page { height: 100vh; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); box-sizing: border-box; } .scrollarea { flex: 1; overflow-y: hidden; } .video-layout { display: flex; justify-content: center; } video { width: 95%; } .txt-style { font-size: large; margin-top: 20rpx; } input { height: 80rpx; border-bottom: 2rpx solid blue; margin-top: 10rpx; margin-bottom: 20rpx; }

5.app.wxss（全局公共样式）

.box { margin: 20rpx; padding: 20rpx; border: 4rpx solid #FF9500; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }

6.pages/index/index.json

{}

六、运行效果

1. 页面顶部原生导航栏标题显示video组件，页面完整展示橙色边框、红色标题。
2. 视频播放器加载测试视频；视频播放到对应秒数自动弹出预设弹幕。
3. 在输入框输入文字，点击发送弹幕按钮，视频上弹出随机颜色的弹幕。
4. 切换调试基础库版本：
   • 低版本（2.32.3）：播放器显示弹幕开关按钮。
   • 高版本（3.17.4）：弹幕开关按钮消失，发送弹幕功能不受影响。

七、实验踩坑与问题解决

1. 页面边框、标题看不见，被顶部遮挡原因：开启navigationStyle:custom自定义导航，页面没有留出状态栏安全高度。 解决：关闭自定义导航栏，使用系统原生导航；css 添加padding‑top: env(safe‑area‑inset‑top)适配手机安全区。
2. 弹幕按钮 danmu‑btn 不显示不是代码错误，小程序新版本基础库废弃该属性；切换到低版本调试基础库即可看到弹幕开关。弹幕发送功能高低版本都可用。
3. 调用 sendDanmu 报错，弹幕发不出去原因：没有成功获取VideoContext视频上下文，video 标签缺少 id。 解决：video 组件设置id，在onLoad生命周期通过createSelectorQuery获取上下文对象。
4. 真机视频黑屏无法播放原因：使用本地项目 mp4 文件或者 http 非加密链接。 解决：视频上传云开发存储拿到云文件 ID，或者使用 https 公开视频地址。
5. 预设弹幕完全不显示检查是否开启enable‑danmu="true"，确认danmuList数组内 time 时间单位是秒。

八、实验总结

本次实验学习小程序video媒体视频组件，掌握预设弹幕与实时发送弹幕的开发流程。 学会使用wx.createSelectorQuery获取组件上下文，调用组件实例方法。实现随机十六进制颜色生成函数，完成弹幕随机变色效果。 同时认识小程序基础库版本差异性，部分组件属性会随版本迭代废弃。 掌握视频资源的限制规则，理解真机与模拟器行为差异，开发视频小程序时必须使用网络视频资源，不能直接引用本地 mp4 文件。