【uniapp】关于webview组件无法自定义宽高问题解决

最近做的项目中，在h5环境运行上遇到关于webview组件无法自定义宽高问题，要怎么弄才好呢，其实没那么难，很简单的，现在将解决方法讲一下。

使用例子

默认是全屏加载的，现在需要内嵌一个webview组件放在限定区域内，就要自定义宽高，模板布局大致如下

<template>
	<view class="content">
		<view class="" style="width: 100%;height: 50vh;">
			<web-view src="htt...om" class="webview" :fullscreen="false" :webview-styles="webviewStyles"></web-view>
		</view>
		<!-- other layout -->
	</view>
</template>
<script>
export default{
	data(){
		webviewStyles:{
			height:'100%,
		},
		//...
	},
	//...
}
</script>

取消全屏

按照uniapp官网文档上说明，修改其属性fullscreen=false取消全屏后，可自定义宽高，
然后，发现其设置的属性webview-styles是无效的，

无论怎么修改，都是不起作用，不是说支持H5么，又找到一个bug

解决方法

方法一：通过类设置样式（无效）

<template>
	<!-- ... -->
		<web-view src="htt..." class="webview" :fullscreen="false"></web-view>
	<!-- ... -->
</template>
<style lang="scss">
	.webview{
		width: 100%;
		height: 100%;
	}
</style>

方法二：修改其属性（无效）

<template>
	<!-- ... -->
	<web-view src="htt..." class="webview" :fullscreen="false" webview-styles="height:100%"></web-view>
	<!-- ... -->
</template>

经过一段时间调试，换了其它的方式，找到一个有效的方法，

方法三：设置内联样式（有效）

<template>
	<!-- ... -->
	<web-view src="htt..." class="webview" :fullscreen="false" :style="height:100%"></web-view>
	<!-- ... -->
</template>

也可以改成这样

<template>
	<view class="content">
		<view class="" style="width: 100%;height: 50vh;">
			<web-view src="htt...om" class="webview" :fullscreen="false" :style="webviewStyles"></web-view>
		</view>
		<!-- other layout -->
	</view>
</template>
<script>
	//...
</script>

真的是万变不离其宗，要有自己的主见，不要总被官方文档牵着鼻子走。

跨平台开发，统一之路艰辛，要考虑很多细节，但H5的基础知识还是要牢记的。