uniapp 的 renderjs 使用详解，结合arcgis api

由于项目需要在app端实现图表效果 ucharts无法实现 就打算使用echarts来实现,下面是我实现的具体步骤仅供参考。

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

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

uniapp中使用arcgis完成复杂地图

3.this.$ownerInstance.callMethod方法必须通过点击事件执行4.地图方法都要写在renderjs层中，不能使用子组件，所以都要传值到render.js中操作，不能再子组件中调用地图的API方法。5、由于renderjs的视图层与uni的普通script逻辑层运行在同一环境，不能保证加载顺序，所以，尽量把操作dom部分放在renderjs中，所有数据通过数据传递后，在renderjs中操作。3、带render.js的视图层可以通过this.XXX拿到啥不带的逻辑层的数据；

项目是基于uniapp+v2+openlayers开发，目前实现底图切换、图层控制、实时定位、坐标定位、矢量测量、图层要素查询等功能。支持各类WMTS、WMS、WFS等图层类型的加载，地图服务数据的查询

uni-app中使用renderjs

在保证已有script下在创建一个新的script标签，标签中定义land=“renderjs” module=“任意名”通过change监听‘msg’的变化来调用视图层的‘receiveMsg’方法，rendererjs是一个运行在视图层的js，只支持app-vue和h5。module相当于id，后面需要通过module属性来调用方法。通过callMethod来调用逻辑层的方法并定义传入的参数。下面是通过renderjs使用leaflet地图示例。renderjs的用处。renderjs用法。

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

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

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

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

对于一些频繁的dom操作，uniapp提供了一个renderjs方案，是一个运行在视图层的js，大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力，只支持h5和app端。app端使用echarts自然采用renderjs方案。h5端使用区别不大，因为h5逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式。小程序依然采用wxs方案，可以使用u-chart等第三方插件。

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

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

renderjs不能在{{}}上绑定数据，但是可以绑定事件监听函数。renderjs支持setup函数，不支持setup语法糖。截止2023/3/3。