核心内容摘要
es-client：Elasticsearch集群管理与数据可视化的全能工具
Web组件的生命周期概述开发者可以使用Web组件加载本地或者在线网页。
Web组件提供生命周期回调接口用于感知状态变化和处理业务。
Web组件的状态主要包括Controller绑定到Web组件、网页加载开始、网页加载进度、网页加载结束、页面即将可见。
Web页面保活可以参考使用离线Web组件。
自定义组件析构销毁时执行aboutToDisappear函数Web组件会被销毁Web组件与WebviewController解绑js运行环境也会一并销毁。
图1Web组件网页正常加载过程中的回调事件Web组件网页正常加载过程所涉及的状态说明aboutToAppear函数在创建自定义组件的新实例后在执行其build函数前执行。
建议在此设置WebDebug调试模式、自定义协议URL的权限、Cookie等。
onControllerAttached事件当Controller成功绑定到Web组件时触发该回调且禁止在该事件回调前调用Web组件相关的接口否则会抛出js-error异常。
建议在此事件中注入JS对象、设置自定义用户代理使用操作网页不相关的接口。
但因该回调调用时网页还未加载因此无法在回调中使用有关操作网页的接口例如zoomIn、zoomOut等。
onLoadIntercept事件当Web组件加载url之前触发该回调用于判断是否阻止此次访问。
默认允许加载。
onInterceptRequest事件当Web组件加载url之前触发该回调用于拦截url并返回响应数据。
onPageBegin事件网页开始加载时触发该回调且只在主frame表示一个用于展示HTML页面的元素触发。
如果是iframe或者frameset用于包含frame的HTML标签的内容加载时则不会触发此回调。
多frame页面可能同时加载主frame加载结束时子frame可能仍在加载。
同一页面导航或失败的导航不会触发该回调。
onProgressChange事件告知开发者当前页面加载的进度。
多frame页面或者子frame可能还在继续加载而主frame已经加载结束所以在onPageEnd事件后仍可能收到该事件。
onPageEnd事件网页加载完成时触发该回调且只在主frame触发。
多frame页面有可能同时开始加载即使主frame已经加载结束子frame也有可能才开始或者继续加载中。
同一页面导航或失败的导航不会触发该回调。
建议在此回调中执行JavaScript脚本。
注意收到该回调不能保证下一帧反映DOM状态。
Web组件网页异常加载过程所涉及的状态说明onOverrideUrlLoading事件当URL将要加载到当前Web中时让宿主应用程序有机会获得控制权回调函数返回true将导致当前Web中止加载URL而返回false则会导致Web继续照常加载URL。
onLoadIntercept接口和onOverrideUrlLoading接口行为不一致触发时机也不同所以在应用场景上存在一定区别。
onLoadIntercept事件在LoadUrl和iframe加载时触发但onOverrideUrlLoading事件在LoadUrl和特定iframe加载时不会触发。
onPageVisible事件Web回调事件。
渲染流程中当HTTP响应的主体开始加载新页面即将可见时触发该回调。
此时文档加载还处于早期因此链接的资源比如在线CSS、在线图片等可能尚不可用。
onRenderExited事件应用渲染进程异常退出时触发该回调可以在此回调中进行系统资源的释放、数据的保存等操作。
如果应用希望异常恢复需要调用loadUrl接口重新加载页面。
详细用法参考应用如何避免Web组件渲染子进程异常退出导致的页面卡死问题。
onDisAppear事件组件卸载消失时触发此回调。
该事件在组件卸载时触发。
应用侧代码举例参考Web组件的生命周期应用如何避免Web组件渲染子进程异常退出导致的页面卡死问题ArkWeb方舟Web是一个Web组件平台旨在为应用程序提供展示Web页面内容的功能并向开发者提供一系列的能力如页面加载、交互和调试等功能。
使用ArkWeb相关应用时可能因各种原因例如前端偶现异常导致ArkWeb渲染子进程崩溃或是打开的应用较多系统资源紧张导致后台ArkWeb渲染子进程被终止而出现页面卡死的问题这时需要重新打开页面或重启应用来解决。
在ArkWeb渲染子进程异常退出导致页面卡死后应用可通过监听onRenderExited事件来获取具体的退出原因RenderExitReason并在异常回调中根据退出的具体原因执行相应的异常处理。
开发
实践案例参考Web组件的生命周期应用侧调用前端页面函数应用侧可以通过runJavaScript()和runJavaScriptExt()方法调用前端页面的JavaScript相关函数。
runJavaScript()和runJavaScriptExt()在参数类型上有以下差异runJavaScriptExt()支持string和ArrayBuffer类型参数而runJavaScript()仅支持string类型参数。
在下面的示例中点击应用侧的“runJavaScript”按钮时触发前端页面的htmlTest()方法。
前端页面代码。
!-- index.html -- !DOCTYPE html html head meta nameviewport contentwidthdevice-width, initial-scale
0 /head body button typebutton onclickcallArkTS()Click Me!/button h1 idtext这是一个测试信息默认字体为黑色调用runJavaScript方法后字体为黄色、调用runJavaScriptParam方法后字体为绿色、调用runJavaScriptCodePassed方法后字体为红色/h1 script // 有参函数。
var param param: JavaScript Hello World!; function htmlTestParam(param) { document.getElementById(text).style.color green; console.info(param); } // 无参函数。
function htmlTest() { document.getElementById(text).style.color yellow; } // 点击“Click Me”按钮触发前端页面callArkTS()函数执行JavaScript传递的代码。
function callArkTS() { changeColor(); } /script /body /html应用侧代码。
import { webview } from kit.ArkWeb; Entry Component struct WebComponent { webviewController: webview.WebviewController new webview.WebviewController(); aboutToAppear() { // 配置Web开启调试模式 webview.WebviewController.setWebDebuggingAccess(true); } build() { Column() { Button(runJavaScriptParam) .onClick(() { // 调用前端页面有参函数。
this.webviewController.runJavaScript(htmlTestParam(param)); }) Button(runJavaScript) .onClick(() { // 调用前端页面无参函数。
this.webviewController.runJavaScript(htmlTest()); }) Button(runJavaScriptCodePassed) .onClick(() { // 传递runJavaScript侧代码方法。
this.webviewController.runJavaScript( function changeColor(){document.getElementById(text).style.color red}); }) Web({ src: $rawfile(index.html), controller: this.webviewController }) } } }前端页面调用应用侧函数