一、说明

场景：鸿蒙开发无法内嵌http，因系统安全限制显示“设置需要显示网页的地址，网址的域名必须为https协议且经过ICP备案”。

二、理解

虽然不能直接嵌入http页面，但可以通过组件绕过安全限制。WebView是OpenHarmony提供的用于在应用内部显示网页的一个组件。它支持加载HTML页面，并且可以与JavaScript进行交互。

三、实现

配置WebView，创建一个UI组件来加载HTTPS网页。在OpenHarmony中，我们可以使用Ability SDK来定义UI组件，并使用类似JavaScript的语法来描述UI和组件的行为。创建一个新的文件 WebComponent.js 并编写如下代码： 

import web webview from'@ohos.web.webview';// 标记为应用的入口点
@Entry
// 标记为UI组件
@Component
struct WebComponent extendsWebViewController{// 创建WebViewController实例
    WebViewController webviewController =newWebViewController();// 定义状态变量
    @State
    mode: MixedMode = MixedMode.Compatible;// 构建方法build(){returnColumn({children:[Web({src:"",// 使用HTTP协议的URLcontroller:this.webviewController
                }).mixedMode(MixedMode.All).domStorageAccess(true).onControllerAttached(()=>{this.webviewController.setCustomUserAgent("Mozilla/5.0 (phone; Android; 0penarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.8.8.8 Safari/537.36");})]});}}

解析代码

  • 导入模块：从 @ohos.web.webview 模块导入 webview。
  • 定义组件：使用 @Entry 装饰器表示这个组件是应用程序的入口点， @Component 装饰器表示这是一个 UI 组件，并继承自 WebViewController 类。
  • 创建实例：创建 WebViewController 的实例，用于控制WebView的行为。
  • 定义状态： @State 装饰器表示 mode 是组件的状态之一。MixedMode 是一个枚举类型，用于指定如何处理混合内容（即 HTTP 和 HTTPS 内容混合）。MixedMode.Compatible 表示使用兼容模式，这通常意味着允许加载非安全的内容。
  • 构建方法： build() 方法返回 UI 的布局结构。
  • Column 是一个垂直排列的容器，这里只包含一个 Web 组件。
  • Web 组件表示一个 WebView，它可以加载并显示网页。
  • src 属性指定了要加载的网页的 URL。
  • controller 属性关联了前面创建的 WebViewController 实例。
  • .mixedMode(MixedMode.All) 设置混合内容模式为 All，这意味着允许所有类型的混合内容加载。
  • .domStorageAccess(true) 允许使用 DOM 存储功能。
  • .onControllerAttached() 是一个回调函数，在 Web 控制器附加到 WebView 时触发。
  • 通过调用 setCustomUserAgent 方法设置了自定义的 User-Agent 字符串，这有助于模拟特定浏览器环境。