uniapp中renderjs使用与传值问题

目录

• 前言
• 一、renderjs的作用是什么？
• 二、renderjs怎样使用？
• 三、测试代码（借用网上一段代码，写的很全面）
• 补充：uniapp 中renderjs传值问题
• 总结

前言

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

一、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层方法传出数据

三、测试代码（借用网上一段代码，写的很全面）

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

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

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

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

补充：uniapp 中renderjs传值问题

需要自己自定义一个按钮，点击按钮后才能获取到值。renderjs 代码页面

 
//renderjs 模式

主页面代码，在onload里面接收renderjs页面的值

        onLoad() {
            var t = this;
            this.$eventHub.$on('dot', data => {
                 console.log(data);
                //将数组转为字符串
                //t.dot = t.getString(data)
                //字符串转数组
                //console.log(eval(t.dot))
            });
        },

总结

到此这篇关于uniapp中renderjs使用与传值问题的文章就介绍到这了,更多相关uniapp renderjs使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！