欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp中使用render.js進行openlayers、arcgis等地圖操作實戰(zhàn)指南

 更新時間:2024年01月25日 16:50:04   作者:小灣生產(chǎn)隊隊長  
renderjs是一個運行在視圖層的js,它比WXS更加強大,它只支持app-vue和h5,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用render.js進行openlayers、arcgis等地圖操作的相關(guā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)文章

最新評論