位置: 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 怎么操作)

  • iphone13pro双卡还是单卡(iphone13pro双卡双5g)

    iphone13pro双卡还是单卡(iphone13pro双卡双5g)

  • 和对方的微信聊天记录怎么恢复(和对方的微信聊天记录可以让对方发给我吗)

    和对方的微信聊天记录怎么恢复(和对方的微信聊天记录可以让对方发给我吗)

  • 手机防窥膜原理是什么(手机防窥膜原理偏振)

    手机防窥膜原理是什么(手机防窥膜原理偏振)

  • 苹果怎么解除过热保护(ios怎么解除)

    苹果怎么解除过热保护(ios怎么解除)

  • 抖音播放量一个ID算一次吗(抖音播放量一个人看多次算吗)

    抖音播放量一个ID算一次吗(抖音播放量一个人看多次算吗)

  • kindle充电器和安卓通用吗(kindle充电头用1a还是2a)

    kindle充电器和安卓通用吗(kindle充电头用1a还是2a)

  • 抖音上面的视频都是用什么软件剪辑的(抖音上面的视频不想看的怎么让他不推送)

    抖音上面的视频都是用什么软件剪辑的(抖音上面的视频不想看的怎么让他不推送)

  • 苹果充电头发烫厉害(苹果充电头发烫是线不好,还是头不好)

    苹果充电头发烫厉害(苹果充电头发烫是线不好,还是头不好)

  • 腾讯会议开了视频其他人会看得到吗(腾讯会议开了视频)

    腾讯会议开了视频其他人会看得到吗(腾讯会议开了视频)

  • 苹果8可以更新ios13吗(苹果8可以更新ios15吗)

    苹果8可以更新ios13吗(苹果8可以更新ios15吗)

  • 微信好友被删除怎么知道(微信好友被删除了是什么状态)

    微信好友被删除怎么知道(微信好友被删除了是什么状态)

  • 怎么弄两个微信软件(怎么弄两个微信分身)

    怎么弄两个微信软件(怎么弄两个微信分身)

  • 手机企业qq怎么设置隐身(手机企业qq怎么退出登录)

    手机企业qq怎么设置隐身(手机企业qq怎么退出登录)

  • ios13怎么关闭自动调节(ios13怎么关闭自动更新)

    ios13怎么关闭自动调节(ios13怎么关闭自动更新)

  • 苹果备忘录背景颜色(苹果备忘录背景纹理怎么设置)

    苹果备忘录背景颜色(苹果备忘录背景纹理怎么设置)

  • airpods支持华为吗(airpods可以用华为)

    airpods支持华为吗(airpods可以用华为)

  • 手机怎么做电子照片(手机怎么做电子小报)

    手机怎么做电子照片(手机怎么做电子小报)

  • 快手怎么样看直播人数(快手怎么样直播电视剧不违规)

    快手怎么样看直播人数(快手怎么样直播电视剧不违规)

  • 小遛共享车费退不了吗(小遛共享退了押金还能骑吗)

    小遛共享车费退不了吗(小遛共享退了押金还能骑吗)

  • 腾达wifi怎么设置校园网(腾达wifi怎么设置穿墙模式)

    腾达wifi怎么设置校园网(腾达wifi怎么设置穿墙模式)

  • hryal00a是什么型号(hryal00ta)

    hryal00a是什么型号(hryal00ta)

  • portal00a什么型号(华为型号potal00a啥手机)

    portal00a什么型号(华为型号potal00a啥手机)

  • 小米手机的白名单在哪里(小米手机的白名单在哪里取消)

    小米手机的白名单在哪里(小米手机的白名单在哪里取消)

  • 抖音蓝v号是什么(抖音蓝v号有什么好处)

    抖音蓝v号是什么(抖音蓝v号有什么好处)

  • realmex屏占比(realmex2屏占比)

    realmex屏占比(realmex2屏占比)

  • 海康录像机设置(海康录像机设置移动侦测录像)

    海康录像机设置(海康录像机设置移动侦测录像)

  • hd电话标志是什么意思(hd电话图标怎么回事)

    hd电话标志是什么意思(hd电话图标怎么回事)

  • 搜狐视频如何查看自己的消费清单(搜狐视频如何查看小课)

    搜狐视频如何查看自己的消费清单(搜狐视频如何查看小课)

  • ES6 - Promise详解及用法(es6promise的理解)

    ES6 - Promise详解及用法(es6promise的理解)

  • 会计利润和应纳税所得额的区别和联系
  • 利息收入需要缴纳企业所得税吗
  • 变动成本法的计算公式有哪些
  • 收入支出结余公式原理
  • 组织机构代码是营业执照哪几位数字
  • 个体工商户化妆品经营范围
  • 可以先报税后结账吗
  • 公司清算关闭程序
  • 暂估成本跨年后未收到票如何处理
  • 投资性房地产租赁期开始日
  • 商贸企业销售商品结转成本是手工算吗
  • 商业汇票的样本
  • 收到外国的货款会计分录
  • 税控技术服务费每年都可以抵扣吗
  • 企业所得税怎么做
  • 公司增值税发票有限额吗
  • 采购合同清单的安装调试费如何开具发票?税率是多少
  • 资产负债表是累计记账吗
  • 固定资产机器设备使用年限
  • 房屋的契税印花税的会计分录
  • 一般纳税人税控盘维护费会计分录
  • 销售不动产预收款纳税义务发生时间
  • 母子公司之间转让房产
  • 法院执行款可以开发票吗
  • 物流公司运费的会计分录
  • 公司发放的车补扣个人所得税吗
  • 苹果14promax最新版本16.6
  • 微软汽车
  • yoosee怎么安装
  • Windows10开始菜单透明
  • 股权转让有哪些股
  • 成本核算流程会议记录
  • 残疾人就业保障金
  • 设备维修的会计分录怎么做
  • 个体工商户使用个人二维码收款违法吗
  • linux php redis扩展
  • 扣发工资是发还是不发
  • raisecom删除命令
  • 不良品扣款应入哪个科目
  • 累计折旧怎么折
  • 处置固定资产开发票
  • 消耗品属于哪个会计科目
  • 增值税普票如何开具红字发票
  • 增值税发票丢失可以重开吗
  • 流动资产比例大说明什么
  • 个人经营所得税怎么申报
  • sql怎么搜索表
  • 对公账户转到个体工商户
  • 银行汇票与商业汇票的本质不同
  • 进口关税减免政策
  • 支付临时工的工资计入应付职工薪酬吗
  • 普通发票做帐有什么用
  • sql中分页
  • mysql中的null值和空
  • mysql定义语句
  • 阿里云安装apache
  • 如何设置个性化桌面
  • 重装系统前 病毒怎么办
  • centos 环境变量
  • pull current
  • win7系统ie浏览器打不开
  • linux系统磁盘管理的主要内容
  • linux的top参数
  • win7更新显卡驱动后黑屏的解决方法
  • win8如何进行系统还原
  • win8.1系统怎么激活
  • python urllib urlopen
  • android开发工程师案例教程源码
  • windows配额
  • shell 判断进程是否存在
  • js原生dialog
  • androidui框架
  • js封装是什么意思
  • css怎么设置
  • 地方税务局属于地市级还是副省级
  • 世界银行各国经济gdp动态
  • 电子税务局网上登录
  • 误餐费报销管理办法
  • 办理企业步骤
  • 江西省抚州市黎川县洵口镇
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设