uniapp实现逻辑层向视图层传值,render.js中的通信

1.在html中,amapPoints是要传的参数,test是renderjs模块的名称,getData是视图层中的函数,从而在视图层拿到在逻辑层定义的amapPoints数据。

<template>
    <!-- :data='amapPoints' 和 :change:data="test.getData 缺一不可 -->
	<view class="">
		<view id="container" :data='amapPoints' :change:data="test.getData"></view>
	</view>
</template>

2.在逻辑层中(不带有renderjs),我们通过调用接口,拿到需要的数据

<script>
	// 逻辑层
	export default {
		data() {
			return {
				amapPoints: null,  // 这就是我们需要向视图层传递的数据
			}
		},
		mounted() {
			this.initPoints();
		},
		methods: {
			initPoints() {
				uni.request({
					url: "http://123.56.139.127:8899/geoserver/points/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=points%3Apoints&maxFeatures=20&outputFormat=application%2Fjson",
					header: {
						// 'Content-Type': 'application/x-www-form-urlencoded'
						'Content-Type': 'application/json' //自定义请求头信息
					},
					method: 'GET', //请求方式,必须为大写
					success: (res) => {
						const features = res.data.features;
						// console.log("定位", features);
						// 将GeoJSON格式转换为高德地图可识别的格式
						this.amapPoints = features.map((feature) => {
							const coordinates = feature.geometry
								.coordinates; // 坐标格式为 [longitude, latitude]
							const id = feature.id.split(".")[1];
							return {
								lnglat: coordinates,
								id
							};
						});
					}
				})
			},
		}
	}
</script>

3.在逻辑层接收逻辑层传递过来的数据

<script module="test" lang="renderjs">
	// 视图层
	export default {
		data() {
			return {
				points: []  // 定义数组,接收传递过来的值
			}
		},
		mounted() {
            // html中绑定的方法
			getData(newValue) {
				console.log("newValue", newValue);
				// console.log("oldValue", oldValue);
				if (newValue) {
					this.points = newValue  // 将传递过来的值赋值给points,这样就可以在视图层中使用
				}
				// console.log("this.points", this.points)
			},
		}
	}
</script>

  • 11
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值