uni-app vue3 中 wxs ownerInstance.callMethod('XXX'); 无效

uni-app vue3 中 wxs ownerInstance.callMethod(‘XXX’); 无效

开发环境	版本号	项目创建方式
Mac	14	HBuilderX

示例代码：

function endDrag(event, ownerInstance) {  
  ownerInstance.callMethod('wxsSendEemit');  
}

操作步骤：

复制代码

预期结果：

可以正常调用

实际结果：

无法正常调用

bug描述：

使用 wxs 写法，在 vue3 中无法调用 js 事件即ownerInstance.callMethod 无效

vueper 1楼•13 天前

在 uni-app 中使用 Vue 3 时，wxs 中的 ownerInstance.callMethod('XXX') 可能无效的原因通常与 Vue 3 的响应式系统或 wxs 与 Vue 实例之间的通信机制有关。以下是一些可能的原因和解决方案：

1. 确保 `wxs` 和 `Vue` 实例之间的通信正确

wxs 是微信小程序中的一种脚本语言，它运行在微信小程序的渲染层，而 Vue 实例运行在逻辑层。ownerInstance.callMethod 是 wxs 调用 Vue 实例方法的一种方式。
确保你在 Vue 组件中定义了 XXX 方法，并且该方法可以被 wxs 调用。

2. 检查 `wxs` 代码

确保 wxs 代码正确，并且 ownerInstance.callMethod('XXX') 被正确调用。例如：

module.exports = {
  handleTap: function(event, ownerInstance) {
    ownerInstance.callMethod('XXX');
  }
};

3. 检查 `Vue` 组件中的方法

在 Vue 组件中，确保你定义了 XXX 方法，并且该方法可以被 wxs 调用。例如：

export default {
  methods: {
    XXX() {
      console.log('XXX method called');
    }
  }
};

4. 确保 `wxs` 和 `Vue` 实例绑定正确

在 uni-app 中，wxs 和 Vue 实例的绑定可能需要在模板中显式声明。例如：
```
<template>
  <view @tap="handleTap">
    <wxs module="m1" src="./index.wxs"></wxs>
  </view>
</template>
```
在 wxs 中，handleTap 方法会调用 ownerInstance.callMethod('XXX')。

5. 检查 `uni-app` 版本

确保你使用的 uni-app 版本支持 Vue 3 和 wxs 的集成。某些旧版本可能存在兼容性问题。

6. 调试和日志

在 wxs 和 Vue 组件中添加调试日志，确保 ownerInstance.callMethod('XXX') 被正确调用，并且 XXX 方法被正确执行。

7. 使用 `uni-app` 官方文档

参考 uni-app 官方文档，确保你按照官方推荐的方式使用 wxs 和 Vue 3。

8. 替代方案

如果 ownerInstance.callMethod('XXX') 仍然无效，考虑使用其他方式实现 wxs 和 Vue 实例之间的通信，例如通过 uni.$emit 和 uni.$on 进行事件通信。

示例代码

<template>
  <view @tap="handleTap">
    <wxs module="m1" src="./index.wxs"></wxs>
  </view>
</template>

<script>
export default {
  methods: {
    XXX() {
      console.log('XXX method called');
    },
    handleTap(event) {
      // 这里可以调用 wxs 中的方法
    }
  }
};
</script>

// index.wxs
module.exports = {
  handleTap: function(event, ownerInstance) {
    ownerInstance.callMethod('XXX');
  }
};