zZZ1Ma
zZZ1Ma
  • 发布:2023-02-09 10:42
  • 更新:2024-04-28 13:04
  • 阅读:4448

【报Bug】微信 Skyline 手势组件无法响应事件

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Win11 21H2

HBuilderX类型: 正式

HBuilderX版本号: 3.6.18

第三方开发者工具版本号: 1.06.2302022 开发版

基础库版本号: 2.30.0

项目创建方式: HBuilderX

示例代码:
<template>  
  <scroll-view scroll-y type="list" @scroll="onScroll">  
    <vertical-drag-gesture-handler @onGestureEvent="handlePan">  
      <view>  
        <view v-for="(item,index) in 100" :key="index">{{item}}</view>  
      </view>  
    </vertical-drag-gesture-handler>  
  </scroll-view>  
</template>  

<script setup>  
  import { onLoad } from '@dcloudio/uni-app'  

  onLoad(options => {  
    console.log('pageLoad');  
  })  

  const onScroll = (e) => {  
    console.log(e)  
  }  

  const handlePan = (gestureEvt) => {  
    "worklet";  
    console.log(gestureEvt);  
  }  
</script>

操作步骤:
  1. 以管理员权限打开HBuilder,在HBuilder安装根目录下找到uni.compiler.js文件(例如安装路径为:D:\Program Files\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-mp-weixin\dist\uni.compiler.js),打开后在第115行 "const customElements = ['page-container', ...] " 内新增 'vertical-drag-gesture-handler' 并保存;
  2. 新建uni-app、vue3项目,源码视图打开manifest.json文件,在mp-weixin新增配置:"renderer": "skyline", "lazyCodeLoading" : "requiredComponents" 并保存;
  3. 复制上述示例代码至index页内并保存,运行至微信开发者工具,成功后在 微信开发者工具 - 详情 - 本地设置 勾选"开启 Skyline 渲染调试";
  4. 若微信开发者工具未能正常编译,须确保其版本、基础库(2.29.2+)满足要求;重新编译之后,模拟器左上角会显示 "当前渲染模式:Skyline";
  5. 使用微信开发者工具内置编辑器打开index.wxml文件,去掉 vertical-drag-gesture-handler 标签上的事件绑定 bindonGestureEvent 前的"bind"并保存;

预期结果:

在模拟器内按住鼠标左键不松并上下拖动,页面无法滚动,但控制台有输出,例如:[ui] {velocityX: 0, state: 3, absoluteX: 0, absoluteY: 0, velocityY: 0, …}

实际结果:
  1. 页面无法滚动(功能生效),但控制台无输出(未能响应事件);
  2. 工具编辑器内注释 vertical-drag-gesture-handler 标签,页面可滚动,且能响应 scrollView 的 scroll 事件;
  3. BUG:Skyline 手势组件无法响应事件

bug描述:

2023-02-09 10:42 负责人:DCloud_UNI_WZF 分享
已邀请:

最佳回复

DCloud_UNI_WZF

DCloud_UNI_WZF

HBuiilderX 3.7.6 已支持

  • 曾小晨

    share-element 编译后,会把一些属性丢失怎么处理,比如 transform,导致没有动画效果了

    2023-02-28 14:36

  • DCloud_UNI_WZF

    回复 7***@qq.com: 开个新帖反馈

    2023-02-28 14:47

  • zZZ1Ma (作者)

    3.7.6可以把skyline特有组件grid-view、list-view、root-portal、share-element、sticky-header、sticky-section也一并support了吗?

    2023-02-28 15:50

  • DCloud_UNI_WZF

    回复 2***@qq.com: 3.7.6 支持以下 Skyline 组件

    'tap-gesture-handler',

    'double-tap-gesture-handler',

    'pan-gesture-handler',

    'scale-gesture-handler',

    'force-press-gesture-handler',

    'vertical-drag-gesture-handler',

    'horizontal-drag-gesture-handler',

    未关注到 share-element 等组件,有类似文档 https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/gesture.html 统一列出相关组件吗,以上组件预计下个版本支持,暂时可在之前的临时解决方案文件中搜索已支持组件,对应位置添加如上组件尝试支持

    2023-02-28 16:09

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: 可以看下这个https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html,昨晚升3.7.6试了下手势组件没问题,但今天发现grid-view等6个容器组件样式失效

    2023-02-28 16:42

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: grid-view、list-view、sticky-header、sticky-section 为skyline独有;root-portal为新增;share-element 在skyline下特性更多

    2023-02-28 16:46

  • DCloud_UNI_WZF

    回复 2***@qq.com: 后续支持,临时解决方案参考 https://ask.dcloud.net.cn/question/163926

    2023-03-01 10:35

  • 大虾虾

    vue3 setup 手势组件事件没有响应,改vue2就能正常响应

    2023-03-19 03:18

  • DCloud_UNI_WZF

    回复 大虾虾: 提供下测试工程

    2023-03-20 09:57

  • aboutlikefish

    vue3 语法糖版本能使用了么,我还是没法识别手势系统

    2023-07-11 11:13

