关于uniapp使用renderJS中调用父类方法和参数的使用

uniapp 的 renderjs 使用详解,结合arcgis api 目录 什么renderjs 与一般vue使用上的区别 组件传值: 通过使用逻辑层方法,传递数据,涉及到数据赋值和生命周期等问题 HTML 逻辑层: test组件 ? ??关于调试问题 ?关于各层数据传递问题: 什么renderjs 在renderjs下,可以引用jquery,esri-loader等web api(在uniapp项目下,若不使用renderjs,这种api以及document,window是方法是不支持的)。 可以直接操作dom,例:document.getElementbyId().ο 阅读详情
AI摘要

本文介绍了在uniapp的renderJS中如何调用父类的方法以及如何传递参数。首先展示了如何在renderJS中调用特定方法,然后讲解了如何在组件被点击时调用外部方法,并传递父类方法到组件内部。最后,说明了如何在组件内部调用renderJS中的方法,并根据属性变化调用相应的方法。

首先,页面这样下:

<template>
	<view class="model-container">
		<view v-if="isLoading" class="loading-container">
			<text style="color: white;">加载中: {{ loadingProgress }}%</text>

			<progress style="width: 110px;" border-radius="20" :percent="loadingProgress"  color="#007AFF"></progress>
		</view>
		<view id="map" :modelUrl="modelUrl" :modelname="modelname" :change:modelname="renderjs.ModeladdName"
			:change:modelUrl="renderjs.ModeladdUrl" :prop="isHide" :change:prop="renderjs.handleAction"
			@click="callParentMethod">
			<canvas id="webgl" type="webgl" class="model-canvas"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'threeModel',
		props: {
			modelUrl: {
				type: [String],
				default: ''
			},
			modelname: {
				type: [String],
				default: ''
			},
			height: {
				type: [Number, String],
				default: '300px'
			},
			parentMethod: {
				type: Function,
				required: true

			}
		},
		data() {
			return {
				isHide: false,
				isLoading: false,
				loadingProgress: 0
			}
		},
		methods: {
			callParentMethod() {
				this.parentMethod()
			},
			changeLoading(isLoading) {
				this.isLoading = isLoading
			},
			changeProgress(loadingProgress) {
				
				console.log(loadingProgress)
				this.loadingProgress = loadingProgress
			}
		},
		onHide() {
			this.isHide = true
		},
		onUnload() {
			this.isHide = true
		}
	}
</script>

<script module="renderjs" lang="renderjs">
	

	export default {
		data() {
			return {


				

			}
		},
		methods: {
			
			
				
		},
		created() {
			
		}



	}
</script>

<style>
	
</style>

1、如果想在renderJS中调用   changeProgress  这个方法,这样写:

this.$ownerInstance.callMethod('changeProgress', Math.round(percentComplete))

2、如果需要在点击这个组件的时候,调用外面的方法:比如这样:

<ThreeModelViewer :parentMethod="showSeting" :modelname="modelname" :modelUrl="modelUrl"
				style="width: 100vw; height: 280px; justify-content: center;display: flex;margin-top: 60px;" />

这是使用这个组件,在这个组件中传递一个方法:showSeting这个方法,在组件内这样写:

<view id="map"  @click="callParentMethod">

还需要再组件的属性中,添加接收父类的函数属性:

props: {
			
			parentMethod: {
				type: Function,
				required: true

			}
		},

然后再方法中这样写:

methods: {
			callParentMethod() {
				this.parentMethod()
			}
			
		},

这样就可以调用到父类的方法了

3、如果在组件内,想要调用renderJS中的方法,这样写:

:change:modelUrl="renderjs.ModeladdUrl"

根据属性的变化,而调用对应的方法,即可

这就是整个使用了

uniapp中videojs、renderjs的使用 uniapp在APP端video层级最高,不能被其它覆盖,引入videojs实现,使用renderjs实现原生的DOM操作 阅读详情

相关推荐

实战游戏项目管理1-规划篇

1、前言 做研发管理10多年,进游戏行业8年,经验下来项目管理就是一门技术,结合不同行业不同项目加以不同管理方法,但原理基本一样,这里总结下游戏项目的管理一些实操方法 一般游戏确定立项前都需要做,项目预研产出一个游戏Demo,通过公司的立项评审,这个过程的项目管理相对简单一般由制作人或其他项目经理兼任,只有控制好总体时间与成本就好,这里按立项后开始讲。 2、游戏项目规划 ...

pengdali的专栏 2万+

uni-app renderjs 的使用

