[Harmony]WebView基本用法

module.json5中申请网络权限

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET", // 网络权限
        "reason": "$string:internet_reason",
        "usedScene": {
          "abilities": [],
          "when": "always"
        }
      }
    ]
  }
}

{
  "string": [
    {
      "name": "internet_reason",
      "value": "网络访问"
    }
  ]
}

跳转WebView时传值

Text() {
  Span("我已阅读并同意")
    .fontColor($r('app.color.mf_base_333333'))
    .fontSize(15)
  Span("《用户隐私协议》")
    .fontColor($r('app.color.mf_base_yellow'))
    .fontSize(15)
    .onClick(() => this.userPrivacyPolicy())
}
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)
.layoutWeight(1)  

/// 用户隐私协议
private userPrivacyPolicy() {
  router.pushUrl({
    url: 'pages/features/protocol/MFProtocolView',
    params: {
      webUrl: 'https://www.baidu.com',
      title: '隐私协议'
    }
  })
}

WebView

import { router } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';

interface MFProtocolParams {
  webUrl: string;
  title?: string;
}

@Entry
@Component
struct MFProtocolView {
  @State webUrl: string = ''; // 接收的网页地址
  @State title: string = '协议详情'; // 导航栏标题
  private controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 在aboutToAppear生命周期中读取路由参数
    const params: MFProtocolParams = router.getParams() as MFProtocolParams;
    if (params) {
      this.webUrl = params.webUrl || 'about:blank'; // 默认为空页面
      this.title = params.title || this.title; // 默认为'协议详情'
    }
  }

  build() {
    Column() {
      // 导航栏
      Row({ space: 8 }) {
        Image($r('app.media.icon_base_back')) // 返回图标
          .objectFit(ImageFit.Contain)
          .width(24)
          .height(24)
          .onClick(() => {
            router.back(); // 返回上一页
          })

        Text(this.title) // 标题
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .padding(12)
      .backgroundColor('#F1F3F5')

      // 必须传递完整WebOptions参数
      Web({
        src: this.webUrl,
        controller: this.controller 
      })
        .onPageBegin((event) => {
          console.log('开始加载:' + event.url);
        })
    }
    .width('100%')
    .height('100%')
    .onAppear(()=>{
      console.log('onAppear:' + this.webUrl);
    })
  }
}

示意图