鸿蒙开发：前端页面调用 ArkTS 函数全解析

作者：flfljh

2024-12-18
湖南
本文字数：3335 字
阅读完需：约 11 分钟

鸿蒙开发：前端页面调用 ArkTS 函数全解析

JavaScriptProxy：前端与 ArkTS 交互的桥梁

（一）功能概述

JavaScriptProxy 是 ArkWeb 提供的强大机制，它就像一座桥梁，允许开发者将 ArkTS 对象注册到前端页面，进而实现在前端页面中无缝调用这些对象的函数。这一机制极大地拓展了鸿蒙应用开发中前端与应用侧的交互能力。

（二）接口介绍

javaScriptProxy()接口
在 Web 组件初始化阶段被调用，其主要作用是将指定对象注入到前端页面。此接口的调用时机较早，能够确保在页面加载初期就为前端提供必要的 ArkTS 对象支持。
registerJavaScriptProxy()接口
在 Web 组件初始化完成后发挥作用，用于将对象注册到前端页面。它提供了一种在组件初始化后动态注册对象的方式，增加了应用的灵活性。

示例代码剖析：前端调用 ArkTS 函数实战

（一）应用侧代码（ArkTS）解读

import { webview } from '@kit.ArkWeb';import { BusinessError } from '@kit.BasicServicesKit';
// 定义测试类testClassclass testClass {  constructor() {}  // 返回字符串的测试函数  test(): string {    return 'ArkTS Hello World!';  }  // 打印传入字符串的函数  toString(param: string): void {    console.log('Web Component toString' + param);  }}
// 定义Web组件@Entry@Componentstruct WebComponent {  webviewController: webview.WebviewController = new webview.WebviewController();  // 声明并初始化需要注册到前端的testObj对象  @State testObj: testClass = new testClass();
  build() {    Column() {      // 加载本地index.html页面的Web组件      Web({ src: $rawfile('index.html'), controller: this.webviewController})      // 使用javaScriptProxy接口将testObj对象注册到前端，设置相关属性     .javaScriptProxy({          object: this.testObj,          name: "testObjName",          methodList: ["test", "toString"],          controller: this.webviewController,          // 可选参数          asyncMethodList: [],          permission: '{"javascriptProxyPermission":{"urlPermissionList":[{"scheme":"resource","host":"rawfile","port":"","path":""},' +                  '{"scheme":"e","host":"f","port":"g","path":"h"}],"methodList":[{"methodName":"test","urlPermissionList":' +                  '[{"scheme":"https","host":"xxx.com","port":"","path":""},{"scheme":"resource","host":"rawfile","port":"","path":""}]},' +                  '{"methodName":"test11","urlPermissionList":[{"scheme":"q","host":"r","port":"","path":"t"},' +                  '{"scheme":"u","host":"v","port":"","path":""}]}]}}'        })    }  }}

复制代码

（二）前端页面代码（HTML）分析

<!-- index.html --><!DOCTYPE html><html><body><button type="button" onclick="callArkTS()">Click Me!</button><p id="demo"></p><script>function callArkTS() {    // 调用注册在前端的testObjName对象的test函数，并获取返回值    let str = testObjName.test();    document.getElementById("demo").innerHTML = str;    console.info('ArkTS Hello World! :' + str);    // 调用testObjName对象的toString函数，传入获取到的字符串    testObjName.toString(str);}</script></body></html>

复制代码

权限配置：守护应用安全防线

（一）权限配置原理

在前端页面调用 ArkTS 函数的过程中，权限配置至关重要。它通过一个 JSON 字符串来定义，涵盖了对象级权限和方法级权限。对象级权限明确了哪些 URL 能够访问该对象的所有方法，而方法级权限则更加精细，指定了哪些 URL 可以访问对象的特定方法。这种细致的权限划分有助于有效防止恶意攻击，确保应用的安全性。

（二）权限配置示例详解

{  "javascriptProxyPermission": {"urlPermissionList": [  {    "scheme": "resource",    // 必须精确匹配，不能为空，用于指定资源类型    "host": "rawfile",       // 必须精确匹配，不能为空，指定主机名    "port": "",              // 精确匹配，为空时不检查端口    "path": ""               // 前缀匹配，为空时不检查路径  },  {    "scheme": "https",       // 精确匹配，不能为空    "host": "xxx.com",       // 精确匹配，不能为空    "port": "8080",          // 精确匹配，为空不检查    "path": "a/b/c"          // 前缀匹配，为空不检查  }],"methodList": [  {    "methodName": "test",    "urlPermissionList": [   // 针对test方法的权限列表      {        "scheme": "https",   // 精确匹配，不能为空        "host": "xxx.com",   // 精确匹配，不能为空        "port": "",          // 精确匹配，为空不检查        "path": ""           // 前缀匹配，为空不检查      },      {        "scheme": "resource",// 精确匹配，不能为空        "host": "rawfile",   // 精确匹配，不能为空        "port": "",          // 精确匹配，为空不检查        "path": ""           // 前缀匹配，为空不检查      }    ]  },  {    "methodName": "test11",    "urlPermissionList": [   // 针对test11方法的权限列表      {        "scheme": "q",       // 精确匹配，不能为空        "host": "r",         // 精确匹配，不能为空        "port": "",          // 精确匹配，为空不检查        "path": "t"          // 前缀匹配，为空不检查      },      {        "scheme": "u",       // 精确匹配，不能为空        "host": "v",         // 精确匹配，不能为空        "port": "",          // 精确匹配，为空不检查        "path": ""           // 前缀匹配，为空不检查      }    ]  }]  }}

复制代码

复杂类型传递：超越基础数据的交互

（一）传递数组示例

在实际开发中，前端与 ArkTS 之间可能需要传递复杂数据类型。以下是传递数组的示例：

class testClass {  constructor() {}  // 返回数字数组的函数  test(): Array<number> {    return [1, 2, 3, 4]  }  toString(param: string): void {    console.log('Web Component toString' + param);  }}

复制代码

（二）传递对象示例

除了数组，对象的传递也十分常见：

class student {  name: string = '';  age: string = '';}
class testClass {  constructor() {}  // 返回student对象的函数  test(): student {    let st: student = { name: "jeck", age: "12" };    return st;  }  toString(param: string): void {    console.log('Web Component toString' + param);  }}

复制代码

Promise 场景：异步调用的解决方案

（一）应用侧返回 Promise 示例

在异步操作场景下，JavaScriptProxy 同样表现出色。例如，以下是应用侧返回 Promise 的代码：

class testClass {  constructor() {}  // 返回Promise的测试函数  test(): Promise<string> {    let p: Promise<string> = new Promise((resolve, reject) => {      setTimeout(() => {        console.log('执行完成');        resolve('suc');      }, 10000);    });    return p;  }  toString(param: string): void {    console.log(" " + param);  }}

复制代码

（二）前端页面处理 Promise 示例

前端页面可以通过如下方式处理 Promise：

function callArkTS() {  testObjName.test().then((param)=>{testObjName.toString(param)}).catch((param)=>{testObjName.toString(param)})}

复制代码

综上所述，JavaScriptProxy 为鸿蒙开发中前端页面调用 ArkTS 函数提供了强大且灵活的支持。它不仅能够实现基础的函数调用，还在复杂类型传递和异步调用等方面表现优异，同时通过权限配置保障了应用的安全性，为开发者构建高效、安全的鸿蒙应用提供了有力保障。

提供一些具体的代码示例，展示如何在前端页面中调用 ArkTS 函数。

除了 JavaScriptProxy，还有哪些方式可以实现前端与 ArkTS 的交互？

在实际开发中，使用前端调用 ArkTS 函数需要注意哪些问题？

发布于: 刚刚阅读数: 4

flfljh

关注

还未添加个人签名 2024-10-29 加入

还未添加个人简介

发布

暂无评论

创作场景

鸿蒙开发：前端页面调用 ArkTS 函数全解析

鸿蒙开发：前端页面调用 ArkTS 函数全解析

JavaScriptProxy：前端与 ArkTS 交互的桥梁

（一）功能概述

（二）接口介绍

示例代码剖析：前端调用 ArkTS 函数实战

（一）应用侧代码（ArkTS）解读

（二）前端页面代码（HTML）分析

权限配置：守护应用安全防线

（一）权限配置原理

（二）权限配置示例详解

复杂类型传递：超越基础数据的交互

（一）传递数组示例

（二）传递对象示例

Promise 场景：异步调用的解决方案

（一）应用侧返回 Promise 示例

（二）前端页面处理 Promise 示例

flfljh

评论