HarmonyOS 鸿蒙Next如何在普通JavaScriptProxy对象中操作ui

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何在普通JavaScriptProxy对象中操作ui 应该如何在web注入的JavaScriptProxy对象中操作UI？我们注入的代理对象，一般都是普通的class，在这种class中，应该如何去操作UI界面的元素呢？比如打开一个弹框，或者是操作和web组件同界面的组件？这块有推荐方案吗？

Harmonyos Next教程
3 回复

可以参考这篇指南实现前端页面调用应用侧函数：前端页面调用应用侧函数-在应用中使用前端页面JavaScript-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

在该指南的示例代码上做了少量修改，实现了您提到的弹窗。

// xxx.ets

import web_webview from '@ohos.web.webview';
import { promptAction } from '@kit.ArkUI';

class testClass {

constructor() {}

test(): string {
    promptAction.showDialog({
        title: 'Title Info',
        message: 'Message Info',
    })
    return 'ArkTS Hello World!';
}
}

@Entry
@Component
struct WebComponent {
    webviewController: web_webview.WebviewController = new web_webview.WebviewController();

    // 声明需要注册的对象
    @State testObj: testClass = new testClass();

    build() {
        Column() {
            // web组件加载本地index.html页面
            Web({ src: $rawfile('index.html'), controller: this.webviewController })

            // 将对象注入到web端
            .javaScriptProxy({
                object: this.testObj,
                name: "testObjName",
                methodList: ["test"],
                controller: this.webviewController
            })
        }
    }
}

index.html 内容如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
function callArkTS() {
    let str = testObjName.test();
    document.getElementById("demo").innerHTML = str;
    console.info('ArkTS Hello World! :' + str);
}
</script>
</body>
</html>

更多关于HarmonyOS 鸿蒙Next如何在普通JavaScriptProxy对象中操作ui的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


如果是操作想更新Page的其他组件呢，

图片

在HarmonyOS鸿蒙系统中，若你希望在普通的JavaScript Proxy对象中操作UI，通常需要通过鸿蒙提供的JS API来实现。这些API允许JavaScript代码与原生UI组件进行交互。

具体操作步骤如下：

  1. 引入鸿蒙JS框架：确保你的项目已经正确引入了鸿蒙的JavaScript开发框架。

  2. 创建UI组件：在页面的.hml文件中定义你需要的UI组件，例如按钮、文本框等。

  3. 获取组件引用：在页面的.js文件中，通过this.$refs获取到你在.hml文件中定义的UI组件的引用。

  4. 操作UI组件：使用鸿蒙提供的JS API，通过获取的组件引用来操作UI，例如设置文本内容、改变样式、触发事件等。

  5. 数据绑定：鸿蒙支持数据绑定机制，你可以通过修改数据模型来动态更新UI组件的状态。

示例代码（简化版）：

// 假设你有一个按钮组件，ref为"myButton"
this.$refs.myButton.setText("新按钮文本"); // 设置按钮文本

请注意，实际操作中可能需要更复杂的逻辑来处理UI更新和事件处理。确保你熟悉鸿蒙的JS开发文档，以便正确使用API。

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html

回到顶部