目录
组件传值: 通过使用逻辑层方法，传递数据,涉及到数据赋值和生命周期等问题
什么renderjs
- 在renderjs下，可以引用jquery,esri-loader等web api（在uniapp项目下,若不使用renderjs，这种api以及document,window是方法是不支持的）。
- 可以直接操作dom，例:document.getElementbyId().οnclick=()=>{ }。
- 动画更流畅，性能更高。
与一般vue使用上的区别
- renderjs 分为 视图层 与 逻辑层
- 视图层即使用lang="renderjs"的
组件传值: 通过使用逻辑层方法，传递数据,涉及到数据赋值和生命周期等问题
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拿到视图层数据（就是要绕弯拿）。
renderjs区域
参考：uni-app renderjs通信_辛巴德2018的博客-CSDN博客_renderjs
