[TOC] Web View支持本机设备中的Web应用程序。Ionic维护了一个集成了应用程序的[Web View插件](https://github.com/ionic-team/cordova-plugin-ionic-webview)[cordova](https://ionicframework.com/docs/faq/glossary#cordova)。使用Ionic CLI时，默认情况下会提供该插件。适用于集成的应用[capacitor](https://ionicframework.com/docs/faq/glossary#capacitor)，Web视图自动提供。 ## 什么是Web视图？ ionic应用程序是使用[网络技术](https://ionicframework.com/docs/faq/glossary#web-standards)并使用Web视图进行渲染，这是一个全屏和全功能的Web浏览器。 现代Web视图为诸如摄像头，传感器，GPS，扬声器和蓝牙等硬件功能提供了许多内置的[HTML5 API](https://whatwebcando.today/)，但有时也可能需要访问特定于平台的硬件API。在Ionic应用程序中，可以通过桥接层访问硬件API，通常使用公开JavaScript API的本机插件。 Ionic Web View插件专门用于现代JavaScript应用程序。对于iOS和Android，应用程序文件始终使用`http://`协议托管，并在本地设备上运行优化的HTTP服务器。 ### CORS Web视图强制执行[CORS](https://ionicframework.com/docs/faq/glossary#cors)因此，外部服务正确处理跨源请求非常重要。有关更多详细信息，请参阅[enable-cors.org](https://enable-cors.org/)和[MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)。 如果服务器上没有实现CORS，则存在[一个原生插件](https://ionicframework.com/docs/native/http/)在本机层中执行绕过CORS的HTTP请求。 #### 服务器清单 许多Web框架可能支持内置的CORS或作为官方附加组件，例如[`cors`](https://github.com/expressjs/cors)Express的软件包。如果这不是一个选项，则必须为CORS实现以下内容： 1. 允许`http://localhost:8080`作为起源（见[`Access-Control-Allow-Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)） 2. 允许任何必要的HTTP方法（请参阅[`Access-Control-Allow-Methods`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods)） 3. 允许任何必要的HTTP标头（请参阅[`Access-Control-Allow-Headers`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers)） 4. 确保服务器可以处理[预检请求](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) ### 文件协议 Cordova和Capacitor应用程序托管在本地HTTP服务器上，并随`http://`协议一起提供。但是，某些插件会尝试通过`file://`协议访问设备文件。为避免`http://`和之间的困难`file://`，必须重写设备文件的路径以使用本地HTTP服务器。例如，`file:///path/to/device/file`必须`http://<host>:<port>/<prefix>/path/to/device/file`在应用程序中呈现之前重写。 对于Cordova应用程序，[Ionic Web View插件](https://github.com/ionic-team/cordova-plugin-ionic-webview)提供了用于转换文件URI的实用程序功能：`window.Ionic.WebView.convertFileSrc()`。还有一个相应的Ionic Native插件：[`@ionic-native/ionic-webview`](https://ionicframework.com/docs/native/ionic-webview/)。 对于Capacitor应用程序，文件URI会自动转换。 ### 实现 * **iOS**：[WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) * **Android**：[适用于Android的Web视图](https://developer.chrome.com/multidevice/webview/overview)