首頁 > 軟體

uniapp中renderjs使用與傳值問題

2022-07-24 10:00:37

前言

需求是用openlayers在uniapp框架下做一個移動gis類的軟體,選擇用renderjs實現地圖與dom的互動,一開始也是小白,通過百度資料以及一步步測試後掌握了renderjs的使用,以及地圖功能的實現。

一、renderjs的作用是什麼?

renderjs 主要服務於APP,因為uni-app為vue+js+html進行編寫,整個是h5的技術棧。而app上並沒有document等基礎物件。那麼,涉及到這些的前端類庫就無法使用,例如html2、canvas、canvas2、image。而要用這些怎麼辦,這是用就出現了renderjs這種檢視層工具來進行渲染。

執行在檢視層的js

大幅降低邏輯層和檢視層的通訊損耗,提供高效能檢視互動能力(減少通訊損耗提升效能,例如一些手勢或canvas動畫的場景)

在檢視層操作dom,執行for web的js庫(可以操作dom,意味著擁有window、document等這些全域性變數,在app-vue的service層沒有這些)

二、renderjs怎樣使用?

1.原生層資料通過監聽傳入renderjs層(可以通過呼叫原生層的方法觸發)

2.直接呼叫renderjs層方法傳出資料

三、測試程式碼(借用網上一段程式碼,寫的很全面)

<template>
  <view>
        <view  :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">
			{{msg}}
		</view>
        <button @click="renderScript.emitData">直接呼叫renderjs中的emitData的方法</button>
		<button @click="changeMsg" class="app-view">改變msg的值,直接呼叫renderjs中receiveMsg的值</button>
		<button @click="renderScript.renferMsg">通過renderjs改變msg的值,同時呼叫renderjs中的emitData的方法</button>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        msg: '我是service層原來的msg',
      };
    },
    methods: {
      // 觸發邏輯層出入renderjs資料改變
      changeMsg() {
        this.msg = "msg值改變了";
      },
      // 接收renderjs發回的資料
      receiveRenderData(val) {
        console.log('renderjs返回的值-->', val);
      },
	  //接收renderjs發回的資料,同時觸發:change:msg,呼叫enderjs中的emitData的方法
	  serviceClick(e){
		  this.msg=e
	  }
    }
  };
</script>
 
<script module="renderScript" lang="renderjs">
    export default {
      data() {
        return {
          name: '我是renderjs資料'
        }
      },
      methods: {
		  renferMsg(event, ownerInstance) {
		  	// 呼叫 service層的serviceClick方法,傳值
			console.log(event,ownerInstance)
		  	ownerInstance.callMethod('serviceClick', {
		  		test: '這是點選renderjs的區域,向service層傳遞變數'
		  	})
		  },
        // 接收邏輯層傳送的資料
        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)
        },
        // 傳送資料到邏輯層
        emitData(e, ownerVm) {
          ownerVm.callMethod('receiveRenderData', this.name)
        }
      }
    };
</script>

注意:1.在renderjs層不能使用uni或其他框架的API,例如uni.request、uni.getlocation等等方法,需在原生層呼叫後觸發監聽將資料傳入。

2.在APP端renderjs層的data與原生層的data互不相干

3.this.$ownerInstance.callMethod方法必須通過點選事件執行

4.地圖方法都要寫在renderjs層中,不能使用子元件

補充:uniapp 中renderjs傳值問題

需要自己自定義一個按鈕,點選按鈕後才能獲取到值。renderjs 內碼錶面

<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;">
                            確認
        </view>
    </view>
</template>
 
//renderjs 模式
<script>
    export default {
        data() {
            return {
                msg: '',
            };
        },
        methods: {
            // 觸發邏輯層出入renderjs資料改變
            // 接收renderjs發回的資料
            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: {
              //點選函數
            emitData(e, ownerVm) {
                ownerVm.callMethod('receiveRenderData', this.dot)
            }
        }
    }
</script>

主頁面程式碼,在onload裡面接收renderjs頁面的值

        onLoad() {
            var t = this;
            this.$eventHub.$on('dot', data => {
                 console.log(data);
                //將陣列轉為字串
                //t.dot = t.getString(data)
                //字串轉陣列
                //console.log(eval(t.dot))
            });
        },

總結

到此這篇關於uniapp中renderjs使用與傳值問題的文章就介紹到這了,更多相關uniapp renderjs使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com