注册 登录
zZZ1Ma
zZZ1Ma
  • 发布：2023-02-09 10:42
  • 更新：2024-04-28 13:04
  • 阅读：4120

【报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 已支持

    2023-02-27 16:04 分享

    • 曾小晨

      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 已修复。

    2023-03-23 12:41 分享

    • 大虾虾

      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事件确实有绑定到

    2023-02-09 10:48 分享
    DCloud_UNI_WZF

    DCloud_UNI_WZF

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

    2023-02-13 16:49 分享
    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

    2023-02-14 20:36 分享

    • 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 (作者)

    附件

    2023-02-16 14:16 分享

    • 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

    原生小程序开发工程

    2023-02-16 17:04 分享

    • 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

    评论 取消
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报