uni-app 微信小程序skyline模式下worklet和手势组件功能不正常

uni-app 微信小程序skyline模式下worklet和手势组件功能不正常

开发环境 版本号 项目创建方式
Mac macOS 15.6 CLI
Stable 1.06.2504040
3.8.10
3.0.0-4070620250821001

bug描述：

微信平台什么时候能支持一下skyline的worklet啊？目前遇到问题：使用组合式api，手势组件（如<pan-gesture-handler>）相应函数无法访问，因为uniapp会直接将其定义为变量，然后变量再映射函数。如果使用选项式api，倒是可以访问，但是因为响应事件的workleth运行在ui线程，无法访问到vue组件内部data，如果在组件外部使用wx.worklet.shared创建共享变量，那组件重复调用又会数据冲突。有没有什么解决方案呢。

demo在附件里，cli安装方式。 解压后npm install 然后运行微信小程序项目：npm run dev:mp-weixin 微信开发者工具打开后记得开启skyline渲染调试

示例代码：

<script>  
const {shared} = wx.worklet;  

const publicVal = shared(0);  
export default {  
    data() {  
        return {  
            msg: 'comb',  
            instanceVal: shared(1),  
        };  
    },  
    methods: {  
        handlePan(evt) {  
            'worklet';  
            console.log('handlePan->', publicVal.value); // 可以访问  

            console.log('handlePan->', this.msg); // ui线程内，无法访问！！  
            console.log('handlePan->', this.instanceVal.value); // ui线程内，无法访问！！  
        },  
    }  
}  
</script>  
<template>  
    <div class="test">  
        <pan-gesture-handler worklet:ongesture="handlePan">  
            <div class="drag">dragb</div>  
        </pan-gesture-handler>  
    </div>  
</template>

更多关于uni-app 微信小程序skyline模式下worklet和手势组件功能不正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

发个完整的demo

更多关于uni-app 微信小程序skyline模式下worklet和手势组件功能不正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


demo更新上去了，在文末

demo中拖动滑块，组合式api组件中无法按照预期的执行相应函数，选项式api可以执行，但是无法访问组件data

回复 luweiweiss: 组合式目前不支持

回复 DCloud_UNI_JBB: 回复 luweiweiss: 原生微信小程序也不支持访问data中的数据

在 uni-app 中使用微信小程序的 Skyline 渲染引擎时，Worklet 和手势组件的兼容性问题确实存在。根据你的代码和描述，核心问题在于 Worklet 运行在 UI 线程，无法直接访问 Vue 组件实例的响应式数据（如 this.msg 或 this.instanceVal）。

解决方案：

  1. 使用共享变量传递数据：通过 wx.worklet.shared 创建共享变量，在 Worklet 内外传递数据。但需注意组件复用时的数据冲突问题。可以通过为每个组件实例生成唯一标识符（如 UUID）来隔离共享变量。

  2. 利用事件传递：在 Worklet 内通过 wx.worklet.event 触发事件，在 Vue 组件中监听并处理数据更新。例如：

    handlePan(evt) {
  'worklet';
  wx.worklet.event.emit('panEvent', { value: publicVal.value });
}
回到顶部