H5在HarmonyOS上调用原生功能：JSBridge桥接实战

开发工具

2023-12-05 11:05:51

在HarmonyOS中使用JSBridge实现H5与原生交互

H5与原生应用交互的奥秘：JSBridge

在HarmonyOS中，H5页面与原生应用的交互需要借助JSBridge。JSBridge就像一座桥梁，让H5页面能够调用原生应用的功能，并在回调中获取执行结果。

构建“获取通讯录”功能：从零开始

为了让大家亲身体验JSBridge的使用，我们以“获取通讯录”功能为例，一步步构建这个功能。

步骤1：创建Web组件

首先，我们需要创建一个Web组件，它将包含H5页面所需的代码。

<html>
<head>
  
</head>
<body>
  <button onclick="getContacts()">获取通讯录</button>
  <div id="result"></div>
</body>
</html>

步骤2：添加JSBridge脚本

接下来，我们需要添加JSBridge脚本到Web组件中。

<script src="jsbridge.js"></script>

步骤3：编写JSBridge调用代码

现在，我们需要编写JSBridge调用代码，它将调用原生应用的“获取通讯录”功能。

function getContacts() {
  window.webkit.messageHandlers.contacts.postMessage({});
}

步骤4：编写原生应用的JSBridge处理代码

在原生应用中，我们需要编写JSBridge处理代码，它将处理H5页面的调用请求。

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  if ([message.name isEqualToString:@"contacts"]) {
    // 获取通讯录代码
    NSArray *contacts = [self getContacts];
    // 将通讯录数据返回给H5页面
    [self.webView evaluateJavaScript:[NSString stringWithFormat:@"window.resultCallback(%@)", contacts] completionHandler:nil];
  }
}