uniapp的renderjs使用

‌uniapp中的RenderJS主要服务于APP和H5平台,其作用包括降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力,以及在视图层操作DOM和运行Web的JS库‌。

RenderJS是uni-app中一个特性,它允许开发者在页面中使用JavaScript直接渲染原生组件。这在某些情况下可以提供更高的效率和更多的功能,因为它可以直接操作原生组件。

通过RenderJS,可以在APP中操作DOM并实现与原生层的数据交互,解决H5技术栈在APP上的限制,实现高性能的地图功能和视图交互。

一、renderjs的作用是什么?

renderjs 主要服务于APP,因为uni-app为vue+js+html进行编写,整个是h5的技术栈。而app上并没有document等基础对象。那么,涉及到这些的前端类库就无法使用,例如html2、canvas、canvas2、image。而要用这些怎么办,这是用就出现了renderjs这种视图层工具来进行渲染。

运行在视图层的js

大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力(减少通讯损耗提升性能,例如一些手势或canvas动画的场景)

在视图层操作dom,运行for web的js库(可以操作dom,意味着拥有window、document等这些全局变量,在app-vue的service层没有这些)

二、renderjs怎样使用?

1.原生层数据通过监听传入renderjs层(可以通过调用原生层的方法触发)

2.直接调用renderjs层方法传出数据

三、测试代码

