uniapp中使用render.js進(jìn)行openlayers、arcgis等地圖操作實(shí)戰(zhàn)指南
uniapp中使用render.js進(jìn)行openlayers、arcgis等地圖操作
一、為啥需要render.js
render.js主要作用于APP上,因?yàn)閁niapp本質(zhì)為vue+js+html進(jìn)行開發(fā),整個(gè)技術(shù)棧還是H5,對(duì)DOM元素進(jìn)行操作。而APP中沒用Dom元素這個(gè)概念。因此利用render.js這個(gè)視圖層的工具來(lái)進(jìn)行渲染。
備注:
app中視圖層和邏輯層的概念:
視圖層:就是我們看到的APP上的元素,類似于web中的HTML那些
邏輯層:就是APP上實(shí)現(xiàn)各種操作的東西,類似于web的js干的事情。
render.js中的視圖層和邏輯層:
視圖層就是使用ang="renderjs"的<script>標(biāo)簽
邏輯層就是普通的<script>標(biāo)簽
二、render.js干啥的
運(yùn)行在視圖層的js,大幅度降低邏輯層和視圖層的通訊損耗,提高視圖交互能力。
在視圖層操作DOM,運(yùn)行web的js庫(kù)??梢圆僮鱀OM。
三、怎么使用render.js
3.1 基本用法
在原先vue文件內(nèi)的的script標(biāo)簽的同級(jí)新增一個(gè)script,設(shè)置lang=renderjs,module=(值任意,相當(dāng)于命名空間,之后會(huì)根據(jù)這個(gè)名字調(diào)用其中的方法)。
//test為render.js模塊的名稱,lang是固定寫法 lang="renderjs"表示這個(gè)script內(nèi)是render.js
<script module="test" lang="renderjs">
export default {
mounted() {
// ...
},
methods: {
// ...
}
}
</script>
3.2 使用規(guī)則
1、頁(yè)面渲染、使用props傳值只能使用邏輯層的數(shù)據(jù),就是template里面的HTML元素傳值要使用不帶lang的script標(biāo)簽data內(nèi)定義的變量。
2、按鈕的事件,邏輯層通過(guò)HTML標(biāo)簽定義的事件比如直接使用button控件的 @click,視圖層通過(guò)document操作dom元素。
3、帶render.js的視圖層可以通過(guò)this.XXX拿到啥不帶的邏輯層的數(shù)據(jù);邏輯層不能直接通過(guò)this.xxx拿到視圖層的數(shù)據(jù)
4、帶render.js的視圖層,調(diào)用方法時(shí),可以通過(guò)this.$ownerInstance.callMethod('函數(shù)名', 數(shù)據(jù))向啥不帶的邏輯層發(fā)送數(shù)據(jù)
5、由于renderjs的視圖層與uni的普通script邏輯層運(yùn)行在同一環(huán)境,不能保證加載順序,所以,盡量把操作dom部分放在renderjs中,所有數(shù)據(jù)通過(guò)數(shù)據(jù)傳遞后,在renderjs中操作。
在renderjs中,可能會(huì)有獲取不到數(shù)據(jù)的情況,請(qǐng)確保組件數(shù)據(jù)優(yōu)先與renderjs加載,確定所傳輸?shù)臄?shù)據(jù)有值
<template>
<view class="demo">
<!-- info隨便寫,但是要與chang后面的一致,text是renderjsmodule名稱 -->
<!--data是要想renderjs發(fā)送的數(shù)據(jù),updateData是renderjs中的監(jiān)聽方法 -->
//下面這個(gè)寫法,會(huì)監(jiān)聽邏輯層變量data,data值發(fā)生變化的時(shí)候,會(huì)自動(dòng)調(diào)用視圖層text中定義的updateData方法
<view @click="text.onClick" :info="data" :change:info="text.updateData" ref="video"></view>
<view> {{data}}</view>
<button @click="text.emitData">直接調(diào)用renderjs中的emitData的方法</button>
</view>
</template>
<!-- 普通的script標(biāo)簽 -->
<script>
export default {
data(){
return {
data: "hello"
}
},
methods:{
sendMsg(msg) {
console.log(msg) // 不好
},
getMessage(options){
console.log("測(cè)試renderjs調(diào)用此方法:"+JSON.stringify(options))
}
// 接收renderjs發(fā)回的數(shù)據(jù)
receiveRenderData(val) {
console.log('renderjs返回的值-->', val);
},
}
}
</script>
<!-- renderjs的script標(biāo)簽 -->
<script module="text" lang="renderjs">
export default {
data(){
return {
name:'我是render.js中的值'
}
},
methods:{
onClick(event, ownerInstance) {
// 向 uni 的script發(fā)送信息,實(shí)現(xiàn)視圖層向邏輯層發(fā)送數(shù)據(jù)
ownerInstance.callMethod('sendMsg', '不好')
//或者另外一個(gè)寫法
this.$ownerInstance.callMethod('sendMsg', '不好')
},
updateData(newValue, oldValue, ownerInstance, instance) {
// newValue: 新數(shù)據(jù)
// oldValue: 老數(shù)據(jù)
ownerInstance.callMethod('getMessage',{
test: '123'
}) //調(diào)用vue頁(yè)面普通script標(biāo)簽內(nèi)的getMessage方法,傳遞個(gè)json{test:'123'}
// 向uni-app頁(yè)面組件發(fā)送信息
this.sendMsg();
},
// 發(fā)送數(shù)據(jù)到邏輯層
emitData(e, ownerVm) {
ownerVm.callMethod('receiveRenderData', this.name)
}
sendMsg() {
// 向頁(yè)面?zhèn)鲄?
this.$ownerInstance.callMethod('getMessage','123')
},
}
}
</script>
使用注意事項(xiàng):
1、render.js的生命周期不和uniapp相同,而是和vue相同。
2、可以使用 vue 組件的生命周期(不支持 beforeDestroy、destroyed、beforeUnmount、unmounted),不可以使用 App、Page 的生命周期
3、視圖層和邏輯層通訊方式與 WXS 一致,另外可以通過(guò) this.$ownerInstance 獲取當(dāng)前組件的 ComponentDescriptor 實(shí)例。
4、注意邏輯層給數(shù)據(jù)時(shí)最好一次性給到渲染層,而不是不停從邏輯層向渲染層發(fā)消息,那樣還是會(huì)產(chǎn)生邏輯層和視圖層的多次通信,還是會(huì)卡。
5、觀測(cè)更新的數(shù)據(jù)在視圖層可以直接訪問(wèn)到
6、APP 端視圖層的頁(yè)面引用資源的路徑相對(duì)于根目錄計(jì)算,例如:./static/test.js
特別注意事項(xiàng):
1.在renderjs層不能使用uni或其他框架的API,例如uni.request、uni.getlocation等等方法,需在原生層調(diào)用后觸發(fā)監(jiān)聽將數(shù)據(jù)傳入。
2.在APP端renderjs層的data與原生層的data互不相干
3.this.$ownerInstance.callMethod方法必須通過(guò)點(diǎn)擊事件執(zhí)行
4.地圖方法都要寫在renderjs層中,不能使用子組件,所以都要傳值到render.js中操作,不能再子組件中調(diào)用地圖的API方法。
5、在template中使用一開始給renderjs的命名加.的方式調(diào)用其中的方法
總結(jié)
到此這篇關(guān)于uniapp中使用render.js進(jìn)行openlayers、arcgis等地圖操作的文章就介紹到這了,更多相關(guān)uniapp render.js進(jìn)行地圖操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
firefox中用javascript實(shí)現(xiàn)鼠標(biāo)位置的定位
firefox中用javascript實(shí)現(xiàn)鼠標(biāo)位置的定位...2007-06-06
僅9張思維導(dǎo)圖幫你輕松學(xué)習(xí)Javascript 就這么簡(jiǎn)單
僅9張思維導(dǎo)圖幫你輕松學(xué)習(xí)Javascript,從javascript變量、javascript運(yùn)算符、javascript函數(shù)基礎(chǔ)等多方面了解Javascript,就這么簡(jiǎn)單2016-06-06
JS封裝通過(guò)className獲取元素的函數(shù)示例
這篇文章主要介紹了JS封裝通過(guò)className獲取元素的函數(shù),涉及javascript針對(duì)頁(yè)面元素屬性的遍歷與數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子
javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子,需要的朋友可以參考一下2013-03-03
JS獲取checkbox的個(gè)數(shù)簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS獲取checkbox的個(gè)數(shù)簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
整理關(guān)于Bootstrap導(dǎo)航的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
關(guān)于JAVASCRIPT urldecode URL解碼的問(wèn)題
JS要實(shí)現(xiàn)單純的編碼解碼輕而易舉,escape、unescape就搞定,但是遇到不是完整的URL轉(zhuǎn)碼,就沒辦法了2012-01-01
基于JavaScript實(shí)現(xiàn)十五拼圖代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)十五拼圖代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04

