位置: IT常识 - 正文

uniapp中的renderjs使用(uniapp中的onload)

编辑:rootadmin
uniapp中的renderjs使用

推荐整理分享uniapp中的renderjs使用(uniapp中的onload),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp中的swiper包裹video滚动不了,uniapp中的uni-file-picker文件列表关闭,uniapp中的条件渲染和列表渲染的语法是什么,uniapp中的global,uniapp中的fab组件中的trigger,uniapp中的onload,uniapp中的fab组件中的trigger,uniapp中的swiper包裹video滚动不了,内容如对您有帮助,希望把文章链接给更多的朋友!

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

                      

一、renderjs的作用是什么?

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

运行在视图层的js

uniapp中的renderjs使用(uniapp中的onload)

大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力(减少通讯损耗提升性能,例如一些手势或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层中,不能使用子组件

本文链接地址:https://www.jiuchutong.com/zhishi/277833.html 转载请保留说明!

上一篇:Win11升级反馈:可使用Win7兼容性模式运行升级助手绕过系统兼容性测试(win10升级win11报错)

下一篇:Mac系统中如何给PDF文件加密(mac 怎么操作)

  • 微信营销:微信营销慎重操作,微信营销要注意些什么(微信营销微信广告和朋友圈的看法)

    微信营销:微信营销慎重操作,微信营销要注意些什么(微信营销微信广告和朋友圈的看法)

  • 淘宝直播怎么关闭弹幕(淘宝直播怎么关闭回放)

    淘宝直播怎么关闭弹幕(淘宝直播怎么关闭回放)

  • 加了86为什么打不通电话(为什么有的电话加86)

    加了86为什么打不通电话(为什么有的电话加86)

  • 黄钻怎样设置永久背景(黄钻怎么设置不让别人看到我)

    黄钻怎样设置永久背景(黄钻怎么设置不让别人看到我)

  • 抖音背包在哪里查看(抖音背包在哪里打开)

    抖音背包在哪里查看(抖音背包在哪里打开)

  • 华为备份恢复只能用wifi吗(华为恢复备份是否会覆盖现在的数据)

    华为备份恢复只能用wifi吗(华为恢复备份是否会覆盖现在的数据)

  • 获取店铺失败是封店吗(获取店铺失败是怎么回事)

    获取店铺失败是封店吗(获取店铺失败是怎么回事)

  • 如何设置微信标语(如何设置微信标签名称)

    如何设置微信标语(如何设置微信标签名称)

  • 毒虚假发货怎么处理(毒虚假发货会扣保证金吗)

    毒虚假发货怎么处理(毒虚假发货会扣保证金吗)

  • 手机NFC怎么用(手机nfc怎么用不了)

    手机NFC怎么用(手机nfc怎么用不了)

  • 指纹硬件无法使用怎么回事(指纹硬件无法使用了)

    指纹硬件无法使用怎么回事(指纹硬件无法使用了)

  • 为什么xr是单卡(为什么我的苹果xr是单卡的)

    为什么xr是单卡(为什么我的苹果xr是单卡的)

  • qq号就是邮箱号吗(如何获得邮箱账号)

    qq号就是邮箱号吗(如何获得邮箱账号)

  • ios系统分辨率有哪些(apple分辨率)

    ios系统分辨率有哪些(apple分辨率)

  • 华为mate20x5g怎么截屏

    华为mate20x5g怎么截屏

  • 旺旺红包能提现么(旺旺红包提现到支付宝)

    旺旺红包能提现么(旺旺红包提现到支付宝)

  • oppoa11x怎么更换壁纸(oppo w51怎么换新)

    oppoa11x怎么更换壁纸(oppo w51怎么换新)

  • 趣键盘怎么不能直接发图(趣键盘为什么微信不能用)

    趣键盘怎么不能直接发图(趣键盘为什么微信不能用)

  • 怎么从ios13降到ios12(苹果怎么降到ios13)

    怎么从ios13降到ios12(苹果怎么降到ios13)

  • vivo锁屏显示什么意思(vivo手机锁屏显示在哪里)

    vivo锁屏显示什么意思(vivo手机锁屏显示在哪里)

  • 小米9无线充电怎么打开(小米9无线充电充不了)

    小米9无线充电怎么打开(小米9无线充电充不了)

  • 微信主界面白色怎么换(微信主界面白色的背景怎么更改)

    微信主界面白色怎么换(微信主界面白色的背景怎么更改)

  • 苹果耳机功能(苹果耳机功能使用)

    苹果耳机功能(苹果耳机功能使用)

  • 路由器管家怎么用?(路由器管家怎么登录)

    路由器管家怎么用?(路由器管家怎么登录)

  • THREE.JS实现看房自由(VR看房)(three.js 教程)

    THREE.JS实现看房自由(VR看房)(three.js 教程)

  • HTML与JavaScript联动(html与js之间如何配合)

    HTML与JavaScript联动(html与js之间如何配合)

  • 设备租赁公司印花税怎么交
  • 审计助理是做什么工作的
  • 成本核算需要哪些基础工作
  • 印花税5元贴花会计处理
  • 预期信用损失影响坏账准备吗
  • 电子税务局怎么导出企业所得税报表
  • 税控服务费减免政策
  • 小规模销售免税农产品的分录
  • 实收资本资本公积盈余公积均属于投资者投入企业的资本
  • 技术服务税率是多少 现金
  • 上级工会返还的经费记什么收入
  • 公共绿地绿化
  • 企业固定资产折旧当月增加当月计提吗
  • 城建税如何核算成本
  • 付给农民的扶贫款企业如何做账?
  • 企业给员工购买社保的规定
  • 企业计提固定资产折旧
  • 企业发生的运输费用怎么做账?
  • 未开票收入可以填写负数吗
  • 企业减免所得税
  • 采用支付手续费方式委托代销商品
  • 股东转入实收资本
  • 报税期间如何开发票?
  • 受让股东对出让股东抽逃出资
  • 计征所得税会计分录怎么做?
  • 以前年度的财务报表还可以找出来吗
  • 厂区道路施工步骤
  • php中删除文件的函数
  • windows太阳谷更新
  • 笔记本屏幕坏点几个算正常
  • 法国著名画家塞尚属于什么流派?
  • 销售商品的会计分录已收到钱
  • vue.min.js 本地引入
  • yolov3多分类检测
  • 浅析中国式现代化的理论价值与现实意义
  • 清除命令窗口所有内容用()命令,清除变量用()命令
  • php 密码
  • 所得税申报表上的营业成本怎么填
  • 委托境外机构研发
  • 销售退回的会计科目
  • 帝国cms模板文件放在哪里
  • 应收票据及应收账款周转率计算公式
  • 建筑公司是可以开在住宅小区吗
  • 收到的技术服务费计入什么科目
  • 应该免税的增值税是什么
  • 出口退免税的条件
  • 无形资产的处置损益
  • 让渡资产使用权什么意思
  • 其他收益和其他综合收益区别
  • 工程未竣工预付款怎么办
  • 在建工程明细科目怎么设置
  • 加油吃饭开的发票抵什么税
  • 会计建账的基本程序的六个步骤
  • count(10,2,5)
  • sql的查询分析器
  • windowssystem32configsystem下载
  • linux lv扩容
  • win7系统删除文件夹怎么恢复
  • 鲁大师安装失败怎么回事
  • win7怎么查看
  • 如何使用调制解调器
  • linux中who命令
  • windows8怎么去除广告
  • win7如何设置桌面背景图
  • 简述常用
  • edxposed 作用域
  • nodejs 异步
  • android Unable to execute dex问题的解决
  • JavaScript创建数量n由用户决定的数组
  • android抓取各种log的方法
  • herd什么意思
  • Node.js中的事件循环是什么意思
  • 备份多个数据库
  • javascript HTML+CSS实现经典橙色导航菜单
  • JavaScript Switch 声明
  • 死循环代码
  • python 如何访问数据库
  • 签订税务三方协议
  • 贵州省电子税务
  • 税务局工作业绩
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设