uniapp 的 renderjs 使用详解，结合arcgis api

目录

什么renderjs

与一般vue使用上的区别

组件传值: 通过使用逻辑层方法，传递数据,涉及到数据赋值和生命周期等问题

HTML

逻辑层：

test组件

    关于调试问题

 关于各层数据传递问题：

---

什么renderjs

• 在renderjs下， 可以引用jquery,esri-loader等web api（在uniapp项目下,若不使用renderjs，这种api以及document,window是方法是不支持的）。
• 可以直接操作dom，例:document.getElementbyId().οnclick=()=>{ }。
• 动画更流畅，性能更高。

与一般vue使用上的区别

• renderjs 分为 视图层 与 逻辑层
  • 视图层即使用lang="renderjs"的<script>，
  • 逻辑层就是普通的<script>标签。
    • 
    • 
• 页面渲染、使用props传值只能用逻辑层的数据，就是组件 view 传值要用下面的逻辑层。
  • 
• 按钮的监听分两种：
  • 逻辑层：通过html标签，定义点击事件
    • 
    • 
  • 视图层：通过document操纵dom元素

组件传值: 通过使用逻辑层方法，传递数据,涉及到数据赋值和生命周期等问题

HTML

<template>
	<view class="content">
		<!-- <button @click="sendMsg">点击</button> -->
		<view @click="onViewClick"><button>{{text}}</button></view>
		<test :view="view" :map="map" :layer="layer" v-if="begin"></test>
	</view>
</template>

视图层：

<script module="echarts" lang="renderjs">
	let myChart
	 import {loadModules} from '../../static/esri-loader.js';
	export default {
		view:null,
		map:null,
		layer:null,
		data() {
		    return {
		        ready:false,
				text:"视图层",
			
		},
		mounted() {
				this.initEcharts()
			
			
		},
		methods: {
			
			
			initEcharts() {
				let options = {
				  url: 'https://js.arcgis.com/4.20/init.js',
				  css: 'https://js.arcgis.com/4.20/esri/themes/light/main.css',
				};
				loadModules(["esri/views/MapView",
				  "esri/Map", "esri/layers/MapImageLayer","esri/tasks/support/FindParameters",
            "esri/tasks/FindTask",
				], options).then(([MapView, Map, MapImageLayer,FindParameters,FindTask]) => {
				  // console.log(sublayers)
				  const sublayers=[ ];
				  for(let i=17;i>=0;i--){
				    let sub={ }
				    sub.id=i
				    sub.visible=true
				    sublayers.push(sub);
				    i<15?sub.popupTemplate=this.popupPoint:sub.popupTemplate=this.popupLine;
				  }
				  this.layer = new MapImageLayer({
				    url: "https://47.97.192.155:6443/arcgis/rest/services/XSTestDemo/MapServer",
				     sublayers: sublayers
				
				  });
				  this.map = new Map({
				    layers: [this.layer],
				    basemap: "streets",
				  });
				  this.view = new MapView({
				    container: "viewDiv",
				    map: this.map,
				    zoom:5,
				    center:[120,0]
				  }); //显示地图
					
					//关键，类似监听的作用
					//通过使用逻辑层方法，传递数据
				  this.$ownerInstance.callMethod('sendMsg')
			
				});
			
			}
		}
	}
</script>

逻辑层：

<script>
	export default {
		data() {
			return {
				begin:false
			}
		},
		onLoad() {
			
		},
		watch:{
			
		},
		mounted() {
		},
		methods: {
			sendMsg(){
				//开始渲染
				this.begin=true
			}
		},
		
	}
</script>

test组件

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		props:['view','map','layer'],
		name:"test",
		data() {
			return {
				
			};
		},
		mounted() {
			console.log('---这是view')
			console.log(this.view)
			console.log(this.layer)
			console.log(this.map)
		}
	}
</script>

<style>

</style>

 关于调试问题

        不一定都要用真机模拟器，只要了解并按照renderjs的语法规则，可直接使用浏览器调试。

 关于各层数据传递问题：

        原则上两层的数据都是渲染在一个this里面的，只是涉及到生命周期问题，可通过点击事件等拿到值

• 视图层可以通过this.xxx拿到逻辑层的数据
• 逻辑层不能直接通过thiis.xxx拿到视图层数据（就是要绕弯拿）。

<template>
  <view>
    <text>renderjs区域</text>
        <view @click="renderScript.emitData" :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">
        </view>
        <button @click="changeMsg" class="app-view">app-view</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      };
    },
    methods: {
      // 触发逻辑层出入renderjs数据改变
      changeMsg() {
        this.msg = 'hello renderjs' + Math.random() * 10;
      },
      // 接收renderjs发回的数据
      receiveRenderData(val) {
        console.log('receiveRenderData-->', val);
      }
    }
  };
</script>

<script module="renderScript" lang="renderjs">
    export default {
      data() {
        return {
          name: 'render-vm'
        }
      },
      mounted() {
        const view = document.getElementById('renderjs-view')
        const button = document.createElement('button')
        button.innerText = '一个按钮'
        view.appendChild(button)
      },
      methods: {
        // 接收逻辑层发送的数据
        receiveMsg(newValue, oldValue, ownerVm, vm) {
          console.log('newValue', newValue)
          console.log('oldValue', oldValue)
          console.log('ownerVm', ownerVm)
          console.log('vm', vm)
        },
        // 发送数据到逻辑层
        emitData(e, ownerVm) {
          ownerVm.callMethod('receiveRenderData', this.name)
        }
      }
    };
</script>

参考：uni-app renderjs通信_辛巴德2018的博客-CSDN博客_renderjs