HarmonyOS鸿蒙Next中webview.WebviewController传递

HarmonyOS鸿蒙Next中webview.WebviewController传递

问题描述

在父组件中使用 Web 组件，包含一个 webview.WebviewController。父组件的代码如下：

父组件：InvitationPage

// 邀请页面
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<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: () => {
                    // todo 点击之后弹出分享框和刷新等
                    this.clickButton();
                }
            });

            Web({
                src: AppData.WEB_HOST + "hd/code/index.html",
                controller: this.controller
            });

            if (this.isShowBottomLine) {
                MoreOptionPage({ webViewController: this.controller });
            }
        }.height('100%');
    }
}

子组件：MoreOptionPage

在子组件 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': 'https://www.12377.cn/' };
                    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 的方法时，出现如下错误：

Device info: HUAWEI Mate 60 Pro
Build info: ALN-AL00 5.0.0.31(SP66DEVC00E32R4P7log)
Fingerprint: 655e50ebddb96cbb690df774c292f55deddb7824f98ba4b5144ae9e5568a71f4
Module name: jinhu.app.jsbc.hm
Version: 1.84
VersionCode: 20231220
PreInstalled: No
Foreground: Yes
Pid: 45297
Uid: 20020133

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)

解决方案

1. 确保 WebviewController 关联到 Web 组件：

   • 确保在父组件中创建的 webview.WebviewController 是在 Web 组件的上下文中使用的。

2. 检查组件的生命周期：

   • 确保在调用 webViewController 的方法时，MoreOptionPage 组件已经完全初始化。

3. 调试和日志：

   • 在调用 this.webViewController.getUrl() 之前，添加日志以确认 webViewController 是否已正确传递和初始化。

4. 文档和示例：

   • 查阅相关文档以确保使用的 API 和方法符合预期。