Arkts web组件的使用

访问在线网页时您需要在module.json5文件中申明网络访问权限:ohos.permission.INTERNET。

加载网页效果无法在预览器中查看,需要在模拟器或者真机中展示项目

Web组件的使用非常简单,只需要ArkTS文件中创建一个Web组件,传入两个参数就可以了。其中src指定引用的网页路径,controller为组件的控制器,通过controller绑定Web组件,用于实现对Web组件的控制

TypeScript 复制代码
// 使用web组件加载网页
import webview from '@ohos.web.webview'
@Entry
@Component
struct WebComp {
  controll:WebviewController = new webview.WebviewController()
  build() {
    Row() {
      Column() {
        Web({
          src:'https://www.bilibili.com/video/BV16X4y1g7wT/?spm_id_from=333.934.0.0',
          controller:this.controll
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

详细使用见官网

Web-ArkTS API参考-HarmonyOS应用开发

相关推荐
程序员Sunday3 小时前
爆肝万字!这应该是全网最全的 Codex 实战教程了
前端·后端·ai编程
aircrushin3 小时前
朋友用trae搭建的工具,解决了旅行拍照共享的大事儿
前端·后端
ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_41:(DOMParser 接口详解)
前端·javascript·ui·html·音视频
光影少年4 小时前
useLayoutEffect 和 useEffect 区别、使用场景
开发语言·前端·javascript
LIO4 小时前
掌握 React useEffect:核心概念、使用技巧与常见陷阱
前端·react.js
XD7429716364 小时前
科技早报晚报|2026年5月12日:GUI Agent、编程会话工作台与 npm 安装门禁,今晚更值得做的 3 个技术机会
前端·科技·npm·供应链安全·ai agent·开发者工具
前端那点事4 小时前
Vue3 新趋势:10个高阶实用操作|性能优化+开发提效+避坑指南
前端·vue.js
small_white_robot4 小时前
idek-2022 web 全wp——持续更新
开发语言·前端·javascript·网络·安全·web安全·网络安全
漫游的渔夫4 小时前
从 if-else 乱麻到状态机:前端开发者该怎么理解多 Agent 协作?
前端·人工智能·typescript
前端那点事4 小时前
90%前端只会皮毛!JSON.parse/stringify高阶用法、数据规则、避坑终极指南
前端·vue.js