效果圖：

web-view是承載網頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用。

再看下面一個提示：
每個頁面只能有一個 web-view，web-view 會自動鋪滿整個頁面，并覆蓋其他組件。
也就是說，小程序中使用web-view打開網頁，在頁面上寫的其它組件會直接被網頁給覆蓋住

需求：在web-view頁面添加彈窗

剛好有一個組件cover-view可以覆蓋web-view

cover-view覆蓋在原生組件上的文本視圖。

app-vue和小程序框架，渲染引擎是webview的。但為了優(yōu)化體驗，部分組件如map、video、textarea、canvas通過原生控件實現，原生組件層級高于前端組件（類似flash層級高于div）。為了能正常覆蓋原生組件，設計了cover-view。

cover-view功能描述：

可覆蓋的原生組件包括 map、video、canvas、camera、live-player、live-pusher、web-view

cover-view只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)。

也就是在cover-view中只能使用cover-view、cover-image、button三個組件

代碼示例：

注意：checkbox按鈕是圖片代替的，因為不能使用checkbox組件文章來源地址http://www.zghlxwxcb.cn/news/detail-768262.html

<template>
	<view>
		<web-view :src="url">
			<cover-view class="my-cover" v-if="coverIsShow">
				<cover-view class="cover-box">
					<cover-view class="des">
						<cover-view class="des-text1">本服務將由{{corporateName}}提供，南洋商業(yè)銀行（中國）將在您辦理以下業(yè)務時將您的對應信息提供給該公司用于下述目的：</cover-view>
						<cover-view class="des-text">購買商品</cover-view>
						<cover-view class="des-text">手機號碼：用于識別客戶及查詢訂單</cover-view>
						<cover-view class="des-text1">{{corporateName}}服務熱線{{phoneNum}}，相關商品和服務（包括售后）均由該公司負責。</cover-view>
					</cover-view>
					<cover-view class="nav-select">
						<cover-view class="select-item" @click="checkBoxBtn">
							<cover-image @click="checkAllGouBox" class="image" src="@/static/applyAccont/check.png" v-if="chackBoxIsShow"></cover-image>
							<cover-image @click="checkAllGouBox" class="image" src="@/static/applyAccont/uncheck.png" v-else></cover-image>
							<cover-view>我已閱讀并同意</cover-view>
						</cover-view>
						<cover-view class="nav-privacy" @click="userPrivacy">《用戶協(xié)議》</cover-view>
						<cover-view>和</cover-view>
						<cover-view class="nav-privacy" @click="agreePrivacy">《隱私協(xié)議》</cover-view>
					</cover-view>
					<cover-view class="btns">
						<button class="reject" @click="goBack">不同意授權</button>
						<button type="primary" class="agree" @click="confirm">已知悉，同意授權</button>
						<!-- <button type="primary" class="agree" @click="confirm" :disabled="!chackBoxIsShow">已知悉，同意授權</button> -->
					</cover-view>
				</cover-view>
			</cover-view>
		</web-view>
	</view>
</template>

<script>
	import apiUrl from '@/utils/commonUrl.js';
	export default {
		data() {
			return {
				url: '',
				corporateName:'上海xxx科技有限公司',
				phoneNum: '999999999',
				coverIsShow: false,
				chackBoxIsShow: false,
			};
		},
		onLoad() {
			this.url = apiUrl.baseUrl+ "&t=" + new Date().getTime()
		},
		methods: {
			},
			// 復選框點擊
			checkBoxBtn(){
				this.chackBoxIsShow = !this.chackBoxIsShow;
			},
			// 取消返回
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			// 確認協(xié)議
			confirm(){
				this.$store.commit('SET_BEILIANPROVICY', '1');
				this.coverIsShow = false
			},
			// 用戶協(xié)議
			userPrivacy(){
				uni.navigateTo({
					url:'/pages/home/beiLiAnUser'
				})
			},
			// 隱私協(xié)議
			agreePrivacy(){
				uni.navigateTo({
					url:'/pages/home/beiLiAnPrivacy'
				})
			}
		}
	}
</script>

<style lang="scss">
.my-cover{
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 100;
	 background-color: rgba(0,0,0,.3);
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 z-index: 99999;
	
	.cover-box{
		width: 636rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.des {
			font-size: 26rpx;
			margin-top: 40rpx;
			width: 560rpx;
			
			.des-text{
				width: 560rpx;
				color: #666;
				line-height: 48rpx;
				white-space: pre-wrap;
				text-indent: 2em;
				word-break:break-all;
			}
			
			.des-text1{
				width: 560rpx;
				white-space:pre-wrap;
				line-height: 48rpx;
				color: #333;
				font-weight: bold;
				text-indent: 2em;
				word-break:break-all;
			}
		}
		
		.nav-select{
			margin-top: 28rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			font-size: 26rpx;
			display: flex;
			
			.select-item{
				display: flex;
				
				.image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
			}
			
			.nav-privacy{
				color: #1989FF;
			}
		}
		
		.btns {
			margin-top: 32rpx;
			margin-bottom: 0;
			display: flex;
			
			.reject {
				color: #333;
				font-size: 28rpx;
				background: #fff;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				width: 320rpx;
				border-top: 2rpx solid #eee;
			}
			
			.agree {
				color: #1989ff;
				font-size: 28rpx;
				background: #fff;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				width: 320rpx;
				border-top: 2rpx solid #eee;
				margin-left: -2rpx;
			}
			
			:deep(button[disabled][type=primary]) {
				color: #8cc4fd !important;
				border-radius: 0!important;
			}
			button {
				border-radius: 0!important;
			}
		}
	}	
}
</style>

到了這里，關于uniapp小程序中給web-view頁面添加授權彈窗（使用cover-view組件覆蓋實現該功能）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！