web-view

Webview 是一個基于webkit引擎，可以解析DOM 元素，展示html頁面的控件，它和瀏覽器展示頁面的原理是相同的，所以可以把它當(dāng)做瀏覽器看待。（chrome瀏覽器也是基于webkit引擎開發(fā)的，Mozilla瀏覽器是基于Gecko引擎開發(fā)的）

開發(fā)過小程序的話對這個標(biāo)簽應(yīng)該比較熟悉，web-view標(biāo)簽與iframe標(biāo)簽類似，可以在我們的頁面中渲染第三方頁面

web-view標(biāo)簽的使用

與iframe標(biāo)簽類似

<iframe src="URL路徑"></iframe>

web-view:

<web-view src="URL路徑"></web-view>

web-view與iframe的區(qū)別

web-view標(biāo)簽?zāi)J(rèn)是占滿屏幕的且不能使用CSS改變樣式（例如在CSS設(shè)置height或者width），甚至web-view的層級是最高的，也就是說不能有元素可以顯示在web-view上

iframe標(biāo)簽則可以通過CSS設(shè)置寬或者高，我們可以將其他元素顯示在iframe標(biāo)簽上，例如（懸浮框組件）

設(shè)置web-view的高度

<template>
	<view class="content">
		<web-view src="https://www.baidu.com"></web-view>
		<view class="header">
			<text style="font-size: 40rpx;">標(biāo)題</text>
			<u-icon name="share" size="40"></u-icon>
		</view>
	</view>
</template>

<script>
	var wv;
	export default {
		data() {
			return {
				
			}
		},
		onReady() {
		   var self = this;
		   var currentWebview = this.$scope.$getAppWebview();
		   setTimeout(function() {
			let h=720,top=70;
		    wv = currentWebview.children()[0]
			uni.getSystemInfo({//獲取設(shè)備信息
			    success: function (res) {
					h=res.windowHeight-top;
			    }
			});
		    wv.setStyle({//設(shè)置web-view高度與web-view跟設(shè)備頂部的距離
		     top:top,
			 height:h,
		    })
		   }, 1000); //如果是頁面初始化調(diào)用時，需要延時一下
		}
	}
</script>

<style lang="less" scoped>
.header{
		padding: 20rpx;
		box-sizing: border-box;
		width: 100vw;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
}
</style>

獲取當(dāng)前web-view的URL

<template>
	<view class="content">
		<web-view src="https://www.baidu.com"></web-view>
		<view class="header">
			<text style="font-size: 40rpx;">標(biāo)題</text>
			<u-icon name="share" size="40" @click="show"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onReady() {
		  
		},
		methods:{
			show(){
				var pages = getCurrentPages();  
				var page = pages[pages.length - 1];  
				var currentWebview = page.$getAppWebview();  
				console.log(currentWebview.children()[0].getURL());//獲取當(dāng)前web-view的URL
			}
		}
	}
</script>

<style lang="less" scoped>
.header{
		padding: 20rpx;
		box-sizing: border-box;
		width: 100vw;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
}
</style>