admin管理员组文章数量:1516870
一、说明
场景：鸿蒙开发无法内嵌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 字符串，这有助于模拟特定浏览器环境。
版权声明：本文标题：OpenHarmony下WebView加载HTTPS页面的技术秘诀 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1771529041a3266551.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论