7***@qq.com
7***@qq.com
  • 发布:2024-09-05 11:34
  • 更新:2024-09-06 11:10
  • 阅读:275

【报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

示例代码:
<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>

操作步骤:

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编译后小程序代码

2024-09-05 11:34 负责人:DCloud_UNI_OttoJi 分享
已邀请:
DCloud_UNI_OttoJi

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

要回复问题请先登录注册