<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view>
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" @timeupdate="onTimeUpdate" enable-danmu danmu-btn
controls></video>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="uni-list uni-common-mt">
<view class="uni-list-cell">
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
</view>
<view class="uni-btn-v">
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
],
danmuValue: ''
}
},
onReady: function (res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
},
methods: {
sendDanmu: function () {
this.videoContext.sendDanmu({
text: this.danmuValue,
color: this.getRandomColor()
});
this.danmuValue = '';
},
onTimeUpdate: function (e) {
console.log(e, 'e==========================')
},
videoErrorCallback: function (e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
getRandomColor: function () {
const 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('')
}
}
}
</script>
7***@qq.com
- 发布：2024-09-05 11:34
- 更新：2024-09-06 11:10
- 阅读：282
【报Bug】vue3+vite @dcloudio/uni-app版本3.0.0-alpha-3081120230719001 video原生标签所有的@绑定事件全部无法触发
分类：uni-app
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 64 位
HBuilderX类型： 正式
HBuilderX版本号： 4.24
第三方开发者工具版本号： 1.0.6
基础库版本号： 3.5.4
项目创建方式： HBuilderX
示例代码：
操作步骤：
v3编译后代码：
<view><view class="uni-padding-wrap uni-common-mt"><view><video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" binderror="{{a}}" danmu-list="{{b}}" bindtimeupdate="{{c}}" enable-danmu danmu-btn controls></video></view><view class="uni-list uni-common-mt"><view class="uni-list-cell"><view><view class="uni-label">弹幕内容</view></view><view class="uni-list-cell-db"><input class="uni-input" type="text" placeholder="在此处输入弹幕内容" value="{{d}}" bindinput="{{e}}"/></view></view></view><view class="uni-btn-v"><button bindtap="{{f}}" class="page-body-button">发送弹幕</button></view></view></view>
这是暴露出去的绑定方法： c: common_vendor.G((...args) => $options.onTimeUpdate && $options.onTimeUpdate(...args)),
这是G函数声明：exports.G = o$1; const o$1 = (value, key2) => vOn(value, key2);
这是vOn函数：function vOn(value, key2) {
const instance = getCurrentInstance();
const ctx = instance.ctx;
const extraKey = typeof key2 !== "undefined" && (ctx.$mpPlatform === "mp-weixin" || ctx.$mpPlatform === "mp-qq") && (isString$2(key2) || typeof key2 === "number") ? "_" + key2 : "";
const name = "e" + instance.$ei++ + extraKey;
const mpInstance = ctx.$scope;
if (!value) {
delete mpInstance[name];
return name;
}
const existingInvoker = mpInstance[name];
if (existingInvoker) {
existingInvoker.value = value;
} else {
mpInstance[name] = createInvoker(value, instance);
}
return name;
}
在微信开发者工具上 vOn函数可以多次触发 而在真机上 只会在页面挂载的时候触发一次
v3编译后代码：
<view><view class="uni-padding-wrap uni-common-mt"><view><video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" binderror="{{a}}" danmu-list="{{b}}" bindtimeupdate="{{c}}" enable-danmu danmu-btn controls></video></view><view class="uni-list uni-common-mt"><view class="uni-list-cell"><view><view class="uni-label">弹幕内容</view></view><view class="uni-list-cell-db"><input class="uni-input" type="text" placeholder="在此处输入弹幕内容" value="{{d}}" bindinput="{{e}}"/></view></view></view><view class="uni-btn-v"><button bindtap="{{f}}" class="page-body-button">发送弹幕</button></view></view></view>
这是暴露出去的绑定方法： c: common_vendor.G((...args) => $options.onTimeUpdate && $options.onTimeUpdate(...args)),
这是G函数声明：exports.G = o$1; const o$1 = (value, key2) => vOn(value, key2);
这是vOn函数：function vOn(value, key2) {
const instance = getCurrentInstance();
const ctx = instance.ctx;
const extraKey = typeof key2 !== "undefined" && (ctx.$mpPlatform === "mp-weixin" || ctx.$mpPlatform === "mp-qq") && (isString$2(key2) || typeof key2 === "number") ? "_" + key2 : "";
const name = "e" + instance.$ei++ + extraKey;
const mpInstance = ctx.$scope;
if (!value) {
delete mpInstance[name];
return name;
}
const existingInvoker = mpInstance[name];
if (existingInvoker) {
existingInvoker.value = value;
} else {
mpInstance[name] = createInvoker(value, instance);
}
return name;
}在微信开发者工具上 vOn函数可以多次触发 而在真机上 只会在页面挂载的时候触发一次
预期结果：
能真机触发
能真机触发
实际结果：
无法真机触发
无法真机触发
bug描述：
vue3+vite @dcloudio/uni-app版本3.0.0-alpha-3081120230719001 video原生标签所有的@绑定事件全部无法触发 在vue2上是可以触发的 v3编译出来的小程序代码 vOn事件在真机上只监听一次就被阻止 微信开发者工具可以多次监听触发 下面是v3编译后小程序代码
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
感谢反馈，我调整了一下格式化，我使用最新的 HBuilderX alpha 版本，微信小程序真机运行播放打印 update、暂停视频、发送弹幕功能正常。
我看你提供的版本是 2023 年 7 月份的依赖，请升级到最新依赖再试一下？或者你有其他需求？
7***@qq.com (作者)
意思是HBuilderX 正式4.24版本还是有这个问题是吗 还是说@dcloudio/uni-app版本依赖需要升级到最新版本
2024-09-06 17:42
7***@qq.com (作者)
目前升级到HBuilderX.4.26.2024082213-alpha版本了 微信开发者工具也是最新版本 只有"@dcloudio/uni-app": "3.0.0-alpha-3081120230719001"没有进行升级 通过HBuilderX内置选项运行的 还是不行 麻烦提供下你那边运行正常的@dcloudio/uni-app版本号 （我看最新版本编译出来的小程序代码 跟我上面提供的代码没有区别 没做任何其它处理 麻烦确定下版本号 谢谢）
2024-09-06 18:07
DCloud_UNI_OttoJi
回复 7***@qq.com: 我的操作：打开 4.26 alpha 版本，新建 vue3 项目，粘贴你提供的代码运行到模拟器、真机，观察 console 变化。你是不想升级你的 uni-app 依赖吗，如果你是 vue3 cli 项目需要升级你的 uni-app 依赖，cli 项目和 HBuilderX 版本无关系。你用的还是旧逻辑
2024-09-06 20:03
7***@qq.com (作者)
回复 DCloud_UNI_OttoJi: 我是依赖安装"@dcloudio/uni-app": "3.0.0-alpha-3081120230719001"版本，构建工具为vite 4.5.1，我新建vue3项目确实是可以的 但是新建的vue3项目是没有vite构建工具的 你们内置的构建工具是webpack吗
2024-09-09 10:28
DCloud_UNI_OttoJi
回复 7***@qq.com: 嗯嗯，理解你的操作了。vue3 版本的 uni-app 都是使用 vite，不同的是 hx 依赖是内置的，cli 依赖用户自己处理。如果你新建 vue3 项目没问题，我认为就是 cli 的依赖没有升级导致的，你看你的版本还是 2023 年的，你使用
npx @dcloudio/uvm latesst升级到最新版本试一试吧。我觉得是这块没有和你讲清楚2024-09-09 11:38
7***@qq.com (作者)
回复 DCloud_UNI_OttoJi: 还是得麻烦你这边提供下内置依赖版本号 "@dcloudio/uni-app": "3.0.0-alpha-4020620240822002",已经升级了 还是不生效 能不能提供下vue3 vite 和 @dcloudio/uni-app的依赖版本号 我固定版本运行下
2024-09-09 14:24
DCloud_UNI_OttoJi
回复 7***@qq.com: 是需要我提供一个 video 的模版吗，你参考这个 https://gitcode.net/xiurensha5731/uni-app-questions/-/tree/q/video
2024-09-09 16:24
7***@qq.com (作者)
回复 DCloud_UNI_OttoJi: 我对比了下俩者之间的区别 我这边自己项目编译出来的小程序代码是exports.G = o$1; const o$1 = (value, key2) => vOn(value, key2); 使用uni-app cli依赖自己安装 内置编译出来的小程序代码是exports.o = o;const o = (value, key) => vOn(value); 俩个项目下 只有这块代码是不一致的 具体能帮我排查下吗
2024-09-09 17:51
DCloud_UNI_OttoJi
回复 7***@qq.com: 为什么要关注编译产物？我提供的复现工程和你自己的项目依赖有什么区别？你是想学习使用，还是现在还是有问题？现在最新的 HBuilderX 创建（编辑器内置依赖）和 cli 最新依赖（指定版本 npm 依赖）都可以正常使用 video 的各项功能吧？
2024-09-10 11:13
7***@qq.com (作者)
回复 DCloud_UNI_OttoJi: 没事了 应该是我们自己项目里面有相关引用导致的这个问题 跟官网框架没有关系 谢谢哈
2024-09-11 17:33
DCloud_UNI_OttoJi
回复 7***@qq.com: 好，也欢迎继续反馈 uniapp 问题
2024-09-11 19:53