【鸿蒙实战开发】在应用中使用前端页面JavaScript

最新推荐文章于 2025-04-29 14:45:42 发布
最新推荐文章于 2025-04-29 14:45:42 发布
阅读量1.3k 收藏 21
点赞数 17
分类专栏： 前端 鸿蒙 安卓 文章标签： harmonyos 前端 javascript android 华为 ui 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141305532
版权

应用侧调用前端页面函数

应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。

在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。

  • 前端页面代码。
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<h1 id="text">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为绿色，调用runJavaScriptCodePassed方法后字体为红色</h1>
<script>
    // 调用有参函数时实现。
    var param = "param: JavaScript Hello World!";
    function htmlTest(param) {
        document.getElementById('text').style.color = 'green';
        console.log(param);
    }
    // 调用无参函数时实现。
    function htmlTest() {
        document.getElementById('text').style.color = 'green';
    }
    // Click Me！触发前端页面callArkTS()函数执行JavaScript传递的代码。
    function callArkTS() {
        changeColor();
    }
</script>
</body>
</html>
  • 应用侧代码。
// xxx.ets
import { webview } from '@kit.ArkWeb';

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

  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Button('runJavaScript')
        .onClick(() => {
          // 前端页面函数无参时，将param删除。
          this.webviewController.runJavaScript('htmlTest(param)');
        })
      Button('runJavaScriptCodePassed')
        .onClick(() => {
          // 传递runJavaScript侧代码方法。
          this.webviewController.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController })
    }
  }
}

前端页面调用应用侧函数

开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。

注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。

在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。

  • javaScriptProxy()接口使用示例如下。
   // xxx.ets
import { webview } from '@kit.ArkWeb';

class testClass {
  constructor() {
  }

  test(): string {
    return 'ArkTS Hello World!';
  }
}

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new 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
        })
    }
  }
}
  • 应用侧使用registerJavaScriptProxy()接口注册。
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class testClass {
  constructor() {
  }

  test(): string {
    return "ArkUI Web Component";
  }

  toString(): void {
    console.log('Web Component toString');
  }
}

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController();
  @State testObj: testClass = new testClass();

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.webviewController.refresh();
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('Register JavaScript To Window')
        .onClick(() => {
          try {
            this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController })
    }
  }
}

说明

使用registerJavaScriptProxy()接口注册方法时，注册后需调用refresh()接口生效。

  • 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>

复杂类型使用方法

  • 应用侧和前端页面之间传递Array。
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class testClass {
  constructor() {
  }

  test(): Array<Number> {
    return [1, 2, 3, 4]
  }

  toString(param: String): void {
    console.log('Web Component toString' + param);
  }
}

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController();
  @State testObj: testClass = new testClass();

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.webviewController.refresh();
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('Register JavaScript To Window')
        .onClick(() => {
          try {
            this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController })
    }
  }
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
    function callArkTS() {
        testObjName.toString(testObjName.test());
    }
</script>
</body>
</html>
  • 应用侧和前端页面之间传递基础类型，非Function等复杂类型。
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class student {
  name: string = '';
  age: string = '';
}

class testClass {
  constructor() {
  }

  // 传递的基础类型name:"jeck", age:"12"。
  test(): student {
    let st: student = { name: "jeck", age: "12" };
    return st;
  }

  toString(param: ESObject): void {
    console.log('Web Component toString' + param["name"]);
  }
}

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController();
  @State testObj: testClass = new testClass();

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.webviewController.refresh();
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('Register JavaScript To Window')
        .onClick(() => {
          try {
            this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController })
    }
  }
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
    function callArkTS() {
        testObjName.toString(testObjName.test());
    }
</script>
</body>
</html>
  • 应用侧调用前端页面的Callback。
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class testClass {
  constructor() {
  }

  test(param: Function): void {
    param("call callback");
  }

  toString(param: String): void {
    console.log('Web Component toString' + param);
  }
}

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController();
  @State testObj: testClass = new testClass();

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.webviewController.refresh();
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('Register JavaScript To Window')
        .onClick(() => {
          try {
            this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController })
    }
  }
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
    function callArkTS() {
        testObjName.test(function(param){testObjName.toString(param)});
    }
</script>
</body>
</html>
  • 应用侧调用前端页面Object里的Function。
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class testClass {
  constructor() {
  }

  test(param: ESObject): void {
    param.hello("call obj func");
  }

  toString(param: String): void {
    console.log('Web Component toString' + param);
  }
}

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController();
  @State te
