iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uniapp中renderjs使用与传值问题
  • 115
分享到

uniapp中renderjs使用与传值问题

2024-04-02 19:04:59 115人浏览 安东尼
摘要

目录前言一、renderjs的作用是什么?二、renderjs怎样使用?三、测试代码(借用网上一段代码,写的很全面)补充:uniapp 中renderjs传值问题总结前言 需求是用o

前言

需求是用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使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uniapp中renderjs使用与传值问题

本文链接: https://www.lsjlt.com/news/165064.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • uniapp中renderjs使用与传值问题
    目录前言一、renderjs的作用是什么?二、renderjs怎样使用?三、测试代码(借用网上一段代码,写的很全面)补充:uniapp 中renderjs传值问题总结前言 需求是用o...
    99+
    2024-04-02
  • vue中的传值及赋值问题
    目录vue的传值及赋值先看一下场景解决方法vue的赋值小技巧严谨代码undefined判断vue的传值及赋值 作为Vue非资深的学习者,在工作中使用vue的时候还是遇见的很多所谓的坑...
    99+
    2024-04-02
  • python中传值和传地址问题
    在python中,还没有对这个知识点有一个详细的定义,很模糊的说明了,通过下面代码,可以观察出来,什么时候传的是值,什么时候传的是地址 有时候会发现自己的数据发生变化,可能就是这个原因,python的创作者,在定义的时候,并没有像java...
    99+
    2023-01-30
    中传 地址 python
  • 详解 WebView 与 JS 交互传值问题
    随着混合开发模式比较流行,很多时候,我们需要在原生的基础上,使用 WebView 加载网页,这样控制更加方便。今天我们来看看,如何将 Java 对象 和 List 集合传值给 JS 调用。如何将 Java 对象实例传值给 JS其实将我们在 ...
    99+
    2023-05-31
    webview js 传值
  • Flutter使用RepositoryProvider解决跨组件传值问题
    目录前言RepositoryProvider定义RepositoryProvider 应用总结前言 在实际开发过程中,经常会遇到父子组件传值的情况,通常来说会有三种方式: 构造函数传...
    99+
    2024-04-02
  • java经典问题:传值还是传引用(转)
    java经典问题:传值还是传引用(转)[@more@]经典的问题,但却不容易弄懂,尤其对有c基础的java程序员来说,更容易引起混乱,这里我试图简单点描述。 “java函数是传值的,java函数传递的参数是对象的引用” 这两句话好像初听上去...
    99+
    2023-06-03
  • vue中的传值及赋值问题怎么解决
    这篇文章主要介绍“vue中的传值及赋值问题怎么解决”,在日常操作中,相信很多人在vue中的传值及赋值问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中的传值及赋值问题怎么解决”的疑惑有所帮助!...
    99+
    2023-06-30
  • Flutter怎么使用RepositoryProvider解决跨组件传值问题
    这篇文章主要介绍“Flutter怎么使用RepositoryProvider解决跨组件传值问题”,在日常操作中,相信很多人在Flutter怎么使用RepositoryProvider解决跨组件传值问题问题上存在疑惑,小编查阅了各式资料,整理...
    99+
    2023-06-29
  • 关于layer.js使用心得-向弹出框传值问题
    目录layer.js使用心得-向弹出框传值问题背景问题描述问题分析layui传值的一些经验,也没怎么整理:表格渲染数据,弹出框1.layui向表格渲染数据的格式转换2. layui弹...
    99+
    2022-11-13
    layer.js使用 向弹出框传值 layer.js传值
  • PHP中传值与传引用的区别
    PHP中传值与传引用的区别:传值要重新构造一份原参数的拷贝,而传引用则不需要。传值改变变量值的大小,都不会影响到函数外边的变量值,而传引用对值的任何改变,在函数外部也有所体现。传值对参数的修改不会改变原参数,而传引用时可以直接修改原参数。...
    99+
    2024-04-02
  • uniapp地图组件(map)使用与遇到的一些问题总结
    目录前言首先先看成品定位图标获取自身经纬度通过经纬度 获取当前城市信息总结前言 这段时间在开发uniapp的时候使用到map组件  总结一下本次在uniapp中使用map遇...
    99+
    2024-04-02
  • 如何在php中实现对象传值与引用传值
    今天就跟大家聊聊有关如何在php中实现对象传值与引用传值,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。变量赋值与对象赋值对比<php   //&n...
    99+
    2023-06-06
  • layui中树形关于取值传值问题的示例分析
    这篇文章主要介绍了layui中树形关于取值传值问题的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:这个是我们需要的效果,实...
    99+
    2024-04-02
  • uniapp使用H5调试时跨域问题解决
    用uniapp开发APP时,为了开发方便,经常是H5开发好,然后再弄APP的兼容性问题。所以可能会涉及到跨域,此时也可以让后端同学帮忙,但是求人不如自己搞,所以分享一套跨域方法,其实...
    99+
    2024-04-02
  • PHP中传值与传引用有什么区别
    在PHP中,传值和传引用是函数参数传递的两种方式。1. 传值:函数传递的是实参的值的副本。在函数内部对参数的修改不会影响到外部的实参...
    99+
    2023-09-27
    PHP
  • PHP中值传递的作用与应用
    PHP中值传递的作用与应用 值传递是一种PHP中常见的参数传递方式,通过值传递,函数在调用过程中会将实际参数的值复制给形式参数,这样在函数内部对形式参数的修改不会影响到实际参数的值。值...
    99+
    2024-03-09
    应用 php 值传递
  • uniapp中使用vuex的过程(解决uniapp无法在data和template中获取vuex数据问题)
    目录uniapp中使用vuex(解决uniapp无法在data和template中获取vuex数据问题)1. uniapp中引入vuex2. uniapp中使用vuex2.1 thi...
    99+
    2023-05-18
    uniapp使用vuex uniapp无法获取vuex数据
  • vue2中provide/inject的使用与响应式传值详解
    目录前言一、基本用法二、响应式1.方法一:传递的参数用一个方法返回2.方法二:把需要传递的参数定义成一个对象总结前言 官网概念:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后...
    99+
    2024-04-02
  • 多进程中CreateMutex与ReleaseMutex使用问题
    在多进程中使用CreateMutex和ReleaseMutex时,需要注意以下几个问题:1. 创建互斥对象时,需要指定一个唯一的名称...
    99+
    2023-08-08
    多进程
  • 一文浅析Vue中父子组件间传值问题
    vue父子组件之间怎么传值?下面本篇文章带大家了解一下Vue中父组件以及子组件传值问题,希望对大家有所帮助!前言:在一些页面中不单单的纯纯的一个vue文件,vue讲究组件化开发,但是一般的肯定会产生交互事件,今天了解了这个传值,特此的来记录...
    99+
    2023-05-14
    组件传值 vue组件传值 Vue
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作