[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);
    })
  }
}

示意图

相关推荐
奶糖不太甜2 小时前
鸿蒙开发组件问题:方法论与技术探索
harmonyos
鸿蒙小灰2 小时前
鸿蒙开发问题之网络请求库适配
网络协议·harmonyos
HarmonyOS_SDK6 小时前
汽车之家联合HarmonyOS SDK,深度构建鸿蒙生态体系
harmonyos
whysqwhw6 小时前
鸿蒙沉浸式
harmonyos
whysqwhw7 小时前
鸿蒙Stack使用
harmonyos
whysqwhw7 小时前
鸿蒙Flex使用
harmonyos
whysqwhw8 小时前
鸿蒙Row/Column使用
harmonyos
zhanshuo19 小时前
在鸿蒙里优雅地处理网络错误:从 Demo 到实战案例
harmonyos
zhanshuo19 小时前
在鸿蒙中实现深色/浅色模式切换:从原理到可运行 Demo
harmonyos