uni-app vue3下 wxs小程序端 callMethod 无效

uni-app vue3下 wxs小程序端 callMethod 无效 产品分类：uniapp/小程序/微信

项目 内容
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 w10
HBuilderX类型 正式
HBuilderX版本号 3.3.10
第三方开发者工具版本号 1.0.5
基础库版本号 2.19.2
项目创建方式 HBuilderX

bug描述：

wxs文件在组件中引用，小程序端 wxs中的callMethod 无法调用，触发不了组件中定义的方法

示例代码：

wxs 文件

function touchstartEvent(e, ins) {  
    console.log('touchstartEvent');  
     ins.callMethod('wxsCall', 'touchstartEvent')  
}  

function touchmoveEvent(e, ins) {  
    console.log('touchmoveEvent');  
     ins.callMethod('wxsCall', 'touchmoveEvent')  
}  

function touchendEvent(e, ins) {  
    console.log('touchendEvent');  
     ins.callMethod('wxsCall', 'touchendEvent')  
}  

module.exports = {  
    // propObserver: propObserver,  
    // callObserver: callObserver,  
    touchstartEvent: touchstartEvent,  
    touchmoveEvent: touchmoveEvent,  
    touchendEvent: touchendEvent  
}

vue文件

<template>  
    <view class="container wxs-demo" @touchstart="wxsTest.touchstartEvent" @touchmove="wxsTest.touchmoveEvent"  
        @touchend="wxsTest.touchendEvent" @touchcancel="wxsTest.touchendEvent">  

    </view>  
</template>  

<!-- 微信小程序, QQ小程序, app, h5使用wxs -->  
<!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->  
<script src="./test.wxs" module="wxsTest" lang="wxs"></script>  
<!-- #endif -->  
<script setup>  

const wxsCall = (data)=>{  
    console.log(data,2222222);  
}  

</script>  

<style lang="scss" scoped>  
    .wxs-demo{  
        width: 500rpx;  
        height: 500rpx;  
        background-color: red;  
    }  
</style>

更多关于uni-app vue3下 wxs小程序端 callMethod 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

查看相关问题：https://ask.dcloud.net.cn/question/137684

更多关于uni-app vue3下 wxs小程序端 callMethod 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的

在uni-app的Vue3 + WXS方案中，ins.callMethod 无法触发组件方法，核心原因是 Vue3的 <script setup> 语法默认不会将内部函数暴露给WXS的 callMethod。

WXS的 callMethod 要求组件实例上存在对应的方法，但 setup 中定义的 wxsCall 并未注册到组件实例的 methods 中。即使你在模板中通过 @touchstart 直接绑定了原生事件，WXS内部 ins.callMethod 查找的是组件类的 methods 对象，而 setup 组件实例并不包含 methods。

原理解析：

  • 微信小程序原生中，WXS通过 callMethod 调用组件方法，要求该方法必须在 Component({ methods: { methodName(){} } }) 中定义。
  • uni-app的Vue3 setup 写法最终编译为小程序的 Component，但 setup 中的函数仅在组件初始化时作为闭包存在，并未自动注入 methods。

若需保持 setup 写法，必须使用 defineExpose 显式暴露方法，但WXS的 callMethod 并不读取 expose 导出的内容（expose 仅用于父组件通过 ref 访问子组件）。因此目前官方方案是改用选项式API，将 wxsCall 定义在 methods 中：

<script>
  export default {
    methods: {
      wxsCall(data) {
        console.log(data, 2222222);
      }
    }
  }
</script>
回到顶部