首页 > 其他分享 >uniapp中renderjs的使用

uniapp中renderjs的使用

时间:2024-07-04 17:42:55浏览次数:1  
标签:uniapp console renderjs web 视图 receiveRenderData 使用 log

renderjs是一个运行在视图层的js。它只支持app-vue和web。
renderjs的主要作用有2个:
  
1.让APP端引入web端的js库,可以使用web的功能
  2.大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力

<template>
    <view>
        <button @click="lzRend.emitData">触发renderjs的事件</button>
        <!-- lzRend为renderjs中的名字 -->
        <view id="lzRend" :info="info" :change:info="lzRend.receiveInfo"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 用于桥接的数据
                info: '要传递的数据,数据发生变化则会传递给renderjs中的receiveInfo方法',
            };
        },
        mounted() {
            setTimeout(() => {
                this.info = '变化的数据';
            }, 1000);
        },
        methods: {
            // renderjs发送过来的数据
            receiveRenderData(val) {
                console.log('renderjs返回的值-->', val);
            },
        },
    };
</script>
<script module="lzRend" lang="renderjs">
    export default {
        data() {
            return {
                map: null,
                linePath: [],
            }
        },
        mounted() {},
        methods: {
            // 发送数据到逻辑层
            emitData(e, ownerVm) {
                console.log(e);
                // 发送数据到逻辑层
                ownerVm.callMethod('receiveRenderData', this.linePath)
                // 或者使用
                this.$ownerInstance.callMethod('receiveRenderData', {
                    name: name,
                    args: args
                });
                
            },
            // 逻辑层数据发生变化时触发(接收逻辑层发送的数据)
            receiveInfo(newValue, oldValue) {
                console.log(newValue, oldValue);
            },
        }
    }
</script>

<style>
</style>

 

标签:uniapp,console,renderjs,web,视图,receiveRenderData,使用,log
From: https://www.cnblogs.com/lizhao123/p/18284287

相关文章

  • 使用 Putty 的 PSFTP 上传文件到服务器(手工、bat批处理)
    一、手工方式上传1.建立连接:psftp.exe-iaws.ppk(自己的秘钥)2.使用用户名登录地址:[email protected]显示Remoteworkingdirectoryis/home/xxx此时已经建立了连接。3.上传文件putfilename默认传到/home/xxx目录下4.下载文件get/home/xxx/filename......
  • 使用python基本库代码实现神经网络常见层
    一:批量归一化(BatchNormalization)代码解释:函数定义:batch_norm函数接受输入数据X、缩放参数gamma、平移参数beta和一个小常数epsilon,用于防止除零错误。X的形状为(N,D),其中N是批量大小,D是特征维度。gamma和beta的形状为(1,D)。计算批量均值和方差:me......
  • java编译时出现错误[ERROR] 不再支持源选项 5。请使用 6 或更高版本。[ERROR] 不再支
    当我引入一个新项目在控制台输入命令mvn  clean install -U,报错出现原因是我们下载了多个java版本,我的电脑上就有1.8和11两个版本,此时只需在引入的pom文件中指定具体的版本即可<maven.compiler.source>11</maven.compiler.source><maven.compiler.target>11</mave......
  • 当你不小心使用了 git reset --hard HEAD^
    会话总结1.使用gitreset--hardHEAD^后如何恢复撤销的gitcommit提交知识点:gitreset--hardHEAD^会回退到前一个提交,并删除工作目录中的更改。通过gitreflog查看操作历史记录,找到被回退的提交哈希值。使用gitreset--hard<commit_hash>恢复到特定的提交。......
  • QThread::run函数的使用(涉及到QThread::run, Qthread::start,protected,virtual虚函数,o
    RobotCommuServer.h#ifndefROBOTCOMMUSERVER_H#defineROBOTCOMMUSERVER_H#include<QThread>classRobotCommuServer:publicQThread{Q_OBJECTpublic:explicitRobotCommuServer(QObject*parent=nullptr);~RobotCommuServer();void......
  • Windows 安装DBeaver,并使用DBeaver进行数据库的操作(达梦数据库、MySQL数据库等)
    安装DBeaver可视化工具安装前准备准备环境JDK17DBeaver安装包达梦数据库驱动DBeaver代理包开始安装MySQL连接&操作MySQL连接操作达梦数据库连接&操作达梦数据库驱动DBeaver加载达梦数据库驱动达梦数据库连接操作免责声明安装前准备准备环境JDK17安装地址(官......
  • 记录一下使用小程序反编译获取源码
    起因是自己开发的小程序源码被扒了,泄露了一些数据,要做优化调整代码,所以尝试扒自己开发的小程序源码。安装node.jswxappUnpacker(逆向反编译工具)使用夜神模拟器(直接是root默认,手机需要进入root模式,就是模拟器比较卡)实操流程如下打开wxappUnpacker所在文件夹,cmd进入命令......
  • 如何在SpringBoot项目中使用Activiti工作流(整套代码)
      前言activiti工作流引擎项目,企业erp、oa、hr、crm等企事业办公系统轻松落地,一套完整并且实际运用在多套项目中的案例,满足日常业务流程审批需求。一、项目形式springboot+vue+activiti集成了activiti在线编辑器,流行的前后端分离部署开发模式,快速开发平台,可插拔工作流服务......
  • 【数据结构】(C语言):二叉搜索树(不使用递归)
    二叉搜索树:非线性的,树是层级结构。基本单位是节点,每个节点最多2个子节点。有序。每个节点,其左子节点都比它小,其右子节点都比它大。每个子树都是一个二叉搜索树。每个节点及其所有子节点形成子树。可以是空树。C语言实现:(使用链表实现,不使用递归) 创建结构体数据类型(记录二叉......
  • ABP之使用Hangfire
    首先ABP自带Hangfire,所以我们今天使用Volo.Abp.BackgroundJobs.HangFire1、在项目需要位置引入Nuget包(6.0.3)2、再引入基于内容的存储库:Hangfire.MemoryStorage(1.7.0)3、Hangfire.MemoryStorage不是abp封装的,所以可能会存在里面引用的Hangfire.Core版本和Volo.Abp.BackgroundJ......