HarmonyOS 鸿蒙Next Web组件注册和调用改造

HarmonyOS 鸿蒙Next Web组件注册和调用改造

今天给web组件添加新的js方法，结果浪费2小时死活调不通，后来才想到需要注册。

好麻烦，还是改造一下，以后只需要添加js方法就行了，方法名通过aboutToAppear方法中完成了methodList与myJsObject方法名的一致性处理。以后就不用再考虑写个js函数名还要再注册名称的问题了。

/**
 * @Component 定义一个WebView组件，其中包含了自动注入到H5页面的方法列表
 */
@Component
export struct WebView {
  controller: web_webview.WebviewController;
  loadUrl: string = '';

  // 定义一个对象，包含供H5端调用的原生方法
  myJsBridge: {
    appLogout: () => void;
    share: (params: any) => void;
  };

  // 初始化方法列表，用于存储要注入到H5环境中的方法名
  methodNames: string[] = [];

  // 在组件即将展示时动态更新方法列表
  aboutToAppear() {
    console.log('===== Updating method list...');

    // 清空现有方法列表
    this.methodNames.splice(0, this.methodNames.length);

    // 从myJsBridge对象中提取方法名并填充到方法列表
    Object.keys(this.myJsBridge).forEach((methodName) => {
      this.methodNames.push(methodName);
      console.log('Added method:', methodName);
    });
  }

  // 构建组件布局，同时设置JavaScript代理
  build() {
    return Flex({
      flexDirection: FlexDirection.Column,
      flexWrap: FlexWrap.NoWrap,
    })(
      Web({
        src: this.loadUrl,
        controller: this.controller,
      })
        // 注入原生方法到H5环境，通过全局变量'my'访问
        .javaScriptProxy({
          name: 'my',
          methods: this.myJsBridge,
          methodNames: this.methodNames,
          controller: this.controller,
        })
    )
    .width('100%')
    .flexGrow(1);
  }
}

更多关于HarmonyOS 鸿蒙Next Web组件注册和调用改造的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，Web组件的注册和调用进行了改造。首先，Web组件的注册方式发生了变化，开发者需要在app.json5文件中声明Web组件的路径和配置信息。例如：

{
  "module": {
    "name": "entry",
    "pages": [
      "pages/index/index"
    ],
    "components": [
      {
        "name": "web",
        "src": "@ohos.web.webview"
      }
    ]
  }
}

在调用Web组件时，开发者需要使用@Component装饰器来定义组件，并通过@State和@Link等装饰器来管理组件的状态和数据绑定。例如：

import { Component, State, Link } from '@ohos.arkui';
import WebView from '@ohos.web.webview';

@Component
struct MyWebComponent {
  @State url: string = "https://www.example.com";

  build() {
    WebView({
      src: this.url
    })
  }
}

此外，鸿蒙Next还引入了新的API来增强Web组件的功能，如WebViewController用于控制WebView的行为，WebMessagePort用于实现Web与原生应用之间的通信。开发者可以通过这些API来实现更复杂的交互和功能。

例如，使用WebViewController加载URL：

let webViewController = new WebView.WebViewController();
webViewController.loadUrl(this.url);

通过这些改造，鸿蒙Next的Web组件在注册和调用上更加灵活和强大，开发者可以更高效地构建基于Web的应用。

更多关于HarmonyOS 鸿蒙Next Web组件注册和调用改造的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 4.0（鸿蒙Next）中，Web组件的注册和调用进行了优化。首先，在module.json5中声明Web组件，确保"jsEngine": "ark"，以使用ArkTS引擎。接着，在页面中使用@Entry和@Component装饰器定义组件，并通过WebController控制Web组件。示例代码如下：

import { WebController } from '@ohos.web.webview';

@Entry
@Component
struct WebPage {
  private webController: WebController = new WebController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.webController })
        .onPageEnd(() => {
          console.log('Page loaded');
        });
    }
  }
}

此代码展示了如何在鸿蒙Next中注册和调用Web组件，并监听页面加载事件。

回到顶部