自学内容网 自学内容网

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 方式,可以直接访问逻辑层数据。
  1. 普通 Vue 向 renderjs 传值:在 template 某元素上添加 :属性名=“vue 变量”:change:属性名=“renderjs 模块名.方法名” (其中 vue 变量 为 Vue 组件中的某个数据, renderjs 模块名 为之前定义的 module 属性的值,当 vue 变量 值改变时会触发 renderjs模块名.方法名 的方法)。
  2. 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>

在上述示例中,定义了一个名为 renderscriptrenderjs 模块。通过 :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)!