当前位置：首页 > news >正文

uni-app中使用RenderJs 使用原生js

news 来源：原创 2025/5/22 8:39:15

RenderJs运行的层叫【视图层】，Uniapp原生Script叫【逻辑层】，逻辑层要调用视图层需要使用一个叫【watcher】，具体怎么调用呢

为了实现这两层之间的通信，uniapp提供了一些特定的机制。以下是对这些通信机制的详细解释，以及一个具体的示例，说明逻辑层如何调用视图层的watcher。

通信机制
‌通过this.$ownerInstance获取当前组件的ComponentDescriptor实例‌：

在RenderJs中，你可以通过this.$ownerInstance访问到当前组件的ComponentDescriptor实例。这个实例提供了与逻辑层通信的接口。
‌通过事件和callMethod方法进行通信‌：

逻辑层可以触发事件，并在RenderJs中监听这些事件。
RenderJs也可以通过this.$ownerInstance.callMethod方法调用逻辑层中的方法，并传递数据。

举例：

<template><view><!-- 视图层组件，绑定:prop和:change:prop --><view :prop="someData" :change:prop="renderScript.onDataChange"></view><button @click="changeData">改变数据并触发watcher</button></view>
</template><script>
export default {data() {return {someData: '初始数据', // 逻辑层数据};},methods: {changeData() {this.someData = '新数据'; // 改变数据，这将触发视图层的watcher},// 逻辑层接收来自视图层的数据（可选）receiveDataFromRenderJs(data) {console.log('从视图层接收到的数据:', data);},},
};
</script><script module="renderScript" lang="renderjs">
export default {data() {return {receivedData: '', // 用于存储从逻辑层接收到的数据};},methods: {onDataChange(newValue, oldValue, ownerVm, vm) {console.log('数据变化了，新值:', newValue, '旧值:', oldValue);// 可以在这里调用逻辑层的方法，并传递数据// ownerVm.callMethod('receiveDataFromRenderJs', { someKey: newValue });},// 视图层向逻辑层发送数据（示例）sendDataToLogicLayer() {// 假设这里有一些逻辑需要向逻辑层发送数据const dataToSend = { fromRenderJs: '这是视图层的数据' };this.$ownerInstance.callMethod('receiveDataFromRenderJs', dataToSend);},},
};
</script>

解释
‌模板部分‌：

我们定义了一个视图层组件，并使用:prop和:change:prop绑定了逻辑层的数据和视图层的watcher方法。
当someData在逻辑层发生变化时，将触发renderScript.onDataChange方法。
‌逻辑层部分‌：

我们定义了一个someData数据和一个changeData方法，用于改变someData的值。
当someData的值改变时，将触发视图层的onDataChangewatcher方法。
我们还定义了一个receiveDataFromRenderJs方法，用于接收来自视图层的数据（虽然在这个示例中并没有直接调用它，但展示了如何接收数据）。
‌视图层（RenderJs）部分‌：

我们定义了一个onDataChange方法，当逻辑层的数据变化时，这个方法将被调用。
在onDataChange方法中，我们可以访问新旧值，并可以在这里调用逻辑层的方法，传递数据。
我们还定义了一个sendDataToLogicLayer方法，用于演示如何从视图层向逻辑层发送数据。
通过这种方式，你可以在uniapp中实现逻辑层和视图层之间的有效通信

相关文章：