uniapp中使用render.js進行openlayers、arcgis等地圖操作實戰(zhàn)指南
uniapp中使用render.js進行openlayers、arcgis等地圖操作
一、為啥需要render.js
render.js主要作用于APP上,因為Uniapp本質(zhì)為vue+js+html進行開發(fā),整個技術(shù)棧還是H5,對DOM元素進行操作。而APP中沒用Dom元素這個概念。因此利用render.js這個視圖層的工具來進行渲染。
備注:
app中視圖層和邏輯層的概念:
視圖層:就是我們看到的APP上的元素,類似于web中的HTML那些
邏輯層:就是APP上實現(xiàn)各種操作的東西,類似于web的js干的事情。
render.js中的視圖層和邏輯層:
視圖層就是使用ang="renderjs"的<script>標(biāo)簽
邏輯層就是普通的<script>標(biāo)簽
二、render.js干啥的
運行在視圖層的js,大幅度降低邏輯層和視圖層的通訊損耗,提高視圖交互能力。
在視圖層操作DOM,運行web的js庫??梢圆僮鱀OM。
三、怎么使用render.js
3.1 基本用法
在原先vue文件內(nèi)的的script標(biāo)簽的同級新增一個script,設(shè)置lang=renderjs
,module=(值任意,相當(dāng)于命名空間,之后會根據(jù)這個名字調(diào)用其中的方法)。
//test為render.js模塊的名稱,lang是固定寫法 lang="renderjs"表示這個script內(nèi)是render.js <script module="test" lang="renderjs"> export default { mounted() { // ... }, methods: { // ... } } </script>
3.2 使用規(guī)則
1、頁面渲染、使用props傳值只能使用邏輯層的數(shù)據(jù),就是template里面的HTML元素傳值要使用不帶lang的script標(biāo)簽data內(nèi)定義的變量。
2、按鈕的事件,邏輯層通過HTML標(biāo)簽定義的事件比如直接使用button控件的 @click,視圖層通過document操作dom元素。
3、帶render.js的視圖層可以通過this.XXX拿到啥不帶的邏輯層的數(shù)據(jù);邏輯層不能直接通過this.xxx拿到視圖層的數(shù)據(jù)
4、帶render.js的視圖層,調(diào)用方法時,可以通過this.$ownerInstance.callMethod('函數(shù)名', 數(shù)據(jù))向啥不帶的邏輯層發(fā)送數(shù)據(jù)
5、由于renderjs的視圖層與uni的普通script邏輯層運行在同一環(huán)境,不能保證加載順序,所以,盡量把操作dom部分放在renderjs中,所有數(shù)據(jù)通過數(shù)據(jù)傳遞后,在renderjs中操作。
在renderjs中,可能會有獲取不到數(shù)據(jù)的情況,請確保組件數(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)聽方法 --> //下面這個寫法,會監(jiān)聽邏輯層變量data,data值發(fā)生變化的時候,會自動調(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("測試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ā)送信息,實現(xiàn)視圖層向邏輯層發(fā)送數(shù)據(jù) ownerInstance.callMethod('sendMsg', '不好') //或者另外一個寫法 this.$ownerInstance.callMethod('sendMsg', '不好') }, updateData(newValue, oldValue, ownerInstance, instance) { // newValue: 新數(shù)據(jù) // oldValue: 老數(shù)據(jù) ownerInstance.callMethod('getMessage',{ test: '123' }) //調(diào)用vue頁面普通script標(biāo)簽內(nèi)的getMessage方法,傳遞個json{test:'123'} // 向uni-app頁面組件發(fā)送信息 this.sendMsg(); }, // 發(fā)送數(shù)據(jù)到邏輯層 emitData(e, ownerVm) { ownerVm.callMethod('receiveRenderData', this.name) } sendMsg() { // 向頁面?zhèn)鲄? this.$ownerInstance.callMethod('getMessage','123') }, } } </script>
使用注意事項:
1、render.js的生命周期不和uniapp相同,而是和vue相同。
2、可以使用 vue 組件的生命周期(不支持 beforeDestroy、destroyed、beforeUnmount、unmounted),不可以使用 App、Page 的生命周期
3、視圖層和邏輯層通訊方式與 WXS 一致,另外可以通過 this.$ownerInstance 獲取當(dāng)前組件的 ComponentDescriptor 實例。
4、注意邏輯層給數(shù)據(jù)時最好一次性給到渲染層,而不是不停從邏輯層向渲染層發(fā)消息,那樣還是會產(chǎn)生邏輯層和視圖層的多次通信,還是會卡。
5、觀測更新的數(shù)據(jù)在視圖層可以直接訪問到
6、APP 端視圖層的頁面引用資源的路徑相對于根目錄計算,例如:./static/test.js
特別注意事項:
1.在renderjs層不能使用uni或其他框架的API,例如uni.request、uni.getlocation等等方法,需在原生層調(diào)用后觸發(fā)監(jiān)聽將數(shù)據(jù)傳入。
2.在APP端renderjs層的data與原生層的data互不相干
3.this.$ownerInstance.callMethod方法必須通過點擊事件執(zhí)行
4.地圖方法都要寫在renderjs層中,不能使用子組件,所以都要傳值到render.js中操作,不能再子組件中調(diào)用地圖的API方法。
5、在template中使用一開始給renderjs的命名加.的方式調(diào)用其中的方法
總結(jié)
到此這篇關(guān)于uniapp中使用render.js進行openlayers、arcgis等地圖操作的文章就介紹到這了,更多相關(guān)uniapp render.js進行地圖操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript必知必會(六) delete in instanceof
這篇文章主要介紹了JavaScript必知必會(六) delete in instanceof的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06JS動態(tài)改變?yōu)g覽器標(biāo)題的方法
這篇文章主要介紹了JS動態(tài)改變?yōu)g覽器標(biāo)題的方法,涉及JavaScript頁面元素結(jié)合時間函數(shù)動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04div+css實現(xiàn)鼠標(biāo)放上去,背景跟圖片都會變化。
div+css實現(xiàn)鼠標(biāo)放上去,背景跟圖片都會變化。...2007-06-06