uniapp中renderjs使用與傳值問(wèn)題
前言
需求是用openlayers在uniapp框架下做一個(gè)移動(dòng)gis類(lèi)的軟件,選擇用renderjs實(shí)現(xiàn)地圖與dom的交互,一開(kāi)始也是小白,通過(guò)百度資料以及一步步測(cè)試后掌握了renderjs的使用,以及地圖功能的實(shí)現(xiàn)。
一、renderjs的作用是什么?
renderjs 主要服務(wù)于APP,因?yàn)閡ni-app為vue+js+html進(jìn)行編寫(xiě),整個(gè)是h5的技術(shù)棧。而app上并沒(méi)有document等基礎(chǔ)對(duì)象。那么,涉及到這些的前端類(lèi)庫(kù)就無(wú)法使用,例如html2、canvas、canvas2、image。而要用這些怎么辦,這是用就出現(xiàn)了renderjs這種視圖層工具來(lái)進(jìn)行渲染。
運(yùn)行在視圖層的js
大幅降低邏輯層和視圖層的通訊損耗,提供高性能視圖交互能力(減少通訊損耗提升性能,例如一些手勢(shì)或canvas動(dòng)畫(huà)的場(chǎng)景)
在視圖層操作dom,運(yùn)行for web的js庫(kù)(可以操作dom,意味著擁有window、document等這些全局變量,在app-vue的service層沒(méi)有這些)
二、renderjs怎樣使用?
1.原生層數(shù)據(jù)通過(guò)監(jiān)聽(tīng)傳入renderjs層(可以通過(guò)調(diào)用原生層的方法觸發(fā))
2.直接調(diào)用renderjs層方法傳出數(shù)據(jù)
三、測(cè)試代碼(借用網(wǎng)上一段代碼,寫(xiě)的很全面)
<template> <view> <view :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view"> {{msg}} </view> <button @click="renderScript.emitData">直接調(diào)用renderjs中的emitData的方法</button> <button @click="changeMsg" class="app-view">改變msg的值,直接調(diào)用renderjs中receiveMsg的值</button> <button @click="renderScript.renferMsg">通過(guò)renderjs改變msg的值,同時(shí)調(diào)用renderjs中的emitData的方法</button> </view> </template> <script> export default { data() { return { msg: '我是service層原來(lái)的msg', }; }, methods: { // 觸發(fā)邏輯層出入renderjs數(shù)據(jù)改變 changeMsg() { this.msg = "msg值改變了"; }, // 接收renderjs發(fā)回的數(shù)據(jù) receiveRenderData(val) { console.log('renderjs返回的值-->', val); }, //接收renderjs發(fā)回的數(shù)據(jù),同時(shí)觸發(fā):change:msg,調(diào)用enderjs中的emitData的方法 serviceClick(e){ this.msg=e } } }; </script> <script module="renderScript" lang="renderjs"> export default { data() { return { name: '我是renderjs數(shù)據(jù)' } }, methods: { renferMsg(event, ownerInstance) { // 調(diào)用 service層的serviceClick方法,傳值 console.log(event,ownerInstance) ownerInstance.callMethod('serviceClick', { test: '這是點(diǎn)擊renderjs的區(qū)域,向service層傳遞變量' }) }, // 接收邏輯層發(fā)送的數(shù)據(jù) 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) }, // 發(fā)送數(shù)據(jù)到邏輯層 emitData(e, ownerVm) { ownerVm.callMethod('receiveRenderData', this.name) } } }; </script>
注意:1.在renderjs層不能使用uni或其他框架的API,例如uni.request、uni.getlocation等等方法,需在原生層調(diào)用后觸發(fā)監(jiān)聽(tīng)將數(shù)據(jù)傳入。
2.在APP端renderjs層的data與原生層的data互不相干
3.this.$ownerInstance.callMethod方法必須通過(guò)點(diǎn)擊事件執(zhí)行
4.地圖方法都要寫(xiě)在renderjs層中,不能使用子組件
補(bǔ)充:uniapp 中renderjs傳值問(wèn)題
需要自己自定義一個(gè)按鈕,點(diǎn)擊按鈕后才能獲取到值。renderjs 代碼頁(yè)面
<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;"> 確認(rèn) </view> </view> </template> //renderjs 模式 <script> export default { data() { return { msg: '', }; }, methods: { // 觸發(fā)邏輯層出入renderjs數(shù)據(jù)改變 // 接收renderjs發(fā)回的數(shù)據(jù) 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: { //點(diǎn)擊函數(shù) emitData(e, ownerVm) { ownerVm.callMethod('receiveRenderData', this.dot) } } } </script>
主頁(yè)面代碼,在onload里面接收renderjs頁(yè)面的值
onLoad() { var t = this; this.$eventHub.$on('dot', data => { console.log(data); //將數(shù)組轉(zhuǎn)為字符串 //t.dot = t.getString(data) //字符串轉(zhuǎn)數(shù)組 //console.log(eval(t.dot)) }); },
總結(jié)
到此這篇關(guān)于uniapp中renderjs使用與傳值問(wèn)題的文章就介紹到這了,更多相關(guān)uniapp renderjs使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
深入理解javascript構(gòu)造函數(shù)和原型對(duì)象
對(duì)象,是javascript中非常重要的一個(gè)梗,是否能透徹的理解它直接關(guān)系到你對(duì)整個(gè)javascript體系的基礎(chǔ)理解,說(shuō)白了,javascript就是一群對(duì)象在攪。。(嗶?。?。2014-09-09zepto.js 實(shí)時(shí)監(jiān)聽(tīng)輸入框的方法
今天小編就為大家分享一篇zepto.js 實(shí)時(shí)監(jiān)聽(tīng)輸入框的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-12-12微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06微信小程序訪問(wèn)mysql數(shù)據(jù)庫(kù)流程詳解
日常我們?cè)陂_(kāi)發(fā)小程序的時(shí)候,總是希望把數(shù)據(jù)提交回?cái)?shù)據(jù)庫(kù)進(jìn)行存儲(chǔ),那在小程序中該如何訪問(wèn)數(shù)據(jù)庫(kù)呢?本篇我們就介紹一下具體的思路2022-08-08JS驗(yàn)證IP,子網(wǎng)掩碼,網(wǎng)關(guān)和MAC的方法
這篇文章主要介紹了JS驗(yàn)證IP,子網(wǎng)掩碼,網(wǎng)關(guān)和MAC的方法,涉及javascript正則表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2015-07-07JS如何判斷瀏覽器類(lèi)型和詳細(xì)區(qū)分IE各版本瀏覽器
本篇文章主要介紹了JS判斷瀏覽器類(lèi)型和詳細(xì)區(qū)分IE各版本瀏覽器的代碼,非常具有實(shí)用價(jià)值,有興趣的可以了解一下。2017-03-03js前端實(shí)現(xiàn)圖片懶加載(lazyload)的兩種方式
本篇文章主要介紹了js前端實(shí)現(xiàn)圖片懶加載(lazyload)的兩種方式 ,使用圖片懶加載可以提高網(wǎng)頁(yè)運(yùn)行速度,有興趣的可以了解一下。2017-04-04