【HarmonyOS NEXT】鸿蒙web原生组件在加载页面前，调用webcontroller中的方法的机制

已于 2024-05-16 20:01:34 修改
阅读量112 收藏
点赞数 1
文章标签： harmonyos
于 2024-05-14 20:14:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mayism123/article/details/138868408
版权

【关键字】

web组件 / webcontroller / 调用 / webInited

【问题描述】

想要使用webcontroller前必须要监听web_webview的webInited事件，如果在此事件之前调用webcontroller中的方法，则会爆出运行时异常，其内容为该webcontroller必须初始化后才可使用。

又因为web组件和webcontroller是1:1的关系。所以自然而然认为web_webview的webInited事件也应当与web组件是1:1的关系。

现在的场景是应用的主页有一个tabbar视图，里面有四个tab页，每个tab上都有一个web组件。发现即使每个web组件里都去监听了web_webview的webInited事件，但事件仅回调了一次，导致首页上仅一个web能够正确初始化，因为在webInited事件中，调用了webcontroller对web组件进行了属性设置。如果不在该事件中处理，则会报前面提到的运行时异常。

还发现当打开二级页面，也就是再打开一个entry时，webInited事件才会再次触发，即webInited事件是页面级事件，并非跟着web组件走而是跟着页面走的。

所以个人排查的结论是web_webview webInited事件其内部并没有做成队列结构，而是多次注册只响应最后一次，因此在这种场景下，只回调一次实际上是经过四次init事件覆盖后，仅最后一个web的事件回来了而已。

请问这个状态是设计如此？还是设计缺陷？

【解决方案】

如果需要在web页面加载前，调用webcontroller中的方法，可以使用onPageBegin或使用onControllerAttached回调。

onPageBegin文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web-0000001860247877#ZH-CN_TOPIC_0000001860247877__onpagebegin

onControllerAttached文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web-0000001860247877#ZH-CN_TOPIC_0000001860247877__oncontrollerattached10

