1(void)showH5BrowserWithNavigationController:(UINavigationController *)navigationController animated:(BOOL)isAnimated;

1- (void)showH5BrowserWithPresentViewController:(UIViewController *)viewController isFullScreen:(BOOL)isFull animated:(BOOL)isAnimated completion:(void (^ __nullable)(void))completion;

1- (void)dismissH5BrowserAnimated:(BOOL)isAnimated completion:(void (^ __nullable)(void))completion;

1@protocol BDH5BrowserDelegate <NSObject>
2
3@optional
4- (void)bdH5BrowserUserContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
5
6@end

1       // 百度人脸URL
2    NSString *urlString = @"https://ai-face-h5-evaluation.weiyun.baidu.com/face/print/h5demo";
3
4    if (self.urlTF.text.length > 0) {
5        urlString = self.urlTF.text;
6    }
7
8    _desController = [[BDH5Browser alloc] init];
9    
10    // 设置URL，必传。否则页面无法加载
11    _desController.homeUrl = urlString;
12    
13    // 设置与JS协商的key值，以实现 JS to Native 的事件回调。此处js2Native是与百度人脸JS端协商好的key值，用于JS与Native通信，切勿随意更改
14    _desController.js2NativeTags = @[@"js2Native"];
15    
16    // webBrowser messageHandler 事件回调代理
17    _desController.bdH5BrowserDelegate = self;
18    
19    // 是否展示关闭按钮，默认不展示
20    _desController.isShowCloseButton = YES;
21
22    // push or present
23//    [_desController showH5BrowserWithNavigationController:self.navigationController animated:YES];
24    
25//    // push or present
26    [_desController showH5BrowserWithPresentViewController:self isFullScreen:YES animated:YES completion:nil];
27   

1- (void)bdH5BrowserUserContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
2    NSString *messageName = message.name;
3    NSString *messageBody = message.body;
4
5    NSLog(@"****************:%@", message.name); // 方法名
6    NSLog(@"****************:%@", message.body); // 传递的数据
7    
8    // 可根据协商key值进行自定义native逻辑，以下仅做示例展示
9    if ([messageName isEqualToString:@"js2Native"]) {
10        
11        dispatch_async(dispatch_get_main_queue(), ^{
12            [self->_desController dismissH5BrowserAnimated:YES completion:nil];
13            self->_desController = nil;
14            
15            UIAlertController *alert = [UIAlertController alertControllerWithTitle:messageName message:messageBody preferredStyle:UIAlertControllerStyleAlert];
16            UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"好的" style:UIAlertActionStyleDestructive handler:nil];
17            [alert addAction:okAction];
18            [self presentViewController:alert animated:YES completion:nil];
19        });
20
21    }
22    
23}

12、repositories {
2    flatDir {
3        dirs 'libs'
4    }
5}
6dependencies {
7    // jsBridge-SDK.aar
8    compile(name: 'lib-jsbridge-1.0-release', ext: 'aar')
9}

1    <RelativeLayout
2        android:id="@+id/js_layout"
3        android:layout_width="match_parent"
4        android:layout_height="match_parent">
5        <com.baidu.ai.face.widget.JsWebView
6            android:id="@+id/js_webview"
7            android:layout_width="match_parent"
8            android:layout_height="match_parent" />
9    </RelativeLayout>

1    import com.baidu.ai.face.widget.JsWebView

1        jsWebview = (JsWebView) findViewById(R.id.js_webview);
2        if (jsWebview.checkPermissions()) {
3            // 加载H5页面
4            jsWebview.loadUrl(mUrl);
5        }

1// 通过JsBridge监听消息
2jsWebView.setJs2NativeListener(new Js2NativeListener() {
3    @Override
4    public void js2Native(int code, String message) {
5        Toast.makeText(jsWebView.getContext(),
6                "js->Native:" + "code:" + code + ",value:" + message, Toast.LENGTH_LONG).show();
7    }
8});

