uni-app vue3项目中真机运行时，无法调用renderjs中的方法

发布于 1周前 作者 caililin 来自 Uni-App

uni-app vue3项目中真机运行时，无法调用renderjs中的方法

操作步骤：

<template>
<view class="dynamicDetails" style="padding-top: 200rpx;">
<up-button text="月落" @click="renderss.test"></up-button>
</view>
</template>  
<script module="renderss" lang="renderjs">
export default {
methods:{
// 无法执行test方法
test() {
console.log('qwe')
}
}
}
</script>

预期结果：

<p>控制台打印qwe</p>

实际结果：

<p>无效果</p>

bug描述：

<p>vue3,app开发真机运行无法执行renderjs中的方法</p>
开发环境 版本号 项目创建方式
PC开发环境 Windows HBuilderX
PC开发环境版本 Windows 11 家庭中文版 22631.3007
手机系统 Android
手机系统版本 Android 15
手机厂商 OPPO
手机机型 Reno8
页面类型 vue
vue版本 vue3
打包方式 云端

Harmonyos Next教程
2 回复

兄弟们如果使用uviewPlus不要和renderjs一起使用，这个问题就是uviewPlus的问题，包括在uviewPlus的弹出层组件中使用点击事件去触发renderjs中的方法会失效的


在uni-app中使用Vue 3时，如果在真机运行时遇到无法调用renderjs中的方法，通常是因为renderjs的执行环境与主线程环境是隔离的，且renderjs主要用于提升渲染性能，直接调用其方法可能受限。以下是一个通过事件机制在renderjs和主线程之间通信的示例代码，这样可以在真机上实现功能调用。

主线程代码（Vue 3组件）

<template>
  <view>
    <button @click="sendMessageToRenderJS">Call RenderJS Method</button>
    <text>{{ messageFromRenderJS }}</text>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const messageFromRenderJS = ref('');
let renderJSEventListener;

const sendMessageToRenderJS = () => {
  // 使用自定义事件向renderjs发送消息
  uni.$emit('custom-event', { message: 'Hello from Main Thread' });
};

// 监听来自renderjs的事件
renderJSEventListener = uni.$on('response-from-renderjs', (event) => {
  messageFromRenderJS.value = event.detail.message;
});

onUnmounted(() => {
  // 组件卸载时移除事件监听器
  uni.$off('response-from-renderjs', renderJSEventListener);
});
</script>

<style scoped>
/* 添加你的样式 */
</style>

RenderJS代码

在页面的.vue文件的<script>标签内添加renderjs块：

<script render="sync">
export default {
  mounted() {
    // 监听主线程发送的自定义事件
    uni.$on('custom-event', (event) => {
      const message = event.detail.message;
      console.log('Received from main thread:', message);
      
      // 处理后向主线程发送响应事件
      uni.$emit('response-from-renderjs', {
        message: `Hello from RenderJS, got message: ${message}`
      });
    });
  },
  unmounted() {
    // 清理事件监听器（可选，根据需求决定是否需要）
    uni.$off('custom-event');
  }
};
</script>

说明

  1. 主线程代码：在Vue 3组件中，通过uni.$emit发送自定义事件到renderjs，并通过uni.$on监听来自renderjs的响应事件。
  2. RenderJS代码：在renderjs块中，通过uni.$on监听主线程发送的自定义事件，并在处理后通过uni.$emit发送响应事件回主线程。
  3. 事件机制：这种通信方式避免了直接调用renderjs方法的问题，通过事件机制实现了两个环境之间的数据交互。

确保你的uni-app项目配置正确，且已正确引入Vue 3。此示例应能在真机上正常运行，实现主线程与renderjs之间的通信。

回到顶部