Mayism123
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 11万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速 入门鸿蒙开发教程
02-11
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程；开发工具下载 HarmonyOS官网 → 一探究竟 → DevEco Studio 下载 地址：https://developer.huawei.com/consumer/cn/； ArkTS...
HarmonyOS鸿蒙应用开发——原生与H5通信框架DSBrigde-HarmonyOS
学习，思考，输出
01-09 2392
HarmonyOS版的DSBridge，通过本库可以在鸿蒙原生与JavaScript完成交互，相互调用彼此的功能。目前兼容Android、iOS第三方DSBridge库的核心功能，基本保持原来的使用方式，可以放心接入到项目中，后续会持续迭代保持与Android库相同的功能，减少前端和客户端的适配工作。支持以类的方式集中统一管理API；支持同步和异步调用；支持进度回调/回传：一次调用，多次返回；支持API是否存在的测试 (当前仅支持检测原生API，在调用call()方法时会自检测)
HarmonyOS ArkUI实战开发-网页加载（Web）
1
04-22 393
使用Web组件时，需要传递一个WebOptions类型的参数，WebOptionssrc：待加载的网页资源地址。controller：页面控制器，主要控制Web组件各种行为，一个对象只能控制一个Web组件，且必须在Web组件和绑定后，才能调用上的方法。// Web控制器build() {Web({src: "https://www.arkui.club", // 默认加载 www.arkui.club 网址})// 省略部分方法。
HarmonyOS NEXT应用开发之Web获取相机拍照图片案例
2401_83048197的博客
04-25 872
本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。
HarmonyOS Next 使用ArkWeb同层渲染案例_arkweb现在在鸿蒙中还在使用吗(4)
2401_84159813的博客
04-20 809
该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提升用户体验的流畅度。
HarmonyOS Next 使用ArkWeb同层渲染案例_arkweb现在在鸿蒙中还在使用吗(1)
2401_84159813的博客
04-20 740
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。// 性能知识点：此处componentId项确定且数量较少，使用了ForEach，在数据量多的情况下，推荐使用LazyForeEach。// 原生Grid组件，Grid中包含Image和Text。
HarmonyOS Next 使用ArkWeb同层渲染案例_arkweb现在在鸿蒙中还在使用吗(7)
2401_84159813的博客
04-20 939
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。// 性能知识点：此处componentId项确定且数量较少，使用了ForEach，在数据量多的情况下，推荐使用LazyForeEach。// 原生Grid组件，Grid中包含Image和Text。
HarmonyOS Next 使用ArkWeb同层渲染案例_arkweb现在在鸿蒙中还在使用吗(3)
2401_84159813的博客
04-20 570
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。.columnsGap($r(‘app.string.ohos_id_elements_margin_vertical_m’)) // 列间距。// 原生Grid组件，Grid中包含Image和Text。
HarmonyOS Next 使用ArkWeb同层渲染案例_arkweb现在在鸿蒙中还在使用吗(6)
2401_84159813的博客
04-20 692
columnsGap($r(‘app.string.ohos_id_elements_margin_vertical_m’)) // 列间距。// 性能知识点：此处componentId项确定且数量较少，使用了ForEach，在数据量多的情况下，推荐使用LazyForeEach。r(‘app.string.ohos_id_elements_margin_vertical_m’)) // 行间距。// 原生Grid组件，Grid中包含Image和Text。// 原生Search组件。// 不允许执行缩放。
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
HarmonyOS应用开发者基础认证考试题目及答案
12-17
HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目...
litelement-i18next-mixin:通过Mixin可以轻松地在任何litelement Web组件中使用i18next库
05-08
通过Mixin可以轻松地在任何litelement Web组件中使用i18next库。 这个mixin允许将本地字符串存储在任何地方，并通过热重载将它们延迟加载到您的组件中。 它依靠localStorage来保持语言的选择。 样本 /demo文件夹...
鸿蒙OS 路由跳转
程序员—威廉
05-22 135
2. **调用`Router`对象的`replace`或`push`方法**：在需要执行跳转的地方，调用`Router`对象的`replace`或`push`方法，并传入目标页面的路由路径。3. **使用`AbilitySlice`的`start`方法**：在自定义组件中，可以使用`AbilitySlice`的`start`方法来启动一个新的页面。1. **使用`@Route`装饰器**：在需要跳转的页面上添加`@Route`装饰器，并指定一个唯一的路由路径。）中定义路由路径，并指定参数。
鸿蒙4.2小版本推出，鸿蒙5.0已经不远了
speedoooo的博客
05-21 749
混合应用开发技术，特别是结合小程序和原生技术，为鸿蒙应用开发带来了显著的优势。首先，它简化了开发流程，使开发者能够迅速创建出高质量的应用程序。
【错误记录】HarmonyOS 运行报错 ( Failure INSTALL _PARSE _FAILED _USESDK _ERROR )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-28 493
Failure[INSTALL_PARSE_FAILED_USESDK_ERROR] compileSdkVersion and releaseType of the app do not match the apiVersion and releaseType on the device.
【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（十）
youyoufenglai的博客
05-22 814
《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记
nextjs前端在组件中加载外部css文件
05-21
在 Next.js 中，在组件中加载外部 CSS 文件有两种方式： 1. 使用 `<link>` 标签 在组件的 `render` 方法中，可以使用 `<link>` 标签来加载外部 CSS 文件。例如： ``` import Head from 'next/head'; const MyComponent = () => ( <div> <Head> <link rel="stylesheet" href="path/to/your/css/file.css" /> </Head> {/* Your component's content */} </div> ); export default MyComponent; ``` 这种方法会将 CSS 文件作为页面的 `<head>` 部分的一部分来加载，但是仅限于在客户端（浏览器）中加载。 2. 使用 `import` 语句 在组件的 JavaScript 文件中，可以使用 `import` 语句来加载外部 CSS 文件。例如： ``` import styles from 'path/to/your/css/file.css'; const MyComponent = () => ( <div className={styles.container}> {/* Your component's content */} </div> ); export default MyComponent; ``` 这种方法会将 CSS 文件作为模块来加载，并将其作为 CSS 模块化样式（CSS Modules）应用于组件中。这种方法适用于服务器端渲染和客户端渲染。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值