Renderjs解决逻辑层和渲染层通信问题
公孙慎之
renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。
renderjs的主要作用有2个：
- 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
- 在视图层操作dom，运行 for web 的 js库 （操作dom，执行使用window上的方法）
----------------------------------------------------------------------------
--代码引用https://blog.csdn.net/qq_32852047/article/details/125559755?ops_request_misc=&request_id=&biz_id=102&utm_term=renderjs&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-125559755.nonecase&spm=1018.2226.3001.4187
----------------------------------------------------------------------------
<template>
<view class="page">
<view id="map-container" class="map-container"></view>
<!-- renderjs 与逻辑层即普通的script之间数据交互使用 START -->
<view class="renderjs" id="renderjs-view" :value="value" :change:value="leafletMap.getRadius"
:currLocation="currentLocation" :change:currLocation="leafletMap.getCurrLocation" :currentMap="mapType"
:pickColor="chooseColor" :change:pickColor="leafletMap.getChooseColor" :pickOpacity="chooseOpacity"
:change:pickOpacity="leafletMap.getChooseOpacity" :change:currentMap="leafletMap.getCurrentMap">
</view>
<!-- renderjs 与逻辑层即普通的script之间数据交互使用 END -->
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
mapType: '',
latLng_Renderjs: {} //接收视图层即renderjs中传递过来的数据
}
},
onLoad() {
},
methods: {
// 接收renderjs发回的数据
receiveRenderData(clickLatLng) {
// console.log('receiveRenderData-->', clickLatLng);
this.latLng_Renderjs = clickLatLng
},
},
watch: {
// [X] 手机端不可用，拿不到该值，inputValue下 this.clickLatlng = undefined
latLng_Renderjs(LatLng) {
if (LatLng.lat !== null && LatLng.lng !== null && this.inputValue.trim() !== '') {
this.buttonDisabled = false
} else {
this.buttonDisabled = true
}
},
inputValue(v) {
let value = v.trim()
let LatLng = this.latLng_Renderjs
if (value !== '' && LatLng.lat !== null && LatLng.lng !== null) {
this.buttonDisabled = false
} else {
this.buttonDisabled = true
}
},
}
}
</script>
<script module="leafletMap" lang="renderjs">
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
import '@/utils/leaflet.ChineseTmsProviders.js'
export default {
data() {
return {
clickLatLng: {
lat: null,
lng: null
}, //当前点击的地图坐标
latlngs: [], //L.latLng 类型的坐标点
}
},
mounted() {
//初始化地图
let map = L.map('map-container', {
center: [22.612515, 113.939242],
zoomControl: false,
zoom: this.zoom,
maxZoom: 18,
minZoom: 3,
attributionControl: false //移除右下角logo 可自定
})
this.map = map
},
methods: {
// 发送数据到逻辑层
postMessage(event, ownerInstance) {
this.$ownerInstance.callMethod('receiveRenderData', this.clickLatLng)
},
//接收逻辑层发送的数据 选择的透明度
getChooseOpacity(opacity) {
this.fillOpacity = opacity
},
//接收逻辑层发送的数据 选择的颜色
getChooseColor(colors) {
this.fillColor = colors + ''
},
//接收逻辑层发送的数据 ⚪的半径
getRadius(value) {
this.radius = value
},
// 接收逻辑层发送的数据 当前的地图类型
getCurrentMap(curmap) {
this.currentMapType = curmap
},
// 接收逻辑层发送的数据 当前的地理位置经纬度
getCurrLocation(location) {
this.currLocation = location
},
//添加一个Circle
setCircle() {
this.postMessage() //将获取的定位信息传递到逻辑层
}
},
watch: {
currLocation(val) {
if (val.length > 0) {
this.setCurrentCenter()
}
},
radius(val) {
if (this.clickLatLng.lng !== null && this.clickLatLng.lat !== null) {
this.setCircle()
}
},
fillColor(val) {
if (this.clickLatLng.lng !== null && this.clickLatLng.lat !== null) {
this.setCircle()
}
}
}
}
</script>
<style scoped>
</style>如果将数据传递给渲染层，通常需要进行重新渲染以更新视图。这是因为渲染层的视图是根据传递的数据动态生成的，如果数据发生变化而不进行重新渲染，则视图无法同步更新。在 Vue.js 或 Uniapp 中，可以通过响应式数据绑定和计算属性等方法来实现自动重新渲染视图。但是，在某些情况下，可能需要手动触发重新渲染，例如当数据来源于异步请求或需要延迟处理时。此时，可以使用 this.$forceUpdate() 方法来强制组件重新渲染视图。
renderjs存在响应式不明确的问题。
当renderjs 通过:与@change： 两个方法将数据从逻辑层传递给渲染层时，如果页面渲染发生改变则可以获取到逻辑层的数据，而当逻辑层的数据是通过接口返回的方式在then中赋值的，则页面不会发生渲染改变，也不会将数据传递给渲染层。此时就产生了渲染层无法对数据进行响应式。
异步数据请求完成后，可以使用回调函数或者Promise来更新render中的数据。具体实现方式取决于你使用的框架或库。
在React中，可以使用useState或useReducer Hook来管理组件的状态，并在异步请求完成后调用setState或dispatch来更新状态，从而触发组件的重新渲染。
在Vue中，可以使用响应式数据或Vuex来管理组件的状态，并在异步请求完成后更新数据，从而触发组件的重新渲染。
无论使用什么框架或库，关键是理解数据流的概念，确保经过异步请求的数据能够正确地流入到组件中，从而更新UI。
如果您想将从接口获取的x轴数据传递给 render.js 进行处理，可以使用回调函数或者Promise来实现。具体做法如下：
- 1、在 render.js 中定义一个回调函数或者 Promise 对象，用于接收并处理从逻辑层传递过来的数据。
// 回调函数方式
function processData(xAxisData) {
// 处理数据逻辑
}
// Promise 方式
const processData = (xAxisData) => {
return new Promise((resolve, reject) => {
// 处理数据逻辑
resolve(processedData);
});
};- 2、在逻辑层中调用接口获取数据，并在数据返回后通过回调函数或者 Promise 将数据传递给 render.js。
fetchDataFromAPI().then(data => {
// 调用回调函数处理数据
processData(data.xAxisData);
// 或者使用 Promise 处理数据
processData(data.xAxisData).then(processedData => {
// 更新组件状态等操作
});
});- 3、根据回调函数或 Promise 的返回值进行相应的处理，例如更新视图、更新组件状态等操作。
需要注意的是，由于网络请求是异步的，因此在处理数据时需要考虑异步性质，以免出现异常或不一致的结果。
通过将数据接口封装成promise异步请求，此时可以将数据传递到渲染层。
类似资料：