移动端Web页面展示组件 - Vue.js实现 - 常规

该代码是一个Vue组件，用于在移动端展示一个Web页面。主要逻辑是通过创建一个Webview对象，在其中加载Web页面，并监听定时器和返回键等事件。其中，定时器用于定期获取新的Token并创建新的Webview，返回键用于在退出组件时清空缓存和关闭Webview。此外，还定义了一些方法，如清空缓存、创建Webview等。整个组件的布局采用Flex布局，使得Webview可以铺满整个屏幕。

代码示例：

<template>
	<view class='content' style='display: flex;align-items: center;justify-content: center;'>
		<!-- <web-view @longtap='longTapTab' src='http://dcim.hxyt.net/'></web-view> -->
	</view>
</template>

<script>
	import {
		isNotEmpty,
		checkDialog
	} from '../../common/util.js'
	var wv;
	export default {
		data() {
			return {
				// 定时获取token
				timer: null,
				currentTime: null
			}
		},
		// 监听返回键
		onBackPress() {
			uni.setStorageSync('firstFlag', false)
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/login'
				})
			}, 300)
		},
		onLoad() {
			// 强制横屏
			plus.screen.lockOrientation('landscape-primary');
		},
		mounted() {
			this.createWebView();
			let tokenSetTime = Number.parseInt(uni.getStorageSync('tokenSetTime')) * 1000
			setTimeout(() => {
				this.createWebView();
			}, tokenSetTime)
			let clearCacheTime = Number.parseInt(uni.getStorageSync('clearCacheTime')) * 1000
			// 关闭web-view清空缓存定时器
			this.timer = setInterval(() => {
				uni.setStorageSync('clearCacheFlag', true)
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login'
					})
				}, 300)
			}, clearCacheTime)
		},
		watch: {
			// add new watch function to monitor currentTime property
			currentTime: function(newTime) {
				console.log(newTime);
				if (newTime.getHours() === 9 && newTime.getMinutes() === 27) {
					wv.close();
					this.createWebView();
				}
				}
			}
		},
		methods: {
			loginRound() {
				uni.request({
					url: 'http://' + uni.getStorageSync('ip') + ':' + uni.getStorageSync('gatewayPort') +
						'/api/sso-service/sso/login',
					method: 'POST',
					data: {
						'clientId': 'ycEDNFKtLSND9d7W',
						'secret': 'admin.intx',
						'username': uni.getStorageSync('userName'),
						'password': uni.getStorageSync('userPwd')
					},
					success: res => {
						if (res.data.code == 0) {
							uni.setStorageSync('token', res.data.data.accessToken)
							uni.setStorageSync('refreshToken', res.data.data.refreshToken)
							// 创建新token的webview
							this.createWebView();
						}
					},
					fail: res => {
						uni.reLaunch({
							url: '/pages/login'
						}) //要用这个才可以
						checkDialog('网络异常！请重新登录！', 'none', 2000)
					}
				})
			},
			// 创建webview
			createWebView() {
				if (isNotEmpty(wv)) {
					wv.close()
				}
				wv = plus.webview.create('', 'custom-webview', {})
				wv.evalJS(`document.cookie='token=${uni.getStorageSync('token')};path=/'`)
				wv.evalJS(`document.cookie='refreshToken=${uni.getStorageSync('refreshToken')};path=/'`)
				wv.loadURL('http://' + uni.getStorageSync('ip') + ':' + uni.getStorageSync('webPort'))
				//此对象相当于html5plus里的plus.webview.currentWebview()。
				// 在uni-app里vue页面直接使用plus.webview.currentWebview()无效，
				// 非v3编译模式使用this.$mp.page.$getAppWebview()
				wv.addEventListener('error', function(e) {
					checkDialog('页面请求失败，请检验输入是否正确！', 'none', 2000)
					uni.reLaunch({
						url: '/pages/login'
					})
				}, false);
				wv.addEventListener('loading', () => {
					plus.nativeUI.showWaiting('加载中...')
					// console.log('loading')
				}, false);
				wv.addEventListener('loaded', () => {
					plus.nativeUI.closeWaiting();
					// console.log('loaded')
				}, false);
				var currentWebview = this.$scope
					.$getAppWebview();
				currentWebview.append(wv)

				//如果是页面初始化调用时，需要延时一下
				setTimeout(function() {
					let web = currentWebview.children()[0];
					web.setStyle({
						// 全屏铺开
						videoFullscreen: 'landscape',
					});
				}, 1000);
				// console.log(wv.getURL())
				// wv.evalJS('console.log(document.cookie)')
			},
			// 清空缓存
			clearCache() {
				let that = this;
				let os = plus.os.name;
				if (os == 'Android') {
					let main = plus.android.runtimeMainActivity();
					let sdRoot = main.getCacheDir();
					let files = plus.android.invoke(sdRoot, 'listFiles');
					let len = files.length;
					for (let i = 0; i < len; i++) {
						let filePath = '' + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径  
						plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
							if (entry.isDirectory) {
								entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录  
									uni.showToast({
										title: '缓存清理完成',
										duration: 2000
									});
									that.formatSize(); // 重新计算缓存  
								}, function(e) {
									console.log(e.message)
								});
							} else {
								entry.remove();
							}
						}, function(e) {
							console.log('文件路径读取失败')
						});
					}
				} else { // ios  
					plus.cache.clear(function() {
						uni.showToast({
							title: '缓存清理完成',
							duration: 2000
						});
						that.formatSize();
					});
				}
			},
		},
		destroyed() {
			this.clearCache()
			clearInterval(this.timer)
			this.timer = null
			wv.close();
		}
	}
</script>

<style>
	.content {
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}
</style>

该组件使用了以下技术：

Vue.js: 构建用户界面和组件
Webview: 加载网页
uni-app: 提供跨平台开发框架
plus.webview: 用于创建和管理Webview对象
uni.request: 发送HTTP请求
uni.setStorageSync: 存储数据
plus.screen: 屏幕操作
uni.showToast: 显示提示信息
Flex布局: 实现页面布局

该组件主要用于展示一个Web页面，并提供了一些额外的功能，例如定时刷新、缓存清理等。该组件可以根据不同的需求进行修改和扩展。

注意：

该组件需要在uni-app环境下使用。
组件中的代码需要根据实际情况进行调整。