最低0.47元/天 解锁文章
鸿蒙HarmonyOS兼容JS的类Web开发-开发指导
特创数字
01-11 1372
设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
鸿蒙HarmonyOS实战：JS组件通用方法规范总结
2401_84917132的博客
08-22 1218
当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。
HarmonyOS Next开发学习手册——在应用中使用前端页面JavaScript
maniuT的博客
07-21 1214
在下面的示例中，应用侧页面中通过createWebMessagePorts方法创建消息端口，再把其中一个端口通过 postMessage() 接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。通过 runJavaScript 调用前端页面函数。
HarmonyOS NEXT鸿蒙开发入门，ArkWeb调用前端页面js函数
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-19 932
在上集中，我们学习了ArkWeb的基础使用， 这集我们来学习如何跟前端js交互。
鸿蒙NEXT版实战开发：Webview的runJavaScript和runJavaScriptExt有什么区别，在页面生命周期（如onPageShow、onPageEnd）的什么时候进行调用？
最新发布
qq_39652397的博客
04-29 335
从功能上讲，二者都可以异步执行JavaScript脚本，并通过回调方式或Promise方式返回脚本执行的结果。
鸿蒙实战开发-如何使用Devtools工具调试前端页面
m0_70749039的博客
05-08 1464
Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过
HarmonyOS-利用DevTools工具调试前端网页
localhost
04-09 1286
利用DevTools工具调试前端网页报错问题解决
【鸿蒙实战开发】—— 在应用中使用前端页面JavaScript
2401_88547687的博客
11-14 1337
在下面的示例中，应用侧页面中通过createWebMessagePorts方法创建消息端口，再把其中一个端口通过 postMessage() 接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。第一种使用方法，在应用侧new Promise。
鸿蒙HarmonyOS实战开发-Web组件（前端函数和应用侧函数相互调用）
HarmonyOS_002的博客
07-07 1249
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：●关注小编，同时可以期待后续文章ing，不定期分享原创知识。
鸿蒙开发进阶（HarmonyOS ）前端页面调用应用侧函数场景
m0_67143533的博客
11-03 952
开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。
HarmonyOS NEXT鸿蒙开发入门，ArkWeb前端js调鸿蒙函数
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-20 890
在上集中，我们学些了鸿蒙如何去调用前端js函数，这集我们来学习js如何调用鸿蒙函数。js调鸿蒙和鸿蒙调js两种形式。
【愚公系列】2023年12月 HarmonyOS教学课程 055-Web组件（前端函数和应用侧函数相互调用）
热门推荐
时光隧道
12-26 8万+
前端函数和应用侧函数相互调用是指前端页面中的JavaScript函数和应用程序侧的函数之间进行相互调用。在前端开发中，常常会使用JavaScript函数来处理用户的交互事件和操作。这些函数可以在前端页面中定义，例如通过事件监听器或者按钮点击事件来触发函数的执行。这些前端函数可以使用DOM操作、修改页面样式以及向后端发送请求等。而应用侧函数是指在应用程序中定义的函数，例如后端服务器端脚本、数据库操作函数等。这些函数通常用于处理业务逻辑、数据处理、数据库操作等。
逐行分析鸿蒙系统的 JavaScript 开发框架
华章IT官方博客
10-03 2078
近日，鸿蒙终于发布了，开发者们也着实“沸腾”了。笔者也第一时间下载了源码，研究了一个晚上，顺带写了一个 hello world 程序，还顺手给鸿蒙文档提了 2 个 PR。当然我最感兴趣的...
鸿蒙-webview的使用和JS交互（附源码）
坚果的博客
01-25 4042
作者：坚果 公众号：“大前端之旅” 华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。 日常我们在开发项目时，为了项目快速的开发和迭代，难免会用到H5页面。使用鸿蒙进行项目开发时，也一样免不了要加载H5页面，在移动开发中打开H5页面需要使用WebView组件。同时，为了和H5页面进行数据交换，有时候还需要借助JSBridge来实现客户端与H5之间的通讯。 那么鸿蒙之中.
鸿蒙应用开发 Web 组件抽奖
GitHub指北
12-30 1104
相信大家都遇到过这样的场景，有时候我们点击应用的页面，会跳转到一个类似浏览器加载的页面，加载完成后，才显示这个页面的具体内容，这个加载和显示网页的过程通常都是浏览器的任务。ArkUI 为我们提供了 Web 组件来加载网页，借助它我们就相当于在自己的应用程序里嵌入一个浏览器，从而非常轻松地展示各种各样的网页。本文将为您介绍 Web 组件一些常用 API 的使用。本篇 Codelab 是基于 ArkTS 的声明式开发范式的样例，主要介绍了 Web 组件如何加载本地和云端 H5 小程序。
【HarmonyOS NEXT】项目中如何引入第三方js类库
Mayism123的博客
04-02 785
按照https://developer.huawei.com/consumer/cn/forum/topic/0202769537680520280?fid=0102683795438680754指导进行操作，并未成功。可以通过ohpm install spark-md5命令引入，且只能引用开源鸿蒙仓的js类库。比如：spark-md5。三方库 / ohpm方式引入js类库。
鸿蒙原生应用元服务开发-Web加载本地页面
weixin_69135651的博客
04-30 748
将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面 ，并且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。将资源文件放置在应用的resources/rawfile目录下。本文参考引用HarmonyOS官方开发文档，基于API9。
【HarmonyOS NEXT】异步编程的神器之Promise
冉冉同学的专栏
11-18 480
异步编程对 ArkTS 这门语言来说实在太重要。因为ArkTS是单线程模型【单线程模型指的是，JavaScript只在一个线程上运行。也就是说，JavaScript同时只能执行一个任务，其他任务都必须在后面排队等待。如果没有异步编程，很容易就写出回调地狱般的屎山代码。现在在ArkTS中要实现异步并发任务时，最合适的就是使用Promise和async/await【在此之前JS异步的发展历程是callback->promise/generator->async/await】
HarmonyOS应用开发实战实现美团登录页面
01-04
在构建HarmonyOS应用中的美团登录页面之前，理解所涉及的关键技术和工具至关重要。这不仅限于掌握布局设计、UI组件的使用，还包括熟悉官方提供的开发指南和支持资源[^1]。 #### 设计与规划界面结构 创建美观且功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值