uni-app renderjs 的使用

在 uni-app 中使用 renderjs 的一般步骤如下：

1. 在原有 <script> 下方添加一个新的 <script> 标签，用于编写 renderjs 代码。其中， lang 属性需设置为 "renderjs" ， module 属性的值可以任意指定，它相当于为 renderjs 模块命名，后续将根据这个名字来调用其中的方法。
2. 在 renderjs 模块的 <script> 标签内，结构与普通的 JavaScript 模块类似。需要注意以下几点：

• 生命周期应使用原生 Vue 的生命周期，如 created 代替 onload 。
• 不要直接引用大型类库，推荐通过动态创建 <script> 方式引用。
• 可以使用 Vue 组件的生命周期，但不能使用 app、page 的生命周期。
• 视图层和逻辑层通讯方式与 wxs 一致，另外可以通过 this.$ownerinstance 获取当前组件的 componentDescriptor 实例。
• 观测更新的数据在视图层可以直接访问到。
• app 端视图层的页面引用资源的路径相对于根目录计算；h5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。

3. 普通 Vue 向 renderjs 传值：在 template 某元素上添加 :属性名=“vue 变量”:change:属性名=“renderjs 模块名.方法名” （其中 vue 变量 为 Vue 组件中的某个数据， renderjs 模块名 为之前定义的 module 属性的值，当 vue 变量 值改变时会触发 renderjs模块名.方法名 的方法）。
4. renderjs 向普通 Vue 传值：在 template 元素的事件绑定中使用 @事件=“renderjs 模块名.方法名” ，通过该方式触发 renderjs 中的方法，然后在这个方法中可以使用 this.$ownerinstance.callmethod('vue 组件中的方法名', 参数) 来调用普通 Vue 组件中的方法并传值。

以下是一个简单的示例代码：

<template>
  <view>
    <text>这是 Vue 页面</text>
    <!-- 普通 Vue 向 renderjs 传值 -->
    <view :vsrc="vsrc":change:vsrc="renderscript.methodInRenderjs"> </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vsrc: null // 用于与 renderjs 通信的变量
    };
  },
  methods: {
    someMethodInVue() {
      // Vue 组件中的方法
    }
  }
};
</script>

<script module="renderscript" lang="renderjs">
export default {
  data() {
    return {};
  },
  methods: {
    methodInRenderjs(newValue, oldValue, ownerVm, vm) {
      // 接收 Vue 传来的值并进行处理
      console.log("newValue", newValue);
      console.log("oldValue", oldValue);
    },
    // renderjs 向普通 Vue 传值的方法
    sendDataToVue(event, ownerInstance) {
      ownerInstance.callmethod('someMethodInVue', { // 调用 Vue 组件中的方法
        someData: '这是从 renderjs 传来的数据'
      });
    }
  }
};
</script>

在上述示例中，定义了一个名为 renderscript 的 renderjs 模块。通过 :vsrc="vsrc":change:vsrc="renderscript.methodInRenderjs" 实现了 Vue 组件向 renderjs 传值，当 vsrc 变量发生变化时，会触发 renderscript.methodInRenderjs 方法。而在 sendDataToVue 方法中，通过 this.$ownerinstance.callmethod 调用了 Vue 组件中的 someMethodInVue 方法并传递了数据。

引用：uni-app

原文地址：https://blog.csdn.net/m0_46149348/article/details/140643234

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！