ios开发加载webview显示进度条实例

很多APP加载webView页面的时候都有进度条显示，今天我们这里主要使用相对轻量级的WKWebView加载网页，至于WKWebView 和UIWebView的区别与联系这里就不多讲了，自己百度哈哈。。。 WKWebView加载网页进度跳显示主要效果如下： 这里主要是使用KVO监听WKWebView的“estimatedProgress”属性，通过监听该属性的变化才是进度条的长度。 1、定义便利构造函数、以及属性和控件 var url: String? var progresslayer = CALayer() var webView: WKWebView? var but 在iOS开发中，为了提供更好的用户体验，经常会在加载WebView时添加进度条来显示网页加载进度。本实例将介绍如何在iOS应用中使用WKWebView显示加载进度条。WKWebView是Apple推荐用于加载网页内容的组件，相比旧版的UIWebView，它提供了更好的性能和内存管理。 我们需要了解WKWebView的基本用法。WKWebView继承自UIView，可以像处理其他视图一样进行布局和操作。创建WKWebView时，需要指定其frame和加载的URL。在本例中，我们创建一个WKWebView并设置其frame为全屏减去导航栏的高度，然后通过URLRequest加载指定URL的网页。 接下来，我们关注如何实现进度条的功能。这需要用到Key-Value Observing（KVO）来监听WKWebView的`estimatedProgress`属性。这个属性表示当前网页加载进度，范围在0到1之间。当网页开始加载时，estimatedProgress会从0逐渐增加，直到1，表示网页完全加载完毕。 在`setupUI`方法中，我们首先创建了一个WKWebView实例，加载请求并设置了其代理。然后，我们创建了一个CALayer实例作为进度条，设置了初始宽度为屏幕宽度的10%，高度为3像素，并将其背景颜色设为绿色。进度条被添加为视图的子层，这样就可以在屏幕上看到它。 为了实时更新进度条，我们需要重写`observeValue(forKeyPath:of:change:context:)`方法。当estimatedProgress改变时，我们会更新进度条的宽度，使其与当前的加载进度成比例。当网页加载完成（estimatedProgress等于1）时，为了让进度条有一个渐隐的效果，我们使用GCD（Grand Central Dispatch）延迟执行两个异步任务，分别用来降低进度条的不透明度和将进度条宽度置零。 在实际项目中，我们还需要处理网络错误或加载失败的情况。在给出的部分代码中，扩展了KKWebVie，可能包含处理加载失败的方法。通常，我们需要实现WKNavigationDelegate中的`webView(_:didFail:withError:)`方法，当网页加载失败时，向用户展示错误提示或者执行相应的错误处理逻辑。 总结起来，这个实例展示了在iOS应用中使用WKWebView加载网页并显示进度条的完整过程，包括WKWebView的创建、加载请求、KVO监听网页加载进度以及处理加载失败情况。这种做法可以提升用户体验，让用户知道网页正在加载，特别是在网络状况不佳时。通过理解和实践这样的代码，开发者可以更好地掌握WKWebView的使用，以及如何在iOS应用中实现更高级的交互效果。