/ renderjs 向普通 Vue 传值的方法。// 用于与 renderjs 通信的变量。'这是从 renderjs 传来的数据'// 接收 Vue 传来的值并进行处理。// 调用 Vue 组件中的方法。在上述示例中,定义了一个名为。调用了 Vue 组件中的。实现了 Vue 组件向。变量发生变化时,会触发。// Vue 组件中的方法。

Demon's blog 5487

【操作系统】 Operation System 第一章:概述

B站 陈渝老师 清华大学 https://www.bilibili.com/video/av6538245?from=search&seid=436175425155932048 相关资料(源自B站下方评论区) https://www.shiyanlou.com/courses/221 配套上机实验地址 https://b23.tv/av18273642/p1 这个适合跨考和基础薄弱的 h...

iwanderu的博客 4万+

uniapp中调用renderjs的方法(renderjs里面给地图加按钮,子组件给父组件传值)

<template> <view> <!-- 原理:通过监听searchValue,如果发生改变就调用renderjs的doQuery方法 --> <!-- 注意这里的m代指renderjs的module="m" --> <view id="map" class="map" :change:searchValue="m.doQuery" :searchValue="searchValue"></view> <vi

阿小绿的博客 5278

告别二极管发热!手把手教你用MOS管搭建同步整流电路(附死区时间设置避坑指南)

本文详细介绍了如何利用MOS管搭建同步整流电路(SR),以替代传统二极管,显著降低导通损耗和发热问题。内容涵盖自驱动方案的选择、关键元件参数计算、PCB布局要点及死区时间设置技巧,帮助工程师优化电源设计效率。

weixin_29540599的博客 452

【Telephony】APN配置及加载流程&项目实践(AOSP)

学习APN关键是学会明白apns-conf.xml文件各个参数的意思,然后熟悉TelephonyProvider是如何读取文件创建数据库的,譬如数据库表的约束、文件的读写顺序等,还有读取后的ApnSetting的二次定制以及显示(例如屏蔽xcap等)。虽然一般在项目中APN的需求很简单,就是按照客户提供的APN参数添加上配置,或者在显示屏蔽一些参数,但是项目维护的过程中APN的问题也是比较多的。

weixin_44513784的博客 5509

uniapp 关于 renderjs逻辑层 视图层的调用【小记】

【代码】uniapp 关于 renderjs逻辑层 视图层的调用【小记】

Kilie_z的博客 666

中国全国地面站点数据(1981-2010)、月平均气象、月平均降水、月平均相对湿度、月最大降水、月最高温度最低温度、月最高温平均值最低温平均值、高低温站点基础数据,气候数据

中国全国地面站点数据(1981-2010)、月平均气象、月平均降水、月平均相对湿度、月最大降水、月最高温度最低温度、月最高温平均值最低温平均值、高低温站点基础数据 b_china_mon_avg_data_pressure月平均气象 b_china_mon_avg_data_rain月平均降水 b_china_mon_avg_data_rhu月平均相对湿度 b_china_mon_max_data_rain月最大降水 b_china_mon_max_min_data_tem月最高温度最低温度 b_china

无极低码 2万+

uniapp中的renderjs使用

需求是用openlayers在uniapp框架下做一个地图类的软件,选择用renderjs实现地图与dom的交互,一开始也是小白,通过百度资料以及一步步测试后掌握了renderjs的使用,以及地图功能的实现。

dai556688的博客 2万+

LVGL移植教程(正点原子)

学习正点原子LVGL移植教程,根据视频教程写的博客

papalila的博客 941

泰凌微8258入门教程 环境篇④——开发板+烧录器 8258mesh新手套件购买

工欲善其事,必先利其器。 淘宝链接:https://item.taobao.com/item.htm?

4128

uni-app中使用renderjs

uni-app中使用renderjs

miqibumiaowu的博客 8789

lammps案例:聚乙烯和石墨烯界面pull out模拟

大家好,我是小马老师。 本文介绍lammps模拟计算界面结合力的一个案例。 本案例参考论文《The interfacial mechanical properties of functionalized graphene- polymer nanocomposites》,对论文作者表示感谢。 模型共分2层,上层为聚乙烯模型,下次为单层石墨烯,模拟过程共分3部分:建模、弛豫、拉伸。 (1)建模 使用MS建立聚乙烯和石墨烯模型,具体方法可参考之前的推文,使用build layer方法建立聚乙烯和石墨烯组合模型,

lammps_jiayou的博客 3495

renderjs有什么用?聊聊uniapp中用renderjs的一些细节

