new-88live/pages/common/webview.vue

<template>

	<view class="wv-page">

		<view class="art-nav wv-nav" :style="{ paddingTop: statusBar + 'px' }">

			<view class="art-nav-row">

				<view class="wv-back" @tap="closePage">
					<text class="wv-back-icon">←</text>
				</view>

				<text class="art-nav-title">{{ navTitle }}</text>

				<view class="wv-home" @tap="goHome">
					<image class="wv-home-icon" src="/static/icon/icon-home.png" mode="aspectFit" />
				</view>


			</view>

		</view>



		<web-view v-if="pageUrl" class="wv-frame" :style="{ height: webViewHeight + 'px' }" :webview-styles="webviewStyles"
			:src="pageUrl" />



		<view v-if="!pageUrl" class="wv-empty" :style="{ height: webViewHeight + 'px' }">

			<text class="wv-empty-text">{{ copy.invalidLink }}</text>

		</view>

	</view>

</template>



<script>

export default {

	data() {

		return {

			statusBar: 0,

			navTop: 0,

			webViewHeight: 600,

			navTitle: '',

			pageUrl: '',

			webviewStyles: {

				progress: {

					color: '#4a8cff'

				}

			}

		}

	},

	computed: {

		copy() {

			const t = this.$t.bind(this)

			return {
				invalidLink: t('common.invalidLink'),
				defaultTitle: t('common.webViewTitle')
			}

		}

	},

	onLoad(option) {

		const sys = uni.getSystemInfoSync()

		this.statusBar = sys.statusBarHeight || 0

		const navBarInner = uni.upx2px(88)

		this.navTop = this.statusBar + navBarInner

		this.webViewHeight = (sys.windowHeight || 667) - this.navTop



		let title = option.title || ''

		try {

			title = decodeURIComponent(title)

		} catch (_) { }

		this.navTitle = title || this.copy.defaultTitle



		this.webviewStyles = {

			progress: {

				color: '#4a8cff'

			},
			hideCallback: null,
			top: `${this.navTop}px`,

			height: `${this.webViewHeight}px`

		}



		const rawUrl = option.url ? decodeURIComponent(option.url) : ''

		this.pageUrl = this.normalizeUrl(rawUrl)

	},

	onReady() {

		// #ifdef APP-PLUS

		if (this.pageUrl) {

			this.adjustAppWebviewLayout()
			this.injectHideScript()
		}

		// #endif

	},

	methods: {
		// 注入隐藏广告的脚本
		injectHideScript() {
			const currentWebview = this.$scope.$getAppWebview()
			const webview = currentWebview.children()[0]
			if (!webview) return

			webview.removeEventListener('loaded', this.hideCallback)

			this.hideCallback = function () {
				const currentUrl = webview.getURL()
				if (currentUrl) {
					const jsCode = `
                (function() {
                    var banner = document.querySelector('.float-banner-con');
                    if (banner) banner.style.display = 'none';
                    var overlay = document.querySelector('.mask, .overlay, .popup-mask');
                    if (overlay) overlay.style.display = 'none';
                })();
            `
					webview.evalJS(jsCode)
				}
			}

			webview.addEventListener('loaded', this.hideCallback)
		},

		normalizeUrl(raw) {

			const url = String(raw || '').trim()

			if (!url) return ''

			if (/^https?:\/\//i.test(url)) return url

			if (url.startsWith('//')) return `https:${url}`

			return ''

		},

		adjustAppWebviewLayout(retry = 0) {

			// #ifdef APP-PLUS

			const pages = getCurrentPages()

			const page = pages[pages.length - 1]

			if (!page || !page.$getAppWebview) return



			const currentWebview = page.$getAppWebview()

			const apply = () => {

				const children = currentWebview.children()

				if (!children || !children.length) {

					if (retry < 10) {

						setTimeout(() => this.adjustAppWebviewLayout(retry + 1), 200)

					}

					return

				}

				const wv = children[0]

				wv.setStyle({

					top: `${this.navTop}px`,

					height: `${this.webViewHeight}px`,

					bottom: 'auto'

				})

			}

			setTimeout(apply, retry === 0 ? 300 : 0)

			// #endif

		},

		closePage() {
			const pages = getCurrentPages()
			if (pages.length > 1) {
				uni.navigateBack({ delta: 1 })
				return
			}
			this.goHome()
		},
		goHome() {
			uni.switchTab({
				url: '/pages/index/index',
				fail: () => uni.reLaunch({ url: '/pages/index/index' })
			})
		}

	}

}

</script>



<style scoped>
@import '../article/article-shared.css';



.wv-page {

	min-height: 100vh;

	background-color: #ffffff;

}



.wv-nav {
	position: relative;
	z-index: 999;
}

.wv-back {
	min-width: 88rpx;
	height: 88rpx;
	margin-left: -12rpx;
	padding: 0 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.wv-back-icon {
	font-size: 52rpx;
	font-weight: 600;
	color: #1a1d26;
	line-height: 1;
}

.wv-home {
	min-width: 88rpx;
	height: 88rpx;
	margin-right: -12rpx;
	padding: 0 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.wv-home-icon {
	width: 48rpx;
	height: 48rpx;
}

.wv-frame {

	width: 100%;

}



.wv-empty {

	display: flex;

	align-items: center;

	justify-content: center;

}



.wv-empty-text {

	font-size: 28rpx;

	color: #8a8d9e;

}
</style>