webview简单记录

接上篇，技术能力有限，leaflet无法在uniapp上只可以正常显示地图或者静态的数据无法在地图页面接收到动态的数据。故使用web-view，嵌入h5页面解决问题。记录一下过程，以免遗忘。

新建一个文件夹用于写入h5页面

index.html是嵌入的h5页面

 

 使用web-view组件，当作来承载网页的容器。

web-view | uni-app官网

<template>
	<view>
		<web-view class="webview" id="webview":src='urlc' ref="webview" @message="handleMessage"></web-view>
	</view>
</template>

app与webview之间的传值

html传值给app：

uni.navigateTo({
	url: `/pages/reported/reported?editData=${JSON.stringify(someFeature)}`
});

app接收：

onLoad(option) {
	console.log('onload');
	console.log(option)
	if(option && option.map_data){
		this.map_data = option.map_data
	}
}

----------------------------------------------------------------------------------------------------

app传值给html：

computed: {
	urlc:function() {
	    if(this.map_data.length!=0) {
			console.log('查找数据了')
			return '/hybrid/html/index.html?map_searchdata='+this.map_data+"&token_data="+this.token+"&dutyOp="+this.dutyOp
		}else{
			return '/hybrid/html/index.html?map_searchdata='+this.map_data+"&token_data="+this.token+"&dutyOp="+this.dutyOp
		}
	}
},

html接收：

//取url中的参数值
function getQuery(name) {
	// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
	let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	let r = window.location.search.substr(1).match(reg);
	if(r != null) {
	    // 对参数值进行解码
        return decodeURIComponent(r[2]);
	}
	return null;
}
getQuery('map_searchdata')