DCloud

DCloud

HBuilderX 3.7.8.20230323 已修复。

  • 大虾虾

    vue3 setup 也支持了吗?

    2023-03-26 00:35

  • zZZ1Ma (作者)

    回复 大虾虾: <script setup></<script>不支持,可这样用:<script> export default { setup(props, ctx) { return{} }, methods: { // worklet 方法 } } </script>

    2023-03-29 15:51

  • aboutlikefish

    回复 zZZ1Ma: 这种手势还是识别不了

    2023-07-11 16:34

  • zZZ1Ma (作者)

    回复 aboutlikefish: 小程序都发布线上版了;你是什么环境下不支持?

    2023-07-12 11:11

  • aboutlikefish

    回复 zZZ1Ma: 最新的版本环境,语法糖就不识别,shared也获取不到

    2023-07-12 15:01

  • aboutlikefish

    回复 zZZ1Ma: [ui] Javascript worklet error

    list4.js:1: TypeError: Cannot read property 'value' of undefined

    TypeError: Cannot read property 'value' of undefined

    at _f (list4.js:1:172)

    at Object._f (/data/landun/workspace/wxapplib/src/skyline/src/components/wx-gesture/index.ts (202:33):1:146)

    滚动识别了一直报这个错,shared这个读取不到

    2023-07-12 21:49

  • zZZ1Ma (作者)

    回复 aboutlikefish: 不支持使用setup语法糖,shardValue值怎么定义的?楼下有贴示例代码,可比对下是否写法不同

    2023-07-13 10:32

  • aboutlikefish

    回复 zZZ1Ma: 搞定了,其实就是变量指向的问题,uni编译的找不到this的指向,语法糖版本直接把worklet都没搞进去,也不知道什么时候兼容,估计要等微信发正式版了

    2023-07-17 18:41

  • zZZ1Ma (作者)

    回复 aboutlikefish: 这楼第二个回复您不看的吗?

    2023-07-21 09:49

zZZ1Ma

zZZ1Ma (作者)

更换vue2版本、不使用setup语法糖 都试过,始终无法响应handlePan事件;在common/vendor.js文件内的vOn方法下console日志,handlePan事件确实有绑定到

DCloud_UNI_WZF

DCloud_UNI_WZF

问题确认,感谢反馈,已加分

DCloud_UNI_WZF

DCloud_UNI_WZF

vue2 临时解决方案:
需要替换 HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/3个包的文件,附件dist-vue2内每个文件的前缀包含目录名称
vue3 临时解决方案:
替换 HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-weixin/dist 为附件文件
PS: 不支持 composition api

  • zZZ1Ma (作者)

    替换之后还是无法响应handlePan事件

    2023-02-15 11:29

  • zZZ1Ma (作者)

    <scroll-view scroll-y type="list" bindscroll="{{c}}">  
    <vertical-drag-gesture-handler onGestureEvent="{{b}}">
    <view>
    <view wx:for="{{a}}" wx:for-item="item" wx:key="b">{{item.a}}</view>
    </view>
    </vertical-drag-gesture-handler>
    </scroll-view>

    "use strict";  
    const common_vendor = require("../../common/vendor.js");
    const _sfc_main = {
    onLoad(options) {
    console.log("pageLoad");
    },
    methods: {
    onScroll(e) {
    console.log(e);
    },
    handlePan(gestureEvt) {
    "worklet";
    console.log(gestureEvt);
    }
    }
    };
    function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
    return {
    a: common_vendor.f(100, (item, index, i0) => {
    return {
    a: common_vendor.t(item),
    b: index
    };
    }),
    b: common_vendor.o((...args) => $options.handlePan && $options.handlePan(...args)),
    c: common_vendor.o((...args) => $options.onScroll && $options.onScroll(...args))
    };
    }
    const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "E:/HBuilder Project/fisherApplet/skylineDemo/pages/discount/discount.vue"]]);
    wx.createPage(MiniProgramPage);

    2023-02-15 11:30

  • DCloud_UNI_WZF

    回复 2***@qq.com: <vertical-drag-gesture-handler onGestureEvent="handlePan"> handlePan 定义在 methods 中,注意写 worklet;

    2023-02-15 11:30

  • zZZ1Ma (作者)

    上面是替换之后编译产物,wxml内bindonGestureEvent="{{b}}"修改为onGestureEvent="{{b}}"保存之后,结果仍然和【实际结果】的1、2条相同

    2023-02-15 11:34

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: 写了嗷,我贴了编译后的js代码

    2023-02-15 11:35

  • DCloud_UNI_WZF

    回复 2***@qq.com: 看我补充的代码,源码绑定 onGestureEvent 不要加 @ 或者 :

    2023-02-15 11:36

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: ok,明白了,使用微信小程序原生语法绑定事件

    2023-02-15 11:37

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: 可以了,感谢

    2023-02-15 11:39

  • zZZ1Ma (作者)

    新的问题:在create内this._interactionState = wx.worklet.shared(0),然后在handlePan事件内更改this._interactionState.value = gestureEvt.state会报错,this._interactionState.value is undefined

    2023-02-16 09:32

  • DCloud_UNI_WZF

    回复 2***@qq.com: 试下该写法 微信小程序原生开发是否支持

    2023-02-16 11:55

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: 目前在uniApp项目内新建wxcomponents/custom-component,使用微信原生语法封装组件,这么写没问题,但用uniApp语法在页面内这么些会报错:TypeError: Cannot set property 'value' of undefined

    2023-02-16 12:58

  • DCloud_UNI_WZF

    回复 2***@qq.com: 提供下测试工程

    2023-02-16 13:29

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: 已上传

    2023-02-16 14:16

