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
暂不支持 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"

