<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
需求是用openlayers在uniapp框架下做一個移動gis類的軟體,選擇用renderjs實現地圖與dom的互動,一開始也是小白,通過百度資料以及一步步測試後掌握了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層沒有這些)
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層中,不能使用子元件
需要自己自定義一個按鈕,點選按鈕後才能獲取到值。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使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45