[Harmony]WebView基本用法

module.json5中申请网络权限

TypeScript 复制代码
{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET", // 网络权限
        "reason": "$string:internet_reason",
        "usedScene": {
          "abilities": [],
          "when": "always"
        }
      }
    ]
  }
}
javascript 复制代码
{
  "string": [
    {
      "name": "internet_reason",
      "value": "网络访问"
    }
  ]
}

跳转WebView时传值

TypeScript 复制代码
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

TypeScript 复制代码
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);
    })
  }
}

示意图

相关推荐
生如夏花℡1 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq95271 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹42 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界14 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
阿巴~阿巴~16 小时前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos
iMerryou17 小时前
鸿蒙的动态渐变背景实现
harmonyos
Keya20 小时前
在HarmonyOS(鸿蒙)中H5页面中的视频不会自动播放
app·harmonyos·arkts
HMS Core1 天前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
人工智能·游戏·harmonyos
儿歌八万首1 天前
HarmonyOS中各种动画的使用介绍
华为·harmonyos·arkts·arkui
dilvx1 天前
配置鸿蒙 fastboot
华为·harmonyos