uni-app vue3版本微信小程序wxs无法回调逻辑层 而vue2正常

uni-app vue3版本微信小程序wxs无法回调逻辑层 而vue2正常

操作步骤：

  • 先使用vue2版本编译到小程序, 点击红框,就会显示点击的坐标;
  • 再使用vue3版本编译到小程序,点击红框无法显示,wxsCall这个方法没有执行

预期结果：

  • vue3正常

实际结果：

  • vue3不正常,vue2正常

bug描述：

vue3版本微信小程序wxs无法回调逻辑层, vue2正常, 复现代码:

<template>  
    <view>  
        <view class="touch-warp" @touchstart="wxsBiz.touchstartEvent" >  
            点击的坐标: {{text}}  
        </view>  
    </view>  
</template>  

<script src="./wxs.wxs" module="wxsBiz" lang="wxs"></script>  

<script>  
    export default {  
        data() {  
            return {  
                text: ''  
            }  
        },  
        methods: {  
            wxsCall(p){  
                // 使用vue3版本, wxs回调不到逻辑层,导致此处无法执行, 而vue2版本是正常的  
                this.text = JSON.stringify(p)  
            }  
        }  
    }  
</script>  

<style>  
    .touch-warp{  
        padding: 100rpx 20rpx;  
        border: 2px solid red;  
    }  
</style>

./wxs.wxs

function touchstartEvent(e, ins){  
    var p = getPoint(e)  
    ins.callMethod('wxsCall', p)  
}  

function getPoint(e) {  
    if (!e) {  
        return {x: 0,y: 0}  
    }  
    if (e.touches && e.touches[0]) {  
        return {x: e.touches[0].pageX,y: e.touches[0].pageY}  
    } else if (e.changedTouches && e.changedTouches[0]) {  
        return {x: e.changedTouches[0].pageX,y: e.changedTouches[0].pageY}  
    } else {  
        return {x: e.clientX,y: e.clientY}  
    }  
}  

module.exports = {  
    touchstartEvent: touchstartEvent  
}

相关链接：

附件


更多关于uni-app vue3版本微信小程序wxs无法回调逻辑层 而vue2正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

vue3组合式API使用setup，WXS的callMethod调用setup内方法须用defineExpose暴露

<script module="wxs" lang="wxs"> module.exports = { _click: function(event, ownerInstance) { // 更改背景颜色 event.instance.setStyle({ 'background-color': '#e64340' }) // 调用逻辑层方法 ownerInstance.callMethod('printLog', event) return false } } </script> <script setup> defineExpose({ printLog: args => { console.log(args) } }) </script>

SJS同理

更多关于uni-app vue3版本微信小程序wxs无法回调逻辑层 而vue2正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题复现，已记录后续优化，已加分，感谢您的反馈！

什么时候才能修复啊 这个bug已经出现很长时间了

还没修复吗？

今天更新3.3.13版本的HBuilderX 已经好了

嗯，小程序好了，有时间的话可以兼容一下vue3组合式api的写法吗？

这是一个已知的Vue3版本下的兼容性问题。在uni-app的Vue3版本中，WXS调用逻辑层方法时存在限制。

问题原因： Vue3版本中，WXS通过ins.callMethod()调用逻辑层方法时，只能调用在methods中直接定义的方法。如果方法是通过其他方式（如混入、继承等）间接定义的，则无法被正确调用。

解决方案：

  1. 确保方法直接定义在methods中（如你示例中的写法是正确的）

  2. 如果问题仍然存在，尝试以下修改：

<script>  
export default {  
    data() {  
        return {  
            text: ''  
        }  
    },  
    methods: {  
        // 确保wxsCall方法直接定义在methods对象中
        wxsCall(p){  
            this.text = JSON.stringify(p)  
        }  
    }  
}  
</script>
  1. 临时解决方案： 如果上述方法无效，可以考虑暂时避免使用WXS回调，改用纯逻辑层处理事件：
<template>  
    <view>  
        <view class="touch-warp" @touchstart="handleTouchStart" >  
            点击的坐标: {{text}}  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            text: ''  
        }  
    },  
    methods: {  
        handleTouchStart(e){  
            const touch = e.touches[0] || e.changedTouches[0]
            this.text = JSON.stringify({
                x: touch.pageX,
                y: touch.pageY
            })  
        }  
    }  
}  
</script>
回到顶部