1    @Override
2    public void onRequestPermissionsResult(int requestCode, String[] permissions,
3                                           int[] grantResults) {
4        if (jsWebview.onPermissionsResult(requestCode, permissions, grantResults)) {
5            // 加载H5页面
6            jsWebview.loadUrl(mUrl);
7        } else {
8            // 权限申请失败，增加失败处理逻辑
9        }
10    }

1    @Override
2    public boolean onKeyDown(int keyCode, KeyEvent event) {
3        return jsWebview.onKeyDown(JsActivity.this, keyCode, event);
4    }

1    @Override
2    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
3        super.onActivityResult(requestCode, resultCode, data);
4        jsWebview.onCaptureResult(requestCode, resultCode, data);
5    }

1{
2  "dependencies": {
3    "@aspect/jsbridge": "file:./libs/jsbridge.har"
4  }
5}

1# 将 HAR 文件复制到项目 libs 目录
2cp jsbridge.har your_project/libs/

1// oh-package.json5
2{
3  "dependencies": {
4    "@aspect/jsbridge": "file:./libs/jsbridge.har"
5  }
6}

1constructor(
2  controller: webview.WebviewController,  // WebView 控制器
3  bridgeName?: string,                     // JS 访问的对象名，默认 'jsBridge'
4  handler?: JsBridgeHandler                // 自定义 Handler
5)

1import { WebViewHelper } from '@aspect/jsbridge';

1interface JsBridgeCallback {
2  /**
3   * JS 调用原生方法时触发
4   * @param code 状态码
5   * @param message 消息内容
6   */
7  onJsCall(code: string, message: string): void;
8}

1import { webview } from '@kit.ArkWeb';
2import { JsBridgeManager, JsBridgeCallback } from '@aspect/jsbridge';
3
4@Entry
5@Component
6struct BasicExample {
7  controller: webview.WebviewController = new webview.WebviewController();
8  private jsBridgeManager?: JsBridgeManager;
9
10  build() {
11    Column() {
12      Web({ src: $rawfile("index.html"), controller: this.controller })
13        .javaScriptAccess(true)
14        .domStorageAccess(true)
15        // 在 onControllerAttached 中注册
16        .onControllerAttached(() => {
17          this.jsBridgeManager = new JsBridgeManager(this.controller);
18          this.jsBridgeManager.setCallback({
19            onJsCall: (code: string, message: string) => {
20              console.info(`JS调用: code=${code}, message=${message}`);
21            }
22          });
23          this.jsBridgeManager.register();
24        })
25        // 在 onPageEnd 中刷新（仅首次）
26        .onPageEnd(() => {
27          this.jsBridgeManager?.refreshIfNeeded();
28        })
29    }
30  }
31}

1<button id="callNative">调用原生方法</button>
2<script>
3  document.getElementById('callNative').onclick = () => {
4    window.jsBridge?.js2Native('SUCCESS', JSON.stringify({ action: 'showToast' }));
5  };
6</script>

1import { webview } from '@kit.ArkWeb';
2import { WebViewHelper } from '@aspect/jsbridge';
3
4@Entry
5@Component
6struct WebPageWithPermission {
7  controller: webview.WebviewController = new webview.WebviewController();
8
9  async onPageShow(): Promise<void> {
10    await WebViewHelper.grantPermission(); // 申请相机、麦克风权限
11  }
12
13  build() {
14    Column() {
15      Web({ src: "https://example.com", controller: this.controller })
16        .javaScriptAccess(true)
17        .onPermissionRequest((event) => {
18          WebViewHelper.handlePermissionRequest(event);
19        })
20    }
21  }
22}

1import { webview } from '@kit.ArkWeb';
2import { WebViewHelper } from '@aspect/jsbridge';
3
4@Entry
5@Component
6struct WebPageWithBack {
7  controller: webview.WebviewController = new webview.WebviewController();
8
9  onBackPress(): boolean | void {
10    return WebViewHelper.handleBackPress(this.controller);
11  }
12
13  build() {
14    Column() {
15      Web({ src: $rawfile("index.html"), controller: this.controller })
16        .javaScriptAccess(true)
17    }
18  }
19}