uniapp中renderjs使用與傳值問題

更新時間：2022年07月24日 08:08:26 作者：god‘s?hand

renderjs是一個運行在視圖層的js,它只支持app-vue和h5,下面這篇文章主要給大家介紹了關(guān)于uniapp中renderjs使用與傳值問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

一、renderjs的作用是什么？

renderjs 主要服務(wù)于APP，因為uni-app為vue+js+html進(jìn)行編寫，整個是h5的技術(shù)棧。而app上并沒有document等基礎(chǔ)對象。那么，涉及到這些的前端類庫就無法使用，例如html2、canvas、canvas2、image。而要用這些怎么辦，這是用就出現(xiàn)了renderjs這種視圖層工具來進(jìn)行渲染。

運行在視圖層的js

大幅降低邏輯層和視圖層的通訊損耗，提供高性能視圖交互能力（減少通訊損耗提升性能，例如一些手勢或canvas動畫的場景）

在視圖層操作dom，運行for web的js庫（可以操作dom，意味著擁有window、document等這些全局變量，在app-vue的service層沒有這些）

二、renderjs怎樣使用？

1.原生層數(shù)據(jù)通過監(jiān)聽傳入renderjs層(可以通過調(diào)用原生層的方法觸發(fā))

2.直接調(diào)用renderjs層方法傳出數(shù)據(jù)

三、測試代碼（借用網(wǎng)上一段代碼，寫的很全面）

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

注意：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層中，不能使用子組件

補充：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;">
                            確認(rèn)
        </view>
    </view>
</template>
 
//renderjs 模式
<script>
    export default {
        data() {
            return {
                msg: '',
            };
        },
        methods: {
            // 觸發(fā)邏輯層出入renderjs數(shù)據(jù)改變
            // 接收renderjs發(fā)回的數(shù)據(jù)
            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: {
              //點擊函數(shù)
            emitData(e, ownerVm) {
                ownerVm.callMethod('receiveRenderData', this.dot)
            }
        }
    }
</script>

主頁面代碼，在onload里面接收renderjs頁面的值

        onLoad() {
            var t = this;
            this.$eventHub.$on('dot', data => {
                 console.log(data);
                //將數(shù)組轉(zhuǎn)為字符串
                //t.dot = t.getString(data)
                //字符串轉(zhuǎn)數(shù)組
                //console.log(eval(t.dot))
            });
        },