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

更新時間：2024年01月25日 16:50:04 作者：小灣生產隊隊長

renderjs是一個運行在視圖層的js,它比WXS更加強大,它只支持app-vue和h5,下面這篇文章主要給大家介紹了關于uniapp中使用render.js進行openlayers、arcgis等地圖操作的相關資料,需要的朋友可以參考下

一、為啥需要render.js

render.js主要作用于APP上，因為Uniapp本質為vue+js+html進行開發(fā)，整個技術棧還是H5，對DOM元素進行操作。而APP中沒用Dom元素這個概念。因此利用render.js這個視圖層的工具來進行渲染。

備注：

app中視圖層和邏輯層的概念：

視圖層：就是我們看到的APP上的元素，類似于web中的HTML那些

邏輯層：就是APP上實現各種操作的東西，類似于web的js干的事情。

render.js中的視圖層和邏輯層：

視圖層就是使用ang="renderjs"的<script>標簽

邏輯層就是普通的<script>標簽

二、render.js干啥的

運行在視圖層的js，大幅度降低邏輯層和視圖層的通訊損耗，提高視圖交互能力。

在視圖層操作DOM，運行web的js庫?？梢圆僮鱀OM。

三、怎么使用render.js

3.1 基本用法

在原先vue文件內的的script標簽的同級新增一個script，設置lang=renderjs，module=(值任意，相當于命名空間，之后會根據這個名字調用其中的方法)。

//test為render.js模塊的名稱，lang是固定寫法  lang="renderjs"表示這個script內是render.js
<script module="test" lang="renderjs">
	export default {
		mounted() {
			// ...
		},
		methods: {
			// ...
		}
	}
</script>

3.2 使用規(guī)則

1、頁面渲染、使用props傳值只能使用邏輯層的數據，就是template里面的HTML元素傳值要使用不帶lang的script標簽data內定義的變量。

2、按鈕的事件，邏輯層通過HTML標簽定義的事件比如直接使用button控件的 @click，視圖層通過document操作dom元素。

3、帶render.js的視圖層可以通過this.XXX拿到啥不帶的邏輯層的數據；邏輯層不能直接通過this.xxx拿到視圖層的數據

4、帶render.js的視圖層，調用方法時，可以通過this.$ownerInstance.callMethod('函數名', 數據)向啥不帶的邏輯層發(fā)送數據

5、由于renderjs的視圖層與uni的普通script邏輯層運行在同一環(huán)境，不能保證加載順序，所以，盡量把操作dom部分放在renderjs中，所有數據通過數據傳遞后，在renderjs中操作。

在renderjs中，可能會有獲取不到數據的情況，請確保組件數據優(yōu)先與renderjs加載，確定所傳輸的數據有值

<template>
    <view class="demo">
        <!-- info隨便寫，但是要與chang后面的一致，text是renderjsmodule名稱 -->
        <!--data是要想renderjs發(fā)送的數據，updateData是renderjs中的監(jiān)聽方法 -->
        
//下面這個寫法，會監(jiān)聽邏輯層變量data，data值發(fā)生變化的時候，會自動調用視圖層text中定義的updateData方法
<view  @click="text.onClick" :info="data" :change:info="text.updateData"  ref="video"></view>
        <view> {{data}}</view>
         <button @click="text.emitData">直接調用renderjs中的emitData的方法</button>
		

    </view>
</template>
<!-- 普通的script標簽 -->
<script>
    export default {
       data(){
            return {
              data: "hello"
            }
        },
        methods:{
              sendMsg(msg) {
                  console.log(msg) // 不好
              },
              
            getMessage(options){
				console.log("測試renderjs調用此方法："+JSON.stringify(options))
			}
             // 接收renderjs發(fā)回的數據
            receiveRenderData(val) {
               console.log('renderjs返回的值-->', val);
             },
        }
    }
</script>
<!-- renderjs的script標簽 -->
<script module="text" lang="renderjs">
    export default {
           data(){
                return {
                   name:'我是render.js中的值'
                }
            },
            methods:{
              onClick(event, ownerInstance) {
                // 向 uni 的script發(fā)送信息,實現視圖層向邏輯層發(fā)送數據
                ownerInstance.callMethod('sendMsg', '不好')
                //或者另外一個寫法
               this.$ownerInstance.callMethod('sendMsg', '不好')
              },
              updateData(newValue, oldValue, ownerInstance, instance) {
                  // newValue: 新數據
                  // oldValue: 老數據
                  	ownerInstance.callMethod('getMessage',{
					test: '123'     
				})     //調用vue頁面普通script標簽內的getMessage方法，傳遞個json{test:'123'}
                  // 向uni-app頁面組件發(fā)送信息
				this.sendMsg();

                },
                // 發(fā)送數據到邏輯層
               emitData(e, ownerVm) {
                  ownerVm.callMethod('receiveRenderData', this.name)
                }
               sendMsg() {
				// 向頁面?zhèn)鲄?
				this.$ownerInstance.callMethod('getMessage','123')
			},
          }
    }
</script>