<template><view><view  :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">{{msg}}</view><button @click="renderScript.emitData">直接调用renderjs中的emitData的方法</button><button @click="changeMsg" class="app-view">改变msg的值,直接调用renderjs中receiveMsg的值</button><button @click="renderScript.renferMsg">通过renderjs改变msg的值,同时调用renderjs中的emitData的方法</button></view>
</template><script>export default {data() {return {msg: '我是service层原来的msg',};},methods: {// 触发逻辑层出入renderjs数据改变changeMsg() {this.msg = "msg值改变了";},// 接收renderjs发回的数据receiveRenderData(val) {console.log('renderjs返回的值-->', val);},//接收renderjs发回的数据,同时触发:change:msg,调用enderjs中的emitData的方法serviceClick(e){this.msg=e}}};
</script><script module="renderScript" lang="renderjs">export default {data() {return {name: '我是renderjs数据'}},methods: {renferMsg(event, ownerInstance) {// 调用 service层的serviceClick方法,传值console.log(event,ownerInstance)ownerInstance.callMethod('serviceClick', {test: '这是点击renderjs的区域,向service层传递变量'})},// 接收逻辑层发送的数据receiveMsg(newValue, oldValue, ownerVm, vm) {console.log('msg变化了newValue', newValue)console.log('msg变化了oldValue', oldValue)console.log('msg变化了ownerVm', ownerVm)console.log('msg变化了vm', vm)},// 发送数据到逻辑层emitData(e, ownerVm) {ownerVm.callMethod('receiveRenderData', this.name)}}};
</script>

注意:1.在renderjs层不能使用uni或其他框架的API,例如uni.request、uni.getlocation等等方法,需在原生层调用后触发监听将数据传入。

2.在APP端renderjs层的data与原生层的data互不相干

3.this.$ownerInstance.callMethod方法必须通过点击事件执行

4.地图方法都要写在renderjs层中,不能使用子组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/479392.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu 安装 docker 记录

本文假设系统为 Ubuntu&#xff0c;从 16.04 到 24.04&#xff0c;且通过 APT 命令安装。理论上也其他 Debian 系的操作系统。 WSL 也一样。 感觉 Docker 官方在强推 Docker Desktop&#xff0c;搜索 Docker 安装文档&#xff0c;一不小心就被导航到了 Docker Desktop 的安装页…

太速科技-512-基于ZU19EG的4路100G 8路40G的光纤汇流计算卡

基于ZU19EG的4路100G 8路40G的光纤汇流计算卡 一、板卡概述 本板卡系我司自主设计研发&#xff0c;基于Xilinx公司Zynq UltraScale MPSOC系列SOC XCZU19EG-FFVC1760架构&#xff0c;ARM端搭载一组64-bit DDR4&#xff0c;总容量达4GB&#xff0c;可稳定运行在2400MT/s…

C#基础56-60

56.字符数组x中存有任意一串字符&#xff1b;串中的所有小写字母改写成大写字母&#xff0c;如果是大写字母改为小写字母&#xff0c;其他字符不变。最后把已处理的字符串仍重新存入字符数组x中&#xff0c;最后调用函数把结果输出到控制台中。 57.求出100以上1000以内所有个位…

计算机网络:应用层知识点概述及习题

网课资源&#xff1a; 湖科大教书匠 1、概述 习题1 1 在计算机网络体系结构中&#xff0c;应用层的主要功能是 A. 实现进程之间基于网络的通信 B. 通过进程之间的交互来实现特定网络应用 C. 实现分组在多个网络上传输 D. 透明传输比特流 2 以下不属于TCP/IP体系结构应用层范畴…

深入浅出摸透AIGC文生图产品SD(Stable Diffusion)

hihi,朋友们,时隔半年(24年11月),终于能腾出时间唠一唠SD了🤣,真怕再不唠一唠,就轮不到SD了,技术更新换代是在是太快! 朋友们,最近(24年2月)是真的没时间整理笔记,每天都在疯狂的学习Stable Diffusion和WebUI & ComfyUI,工作实在有点忙,实践期间在飞书上…

uniapp+vue2+uview2.0导航栏组件二次封装

样式 代码 <template><view class"navBar"><u-navbar :title"title" :titleColor"titleColor" :bgColor"bgColor" :safeAreaInsetTop"safeAreaInsetTop":autoBack"true" leftClick"leftClic…

【Git】常用命令汇总

目录 一.安装及配置 1.在 Windows 上安装 2.用户信息 3.差异分析工具 二.基础 1.创建仓库 2.提交与修改 三.分支管理 1.创建分支 2.合并分支 四.远程操作 1.管理 Git 仓库中的远程仓库 2.数据的获取与推送 五.标签 1.创建轻量标签和附注标签 2.查看标签和标签信…

PIMPL模式和D指针

目录 一、PIMPL模式概念&#xff1a; 1.1 pImpl手法的优势和目的 1.1.1屏蔽实现细节 1.2 .2加速编译 1.2.3 更好的二进制兼容性 1.2.4 惰性分配 二、PIMPL模式项目中应用&#xff1a; 2.1 项目背景 2.2 对外接口代码&#xff1a; 2.2.1 对外库接口头文件 2.2.2 对外…

Android显示系统(01)- 架构分析

一、前言&#xff1a; Android是基于Linux的&#xff0c;而显示设备的驱动也都是和Linux普通设备一样去管理&#xff0c;也就是说归根结底还是要按照Linux的方式组织数据送给LCD&#xff0c;因此&#xff0c;我们理解Android设计的这一套复杂的显示系统时候&#xff0c;一定要…

15分钟做完一个小程序,腾讯这个工具有点东西

我记得很久之前&#xff0c;我们都在讲什么低代码/无代码平台&#xff0c;这个概念很久了&#xff0c;但是&#xff0c;一直没有很好的落地&#xff0c;整体的效果也不算好。 自从去年 ChatGPT 这类大模型大火以来&#xff0c;各大科技公司也都推出了很多 AI 代码助手&#xff…

跨标签通信的几种方式

以前面试被问到过&#xff0c;就了解了一下。还有其他方式&#xff0c;但是实际开发中&#xff0c;使用第一个就可以了 目录 1. 使用BroadcastChannel 2. 使用SharedWorker 3. 使用webSocket 1. 使用BroadcastChannel 它允许同源&#xff08;协议、域名、端口都相同&#x…

深度神经网络模型压缩学习笔记二:离线量化算法和工具、实现原理和细节

文章目录 一、离线量化基础概念1&#xff09;离线量化定义2&#xff09;离线量化优缺点3&#xff09;如何生产一个硬件能跑的量化模型&#xff1f;4&#xff09;离线量化的类型5&#xff09;如何计算scale&#xff0c;zero_point?6&#xff09;离线量化概念7&#xff09;PTQ与…

HTML详解(1)

1.HTML定义 HTML&#xff1a;超文本标记语言。超文本&#xff1a;通过链接可以把多个网页链接到一起标记&#xff1a;标签&#xff0c;带括号的文本后缀&#xff1a;.html 标签语法&#xff1a;<strong>需加粗文字</strong> 成对出现&#xff0c;中间包裹内容&l…

【21-30期】Java技术深度剖析:从分库分表到微服务的核心问题解析

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;Java &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 文章题目&#xff1a;Java技术深度剖析&#xff1a;从分库分表到微服务的核心问题解析 摘要&#xff1a; 本…

Jmeter中的配置原件

2&#xff09;配置原件 1--CSV Data Set Config 用途 参数化测试&#xff1a;从CSV文件中读取数据&#xff0c;为每个请求提供不同的参数值。数据驱动测试&#xff1a;使用外部数据文件来驱动测试&#xff0c;使测试更加灵活和可扩展。 配置步骤 准备CSV文件 创建一个CSV文…

Redis持久化、主从及哨兵架构详解

Redis持久化 RDB快照&#xff08;snapshot&#xff09; 在默认情况下&#xff0c;Redis将内存数据库快照保存在名字为dump.rdb的二进制文件中。 你可以对Redis进行设置&#xff0c;让它在“N秒内数据集至少有M个改动”这一条件被满足时&#xff0c;自动保存一次数据集。 比…

双向链表、循环链表、栈

双向循环链表 class Node:#显性定义出构造函数def __init__(self,data):self.data data #普通节点的数据域self.next None #保存下一个节点的链接域self.prior None #保存前一个节点饿链接域 class DoubleLinkLoop:def __init__(self, node Node):self.head nodeself.siz…

【青牛科技】D1671 75Ω 带4级低通滤波的单通道视频放大电 路芯片介绍

概 述 &#xff1a; D1671是 一 块 带 4级 低 通 滤 波 的 单 通 道 视 频 放 大 电 路 &#xff0c; 可 在3V或5V的 低 电 压 下 工 作 。 该 电 路 用 在 有 TV影 象 输 出 功 能 的 产 品 上 面&#xff0c;比如 机 顶 盒 &#xff0c;监 控 摄 象 头 &#xff0c;DVD&#…

Linux服务器生成SSH 密钥对与 GitLab 仓库进行交互

目录 生成 SSH 密钥对 将公钥添加到 GitLab 测试 SSH 连接 生成 SSH 密钥对 在执行脚本的机器上打开终端&#xff0c;执行以下命令&#xff08;假设使用默认的 RSA 算法&#xff0c;一路回车使用默认设置即可&#xff0c;也可以根据需要指定其他算法和参数&#xff09;&…

关于SpringBoot集成Kafka

关于Kafka Apache Kafka 是一个分布式流处理平台&#xff0c;广泛用于构建实时数据管道和流应用。它能够处理大量的数据流&#xff0c;具有高吞吐量、可持久化存储、容错性和扩展性等特性。 Kafka一般用作实时数据流处理、消息队列、事件架构驱动等 Kafka的整体架构 ZooKeeper:…