HarmonyOS webview.WebviewController传递？

Question

在父组件中使用web组件，有一个webview.WebviewController，父组件的代码如下：

//邀请页面
import { MoreOptionPage } from './MoreOptionPage'
import { UserCollectionBar } from './UserCollectionBar'
import { webview } from '@kit.ArkWeb'
import { AppData } from '@ohos/applib'

@Entry({ routeName: 'InvitationPage' })
@Component
export struct InvitationPage {
  @State rightText: string = '...'
  @State title: string = '邀请您下载app'
  @State currentTabIndex: number = 0
  // @State datas: Array<VOJSCollectChildBean> = new Array
  @State datas: Array<string> = ['测试1', '测试2', '测试3', '测试4']
  @State isInDeleteMode: boolean = false
  @State isSelectAll: boolean = false // 删除页面是否点击了全选
  private tabsController: TabsController = new TabsController()
  @State isShowBottomLine: boolean = false;
  controller: webview.WebviewController = new webview.WebviewController();
  clickButton() {
    this.isShowBottomLine = !this.isShowBottomLine
  }
  build() {
    Column() {
      UserCollectionBar({
        title: this.title,
        isInDeleteMode: this.isInDeleteMode,
        rightBtnText: this.rightText,
        rightBtnAction: () => {
          this.clickButton()
        }
      })
      Web({ src: AppData.WEB_HOST + "hd/code/index.html", controller: this.controller })
      if (this.isShowBottomLine) {
        MoreOptionPage({ webViewController: this.controller })
      }
    }
    .height('100%')
  }
}

在其子组件MoreoptionPage中，需要将父组件的controller传递过来，用来控制web页面的刷新和获取链接地址，子组件的代码如下:

//H5 页面点击右上角出现的更多分享按钮
import { promptAction } from '@kit.ArkUI';
import { RouterPath, RouterUtils } from '@ohos/applib';
import { webview } from '@kit.ArkWeb';

@Component
export struct MoreOptionPage {
  @State customDialogComponentId: number = 0;
  @Prop webViewController: webview.WebviewController

  aboutToAppear(): void {
    this.openDialog()
  }

  @Builder
  MoreOptionBar() {
    Column({ space: 40 }) {
      Row() {
        Column() { //刷新
          Image($r('sys.media.save_button_picture')).height(30)
          Text('刷新')
        }.height(50).onClick(() => {
          //todo刷新
          this.webViewController.refresh()
          promptAction.closeCustomDialog(this.customDialogComponentId)
        })

        Column() {
          Image($r('sys.media.save_button_picture')).height(30)
          Text('复制链接')
        }.height(50)
        .onClick(() => {
          //todo复制链接
          let url = this.webViewController.getUrl()
          console.log('获取到的链接是:', url)
          promptAction.closeCustomDialog(this.customDialogComponentId)
        })

        Column() {
          Image($r('sys.media.save_button_picture')).height(30)
          Text('举报')
        }.height(50).onClick(() => {
          //todo举报
          const params: Record<string, string> = { 'url': 'xxx' }
          RouterUtils.pushNamedRoute(RouterPath.WebPage, params)
          promptAction.closeCustomDialog(this.customDialogComponentId)

        })
      }.padding(20)
      .width('100%')
      .height(60)
      .justifyContent(FlexAlign.Start)
      Row() {
        Text('取消').fontSize(25).margin({ bottom: 45 })
      }.onClick(() => {
        promptAction.closeCustomDialog(this.customDialogComponentId)
      })
      .justifyContent(FlexAlign.Center)
      .height(45)
      .width('100%')
    }.height(130)

  }

  public openDialog() {
    promptAction.openCustomDialog({
      builder: () => {
        this.MoreOptionBar()
      },
      offset: { dx: 0, dy: 26 },
      transition: TransitionEffect.move(TransitionEdge.BOTTOM),
      alignment: DialogAlignment.Bottom,
      cornerRadius: 0,
      width: '100%',
      onWillAppear: (() => {
      }),
    }).then((dialogId: number) => {
      this.customDialogComponentId = dialogId
      console.log('DialogId Is', this.customDialogComponentId);
    })
  }
  build() {
    Column() {
    }
    .height('100%')
  }
}

但是在调用controller的方法的时候，会有如下的报错：

Reason:Error
Error name:Error
Error message:Init error. The WebviewController must be associated with a Web component
Error code:17100001
SourceCode:
  let url = this.webViewController.getUrl();
^
Stacktrace:
  at anonymous (modules/usercenter/src/main/ets/components/pages/MoreOptionPage.ets:37:21)

Answer 1

错误码17100001 说明WebviewController没有和具体的Web组件关联，一个WebviewController对象只能控制一个Web组件。

详细请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5\#webviewcontroller子组件webViewController用@Prop装饰，父组件controller就要用@State装饰，没有装饰，值传不过去，没有绑定上，详细请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-prop-V5\#父组件state到子组件prop简单数据类型同步