uniapp中renderjs使用與傳值問題

Posted on by

前言

需求是用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使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：