3.1在renderjs中使用better-scroll做过app-vue开发的话应该知道在service层中没有document对象,无法获取dom节点。所以引用一些外部js的时候,如果初始化的时候需要传入一个选择器的,那基本就断定用到了document对象获取节点。这时候就需要用到renderjs了,首先看一个的示例。根据官方给出的示例做一些修改,我们可以得到以下代码3.2better-scroll自定义id重点来了,上面的例子中虽然实现了效果,但是也出现了一个问题id是固定的。。...

weixin_42776027的博客 5845

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

uniapp中使用echarts,通过renderjs模式封装echarts,兼容APP和H5,一篇就够了!

一、UniApp中使用renderjs 1 为什么要使用 renderjs 某些h5端使用的插件涉及到大量的dom操作,无法跨端使用。 受限于框架视图层与逻辑层的分离而导致的通信折损,而导致的页面动画不流畅。 2 renderjs解决了哪些问题 renderjs是一种可以直接运行在视图层(webview)中的js技术,可以在视图层操作dom。 直接运行在视图层,解决了视图层与逻辑层频繁通信导致的性能折损,让动画更流畅。 3 兼容性 App H5 2.5.5+支持 ✔ 4

weixin_45973179的博客 5708

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

uniapp使用renderjs

uniapp使用renderjs

weixin_44812511的博客 1075

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

uniapp 无法操作DOM 结合 renderJS使用echarts

- 监听变量 operation 的变化,operation 发生改变时,调用 test 模块的 loadOperation 方法 -->console.log("尝试调用逻辑层的方法",this.test()) // H5端可正常调用 APP端报错。data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]将echarts引入。change就是监听定义的变量发生改变---->触发视图层上的方法----->通过。-- 调用 test 模块的 clicked 变量 -->

wkq15607116592的博客 3006

uniapp中,openlayers的使用以及renderjs传参数

uniapp中使用openlayer地图

MHT_ZJL_的博客 2278

uniapp中使用iframe时利用renderjs通讯的解决方案

uniapp中使用iframe时利用renderjs通讯,子传父和父传子。

weixin_43860852的博客 5721

uniapp中使用renderjs(一)

uniapp中使用renderjs

kinghuahua 7202

uniapp renderjs

/ 返回值会暴露给模板和其他的选项式 API 钩子。'renderjs返回的值-->''我是来自renderjs的数据'// 接收逻辑层发送的数据。// 接收逻辑层发送的数据。// 发送数据到逻辑层。// 调用逻辑层函数。

行如逆水行舟,不进则退 1166

uniapp renderjs的使用

uniapp renderjs的使用

翎墨袅 5543

uniapp中renderjs的使用

renderjs 主要服务于APP,因为uni-app为vue+js+html进行编写,整个是h5的技术栈。那么,涉及到这些的前端类库就无法使用,例如html2、canvas、canvas2、image。在视图层操作dom,运行for web的js库(可以操作dom,意味着拥有window、document等这些全局变量,在app-vue的service层没有这些)大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力(减少通讯损耗提升性能,例如一些手势或canvas动画的场景)

nick_zhang的博客 6022

uniapp使用地图开发app, renderjs使用方法及注意事项

摘要 本文介绍了如何使用 renderjs 在 UniApp 中实现腾讯地图功能(而非默认的高德地图)。renderjs 是一个 UniApp 提供的渲染脚本,允许在 App 中直接操作 DOM 和第三方库。文章通过一个 Demo 展示了地图标记点击交互(如显示图片和放大效果),并详细解析了代码实现: 页面结构:包含普通 script 和 renderjs 标签,后者处理地图逻辑,响应数据变化。 关键机制:通过 :prop 和 :change:prop 绑定数据变化触发 renderjs 中的方法。 限制:

qq_38909255的博客 5717

uniapp 使用renderjs的一些详细介绍

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。

在职可交流前端开发,包括:web端、uniapp等,欢迎指教。 2584

renderjs的使用

在uniapp中使用了某些前端库或iframe,需要操作这些库中的dom的时候,而uni上又没有document等基础对象。也就无法操作这些dom去实现一些交互逻辑,那么,涉及到这些的前端类库就无法使用,例如html2、canvas、image。而要用这些怎么办,这是用就出现了renderjs这种视图层工具来进行渲染。大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力

求上得中,求中得下 7597
上一篇: Windows server 中使用nginx遇到的坑
下一篇: uniapp自定义圆形滑杆
Little_Code
博客等级 码龄10年 62粉丝 77原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值