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

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

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

通信机制

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

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

‌通过事件和callMethod方法进行通信‌：

逻辑层可以触发事件，并在RenderJs中监听这些事件。

RenderJs也可以通过this.$ownerInstance.callMethod方法调用逻辑层中的方法，并传递数据。

举例：

javascript 复制代码

<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中实现逻辑层和视图层之间的有效通信