元服务H5调用ArkTS页面方法并返回结果

问题现象

元服务Web组件AtomicServiceEnhancedWeb不支持registerJavaScriptProxy、runJavaScript等方法，元服务H5页面如何调用ArkTS页面方法并返回结果？

背景知识

AtomicServiceEnhancedWeb是AtomicServiceWeb的增强版，为开发者提供Web页面加载、页面交互、更多H5高阶开放能力等，保障开发者在H5混合ArkTS开发的场景有更加连续的体验。

解决方案

H5页面可以通过路由跳转到在ArkTS页面，执行ArkTS页面方法，支持传递参数并返回结果。

使用AtomicServiceEnhancedWeb组件之前需要完成开发准备，具体请参照AtomicServiceEnhancedWeb组件开发指南。

在H5中通过has.navPathStack.pushPath跳转到ArkTS页面，并通过param传递参数，在onPop中接收ArkTS页面返回的结果。

<!--src/main/resources/rawfile/web.html-->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
    body { padding-left: 30px; }
    h1 { font-size: 100px; }
    p { font-size: 50px; }
    .button { font-size: 80px; margin: 8px 0px; padding: 8px 15px; border-radius: 10px; color: #fff; background-color: #007bff; border-color: #007bff; border: 1px solid transparent; }
    .button_error { color: #fff; background-color: #dc3545; border-color: #dc3545; }
</style>
<body>
<h1>H5 Page</h1>
<br/>
<button type="button" class="button" onclick="pushPath('AtomicPage', 'params from H5')">H5传递参数</button>
<p id="demo"></p>
<script src="../dist/aseweb-sdk.umd.js"></script>
<script>
    function pushPath(name, param, animated, onPop) {
        has.navPathStack.pushPath({
            name: name,
            param: param,
            animated: animated,
            onPop: event => {
                document.getElementById("demo").innerText = event?.result
                console.info("pushPath onPop", JSON.stringify(event))
            },
            callback: (err, res) => commonCallback('pushPath', err, res)
        });
    }
</script>
</body>
</html>

在ArkTS页面中，通过pop弹出路由栈栈顶元素，并触发onPop回调传入页面处理结果。

import { AtomicServiceEnhancedWeb, AtomicServiceEnhancedWebController } from '@atomicservice/ascfapi';

@Entry
@Component
struct Index {
  navPathStack: NavPathStack = new NavPathStack();

  @Builder
  NavPathStackComponent(name: string, page: string): void {
    Button(name)
      .type(ButtonType.Capsule)
      .width('60%')
      .margin({
        top: 50
      })
      .onClick(() => {
        this.navPathStack.pushPath({ name: page });
      });
  }

  @Builder
  pageMap(name: string) {
    if (name === 'AtomicPage') {
      AtomicPage();
    }
  }

  build() {
    Navigation(this.navPathStack) {
      Row() {
        Column() {
          this.NavPathStackComponent('AtomicPage', 'AtomicPage');
        }.width('100%');
      }.height('100%');
    }
    .title('元服务页面与H5页面交互')
    .navDestination(this.pageMap);
  }
}

@Component
struct AtomicPage {
  @State src: ResourceStr = 'resource://rawfile/web.html';
  @State param: object | string = '';
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  navPathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      if (this.param) {
        Column() {
          Text('Atomic Page')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 20 });

          Text(`接收H5页面传递参数：${this.param}`);
        }
        .width('100%')
        .onClick(() => {
          // 调用ArkTS页面的方法，并将结果传递给H5
          this.navPathStack.pop('result from AtomicPage', false);
        });
      } else {
        AtomicServiceEnhancedWeb({
          src: this.src,
          navPathStack: this.navPathStack,
          controller: this.controller
        });
      }
    }
    .onReady((context: NavDestinationContext) => {
      this.navPathStack = context.pathStack;
      this.param = context.pathInfo?.param as string;
    });
  }
}