uni-app 编译微信小程序时catchtouchmove中的变量无法识别

uni-app 编译微信小程序时catchtouchmove中的变量无法识别

操作步骤:

将代码放在hbulder x中启动微信小程序后, 直接查看微信开发者工具中的wxml代码即可复现

预期结果:

预期编译后为catchtouchmove="{{b?test.touchmove:null}}"

<view wx:for="{{a}}" wx:for-item="item" wx:key="c" style="width:100px;height:100px;background-color:red" dragging="{{b}}" bindtouchstart="{{test.touchstart}}" catchtouchmove="{{b?test.touchmove:null}}" catchtouchend="{{test.touchend}}">
    <view style="width:100%;height:100%;padding:10px;box-sizing:border-box">
        <view style="width:100%;height:100%;background-color:#ffffff99">{{item.a}}-{{item.b}}</view>
    </view>
</view>

实际结果:

实际 catchtouchmove="{{dragging.value?test.touchmove:null}}"

<view wx:for="{{a}}" wx:for-item="item" wx:key="c" style="width:100px;height:100px;background-color:red" dragging="{{b}}" bindtouchstart="{{test.touchstart}}" catchtouchmove="{{dragging.value?test.touchmove:null}}" catchtouchend="{{test.touchend}}">
    <view style="width:100%;height:100%;padding:10px;box-sizing:border-box">
        <view style="width:100%;height:100%;background-color:#ffffff99">{{item.a}}-{{item.b}}</view>
    </view>
</view>

bug描述:

<template>  
    <!-- #ifndef H5 -->  
    <view  
        style="width: 100px; height: 100px; background-color: red;"  
        v-for="(item, index) in dataList"  
        :dragging="dragging"   
        :key="item.id"  
        @touchstart="test.touchstart"  
        :catchtouchmove="dragging?test.touchmove:null"  
        :catchtouchend="test.touchend"  
        >  
            <view style="width: 100%; height: 100%; padding: 10px; box-sizing: border-box;" >  
                <view style="width: 100%; height: 100%; background-color: #ffffff99;">  
                    {{item.name}}-{{item.id}}  
                </view>  
            </view>  
    </view>  
    <!-- #endif -->  
</template>  
<script lang="wxs" module="test">  
    module.exports = {  
        touchstart: function(event, ownerInstance) {  
            ownerInstance.callMethod("switchDrag", true)  
        },  
        touchmove: function(event, ownerInstance) {  
            console.log("touchmove");  
        },  
        touchend: function(event, ownerInstance) {  

        }  
    };  
</script>  
<script setup>  
    import { computed, ref, watch, getCurrentInstance, onMounted  } from 'vue';  
    const dataList = ref([{ id: 1, name: 'a', }, { id: 2, name: 'b', }])  
    const dragging = ref(true)  

    function switchDrag(value) {  
        dragging.value = value  
        console.log("@A", dragging.value);  
    }  
    defineExpose({  
        switchDrag,  
        dragging,  
    });  
</script>

:catchtouchmove="dragging?test.touchmove:null"
编译城微信小程序后会变成
catchtouchmove="{{dragging.value?test.touchmove:null}}"
然而在微信小程序的wxml是取不到dragging.value

dragging="dragging" 加上这一行可以看到编译成微信小程序后
变成了
dragging="{{b}}"
手动将微信小程序编译成的`catchtouchmove="{{dragging.value?test.touchmove:null}}"`  
改成`catchtouchmove="{{b?test.touchmove:null}}"`  
才可以生效, 是不是`:catchtouchmove="dragging?test.touchmove:null"`这种写法编译器没有处理, 直接当作vue3进行编译了 

如果不加`:dragging="dragging", 只有`:catchtouchmove="dragging?test.touchmove:null"` 甚至都不会映射dragging这个变量, 是不是没识别到


更多关于uni-app 编译微信小程序时catchtouchmove中的变量无法识别的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

暂不支持 dragging?test.touchmove:null 这种表达式

更多关于uni-app 编译微信小程序时catchtouchmove中的变量无法识别的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uniapp的vue2 版本, 和原生微信小程序都可以这样写, 编译器可以判断校验一下吗

回复 2***@qq.com: 这里会优化一下

回复 DCloud_UNI_JBB: 预计啥时候会发版啊官方大大

回复 2***@qq.com: 最近会看下,修复了会同步版本到评论区

回复 DCloud_UNI_JBB: 好的, 非常感谢

这是一个uni-app编译器的bug,在条件绑定事件处理器时,编译器未能正确处理Vue响应式变量的解包。

问题出现在:catchtouchmove="dragging?test.touchmove:null"这行代码。在Vue 3的<script setup>中,dragging是一个ref响应式变量,但在模板中应该自动解包为dragging.value。然而uni-app编译器在转换到微信小程序wxml时,错误地将条件表达式中的dragging直接编译为dragging.value,导致在wxml中无法识别。

从你提供的截图可以看到,编译器生成了{{dragging.value?test.touchmove:null}},但微信小程序的wxml环境无法访问Vue组件的dragging.value属性。

临时解决方案是使用计算属性来包装条件判断:

const shouldCatchTouchMove = computed(() => dragging.value ? test.touchmove : null)

然后在模板中使用:

:catchtouchmove="shouldCatchTouchMove"
回到顶部