uniapp中renderjs使用与传值问题

 更新时间:2022年07月24日 08:08:26   作者:god‘s hand  
renderjs是一个运行在视图层的js,它只支持app-vue和h5,下面这篇文章主要给大家介绍了关于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层方法传出数据

三、测试代码(借用网上一段代码,写的很全面)

<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层中,不能使用子组件

补充:uniapp 中renderjs传值问题

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

<template>
    <view class="map-wrap">
        <view id="map-box">
 
        </view>
        <view  @click="mapbox.emitData" style="position: absolute; bottom: 50px;left: 25%; z-index: 999;display: none;">
                            确认
        </view>
    </view>
</template>
 
//renderjs 模式
<script>
    export default {
        data() {
            return {
                msg: '',
            };
        },
        methods: {
            // 触发逻辑层出入renderjs数据改变
            // 接收renderjs发回的数据
            receiveRenderData(val) {
                console.log(val)
                this.$eventHub.$emit('dot', val);
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    };
</script>
<script module="mapbox" lang="renderjs">
    export default {
        data: {
            return () {
                dot: 123
            }
        },
        methods: {
              //点击函数
            emitData(e, ownerVm) {
                ownerVm.callMethod('receiveRenderData', this.dot)
            }
        }
    }
</script>

主页面代码,在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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS如何判断移动端访问设备并解析对应CSS

    JS如何判断移动端访问设备并解析对应CSS

    本文为大家详细介绍下JS如何判断移动端访问设备并解析对应CSS,感兴趣的朋友可以参考下
    2013-11-11
  • JavaScript 常用函数库详解

    JavaScript 常用函数库详解

    在WEB开发中,javascript提供了许多函数供开发人员使用,这些函数在Ajax流行前足够了,但要构建一个交互性强些的应用恐怕就麻烦了。
    2009-10-10
  • echarts展示区域地图添加纹理图片操作指南

    echarts展示区域地图添加纹理图片操作指南

    这篇文章主要给大家介绍了关于echarts展示区域地图添加纹理图片操作的相关资料,ECharts地图组件支持使用图片作为地图区域的填充纹理,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • js实现表格拖动选项

    js实现表格拖动选项

    这篇文章主要为大家详细介绍了原生js实现表格拖动选项,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 理解Javascript_07_理解instanceof实现原理

    理解Javascript_07_理解instanceof实现原理

    在《Javascript类型检测》一文中讲到了用instanceof来用做检测类型,让我们来回顾一下
    2010-10-10
  • 移动端H5唤起APP的写法实例(IOS、android)

    移动端H5唤起APP的写法实例(IOS、android)

    最近在做扫码之后的h5页面唤醒App的功能,所以记录一下,这篇文章主要给大家介绍了关于移动端H5唤起APP的相关资料,需要的朋友可以参考下
    2021-07-07
  • 用javascript删除当前行,添加行(示例代码)

    用javascript删除当前行,添加行(示例代码)

    这篇文章主要介绍了用javascript删除当前行,添加行的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript组合设计模式--改进引入案例分析

    JavaScript组合设计模式--改进引入案例分析

    这篇文章主要介绍了JavaScript组合设模式改进引入案例,结合实例形式分析了JavaScript组合设计模式特性改进的引入示例相关操作技巧,需要的朋友可以参考下
    2020-05-05
  • 浅谈Javascript中的对象和继承

    浅谈Javascript中的对象和继承

    这篇文章主要介绍了Javascript中的对象和继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 在Windows上安装Node.js模块的方法

    在Windows上安装Node.js模块的方法

    Node.js逐渐升温,很多朋友已经开始关注。但是在Windows平台上需要基于Cygwin安装配置环境,让很多人望而却步。
    2011-09-09

最新评论