zZZ1Ma

zZZ1Ma (作者)

附件

  • DCloud_UNI_WZF

    我试着微信小程序原生开发页面中使用 wx.worklet.shared(0) 创建变量 handlePan 中读取也是同样 undefined

    2023-02-16 16:25

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: 不会啊,demo内Tab2是微信原生语法封装的组件,球拖动的时候是有效果的;而Tab1是uniApp语法,没效果且报错

    2023-02-16 16:36

  • DCloud_UNI_WZF

    但是这样用可以


    const shareData = {  
    value: 'test shareData'
    }
    export default {
    data() {
    return {

    }
    },
    onReady() {
    console.log('index onReady')
    shareData.value = wx.worklet.shared('123123')
    console.log('shareData', shareData);
    },
    methods: {
    onScroll(e) {
    console.log('onScroll', e)
    },
    handlePan(gestureEvt) {
    "worklet";
    console.log('handlePan', gestureEvt);
    console.log('shareData', shareData);
    console.log('shareData', shareData.value);
    }
    }
    }

    2023-02-16 16:38

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: 需要在微信开发者工具右上角”详情-本地设置“切换Skyline渲染模式,你试试wxcomponents下组件handlePan输出下this._translateY.value

    2023-02-16 16:39

  • DCloud_UNI_WZF

    回复 2***@qq.com: 2是封装组件,1是页面中使用,我是说原生开发页面中使用也存在这个问题

    2023-02-16 16:42

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: demo发一下?可能我理解错了,这几天一直在写这个,微信语法还是麻烦一些;我在附件demo组件内handlePan是可以读取到this._translateY.value的

    2023-02-16 16:51

  • zZZ1Ma (作者)

    回复 DCloud_UNI_WZF: 照你这个代码替换了下, handlepan可以更新shareData.value.value的值,但是this.$scope.applyAnimatedStyle()方法不生效

    2023-02-16 17:00

  • h***@163.com

    回复 zZZ1Ma: 你好,请问你这个问题解决了吗,我现在遇到的问题是this.$scope.applyAnimatedStyle()会生效共享变量的值也变了,但是没有动画效果

    2024-02-23 11:49

  • zZZ1Ma (作者)

    回复 h***@163.com: 去年就解决了啊,你看下附件。共享变量注册时机是否对了

    2024-02-23 12:00

DCloud_UNI_WZF

DCloud_UNI_WZF

原生小程序开发工程

  • zZZ1Ma (作者)

    onReady改成onLoad即可

    2023-02-16 17:15

  • zZZ1Ma (作者)

    重启了工具,现在this.$scope.applyAnimatedStyle()又生效了

    2023-02-16 17:22

  • zZZ1Ma (作者)

    回复 2***@qq.com: vue3内wx.worklet.shared()返回的MutableValue值需要通过.value读取,应该跟Proxy.value冲突了,导致在worklet方法内读取为undefined

    2023-02-16 17:27

  • DCloud_UNI_WZF

    回复 2***@qq.com: 确实,这样用是可以的


    onLoad() {  
    console.log('index onReady')
    this.shareData = wx.worklet.shared(0)
    },
    methods: {
    onScroll(e) {
    console.log('onScroll', e)
    },
    handlePan(gestureEvt) {
    "worklet";
    console.log('this.shareData', this.$vm.shareData);

    }
    }

    2023-02-16 17:28

要回复问题请先登录注册