起步应用与指南

Web 应用套壳 iOS

已有 Web 产品如何最快上 iOS:用 WKWebView 壳加载你的站点,再原生桥接 Embedded SDK 拿到设备能力。

开发者平台处于内测阶段,接口契约以联调时提供的正式文档为准。账号由对接工程师开通,详见联系我们。

如果你已经有一个成熟的 Web 应用,不必推翻重做:用一个原生 iOS 壳(WKWebView)加载你的站点,再在壳里集成 Embedded SDK,通过 JS 桥把扫描、绑定、同步等设备能力暴露给 Web 侧。Web 应用继续是 Web 应用,同时具备原生设备能力。

接入步骤

建原生壳工程

新建一个 iOS 工程,主界面放一个 WKWebView,加载你部署好的 Web 应用地址。

集成 Embedded SDK 并注册 JS 桥

按 iOS SDK 集成 IKhoEmbedded,并给 WKWebView 注册一个消息处理器(如名为 ikho)。

原生侧实现桥方法

在消息处理器里把 Web 的调用转发给 IKhoDeviceManager;设备事件在代理回调里通过 evaluateJavaScript 回传 Web。

Web 侧通过桥调用

在 Web 代码里判断处于原生壳中时,调用桥接口发起扫描 / 绑定 / 同步,并监听回传事件更新界面。

JS 桥接口示例

swift

import WebKit
import IKhoEmbedded

final class WebBridge: NSObject, WKScriptMessageHandler, IKhoDeviceDelegate {
    private weak var webView: WKWebView?

    func attach(to webView: WKWebView) {
        self.webView = webView
        webView.configuration.userContentController.add(self, name: class="tk-str">"ikho")
        IKhoDeviceManager.shared.delegate = self
    }

    class="tk-cmt">// 接收 Web 侧调用:{ method, args }
    func userContentController(_ controller: WKUserContentController,
                              didReceive message: WKScriptMessage) {
        guard let body = message.body as? [String: Any],
              let method = body[class="tk-str">"method"] as? String else { return }
        switch method {
        case class="tk-str">"scanDevices": IKhoDeviceManager.shared.scanDevices()
        case class="tk-str">"bindDevice":  IKhoDeviceManager.shared.bind(device: /* 解析 args */)
        case class="tk-str">"syncRecordings": IKhoDeviceManager.shared.fetchRecordings()
        default: break
        }
    }

    class="tk-cmt">// 设备事件回传 Web(payloadJSON 为已序列化的 JSON 字符串)
    func recordingListUpdated(_ recordings: [IKhoRecording]) {
        let js = class="tk-str">"window.__ikhoBridge.emit('recordingList', " + payloadJSON + class="tk-str">")"
        webView?.evaluateJavaScript(js)
    }
}

class="tk-cmt">// 调用原生能力
function callNative(method: string, args: unknown = {}) {
  (window as any).webkit?.messageHandlers?.ikho?.postMessage({ method, args });
}

class="tk-cmt">// 接收原生回传的事件
(window as any).__ikhoBridge = {
  emit(event: string, payload: unknown) {
    window.dispatchEvent(new CustomEvent(class="tk-str">'ikho:' + event, { detail: payload }));
  },
};

window.addEventListener(class="tk-str">'ikho:recordingList', (e) => {
  const { detail } = e as CustomEvent;
  class="tk-cmt">// 用 detail 渲染录音列表
});

class="tk-cmt">// 发起扫描
callNative(class="tk-str">'scanDevices');

蓝牙权限只能在原生侧申请:WKWebView 内的 Web 代码无法直接访问 CoreBluetooth,所有设备操作都必须经由 JS 桥转到原生。请把蓝牙、麦克风的权限声明放在原生壳的 Info.plist 里。

这一页有帮助吗?