UNI-APP中webview加载状态，开始加载，加载完成事件监听

约定不等于承诺〃 2023-01-13 04:15 1379阅读 0赞

目的：

当UNI-APP中的webvew处于正在加载页面状态时，显示不确定进度框

方法：

//获取webview页面	
    var currentWebview = this.$mp.page.$getAppWebview().children()[4];
     
    //加载时候 loading
    			plus.nativeUI.showWaiting()
    //监听加载完毕  关闭loading
    			currentWebview.addEventListener('loaded', function() {
    				plus.nativeUI.closeWaiting();
    			}, false);

onclose: Webview窗口关闭事件  
onerror: Webview窗口错误事件  
onloaded: Webview窗口页面加载完成事件  
onloading: Webview窗口页面开始加载事件

示例代码：

<template>
    	<view>
    		
    	</view>
    </template>
    
    <script>
    	//将要创建的webview对象
    	var wv;
    	
    	export default {
    		data() {
    			return {
    				windowInfo: null
    			}
    		},
    		props: {
    			devinfo: {
    				type: Object,
    				default: function(){
    					return {};
    				}
    			},
    			cmuid: {
    				type: Number,
    				default: 0
    			}
    		},
    		mounted() {
    			uni.getSystemInfo({
    			    success: (res)=> {
    					this.windowInfo = res;
    					//this.createWvAndLoadUrl('https://uniapp.dcloud.io/static/web-view.html');
    					//this.createWvAndLoadUrl('http://www.baidu.com');
    					this.createWvAndLoadUrl(this.getConfigPageUrl());
    			    }
    			});
    		},
    		beforeDestroy() {
    			//关闭webview对象
    			if(wv){
    				wv.close()
    				//wv.hide()
    			}
    		},
    		methods: {
    			/*创建web-view并加载url*/
    			createWvAndLoadUrl(url){
    				// #ifdef APP-PLUS
    				wv = plus.webview.create(url,"webview",{
    					plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
    					top: this.windowInfo.statusBarHeight + 126, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
    					scalable: true,
    					height: this.windowInfo.windowHeight - this.windowInfo.statusBarHeight - 126
    				})
    				
    				wv.addEventListener('loading', () => {
    					//plus.nativeUI.showWaiting()
    					this.api.showComLoading()
    				}, false);
    				//plus.nativeUI.showWaiting()
    				//this.api.showComLoading()
    				wv.addEventListener('loaded', () => {
    					//plus.nativeUI.closeWaiting();
    					this.api.hideComLoading()
    				}, false);
    				
    				//wv.loadURL(url)
    				var currentWebview = this.$parent.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
    				currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
    				setTimeout(function() {
    					console.log(wv.getStyle())
    				}, 1000);//如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
    				// #endif 
    			},
    			/*获取组态页面url*/
    			getConfigPageUrl(){
    				let configView = {
    					'cmuid': this.cmuid,
    					'adaptorCode': this.devinfo.adapterCode,
    					'typeId': this.devinfo.type,
    					'id': this.devinfo.id,
    					'refreshtime': 5,
    					'jkxq_custom': 1
    				}
    				return this.api.configView(configView);
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    
    </style>

完！！！