uniapp的renderjs使用

server/2024/11/24 4:55:03/

‌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.ppmy.cn/server/144441.html

相关文章

Jetpack Compose 生命周期介绍

文章目录 前言1、Compose UI 的生命周期是什么&#xff1f;Compose 生命周期与传统生命周期的对比 2、各阶段详细解析2.1 初次 Composition&#xff1a;UI 的出生2.2 Recomposition&#xff08;UI 更新&#xff09;2.3 Disposal&#xff08;资源清理&#xff09;2.4 生命周期管…

事务的详解

什么是事务&#xff1f; 事务是逻辑上的一组操作&#xff0c;要么都执行&#xff0c;要么都不执行。 另外&#xff0c;需要格外注意的是&#xff1a;事务能否生效数据库引擎是否支持事务是关键。比如常用的 MySQL 数据库默认使用支持事务的 innodb引擎。但是&#xff0c;如果把…

LLaMA-Factory 上手即用教程

LLaMA-Factory 是一个高效的大型语言模型微调工具&#xff0c;支持多种模型和训练方法&#xff0c;包括预训练、监督微调、强化学习等&#xff0c;同时提供量化技术和实验监控&#xff0c;旨在提高训练速度和模型性能。 官方开源地址&#xff1a;https://github.com/hiyouga/L…

疫情中的图书馆管理:Spring Boot系统设计

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了疫情下图书馆管理系统的开发全过程。通过分析疫情下图书馆管理系统管理的不足&#xff0c;创建了一个计算机管理疫情下图书馆管理系统的方案。文章介绍了疫情下图…

SHELL作业

要求&#xff1a; 通过shell脚本分析部署nginx网络服务 1.接收用户部署的服务名称 2.判断服务是否安装 ​ 已安装&#xff1b;自定义网站配置路径为/www&#xff1b;并创建共享目录和网页文件&#xff1b;重启服务 ​ 没有安装&#xff1b;安装对应的软件包 3.测试 判断服务是…

LangChain入门

LangChain入门 &#xff5c; 豆包MarsCode AI 刷题 本篇文章为《LangChain 实战课》前三节课的总结性文章&#xff0c;主要内容包含内容梳理与总结&#xff0c;学习记录&#xff0c;以及一些思考。 01开篇词&#xff5c;带你亲证AI应用开发的“奇点”时刻 内容 这篇文章介绍…

知从科技加入SOAFEE组织,携手推动汽车软件创新

在汽车行业迈向智能化、网联化的关键时期&#xff0c;知从科技受ARM邀请正式加入 SOAFEE&#xff08;Scalable Open Architecture for Embedded Edge - 面向嵌入式边缘的可扩展开放架构&#xff09;组织&#xff0c;这一战略举措标志着知从科技在全球汽车软件领域的进一步扩展和…

MongoDB主备副本集方案:两台服务器使用非对称部署的方式实现高可用与容灾备份

昨天&#xff08;2024/11/18)碰到这么个问题&#xff0c;因为要控制成本&#xff0c;公司只愿意出两台服务器&#xff08;很小的盒子&#xff09;部署业务&#xff0c;采用传统的主备模式。这其中就包括Mongodb数据库&#xff0c;最稳固的方法当然是采用官方推荐的最低3台。但没…