HarmonyOS ArkWeb 系列之组件四种加载方式：loadUrl、loadData、rawfile 和 resource 协议完全指南

文章目录先把四种方式整体过一遍方式一加载在线 URL方式二rawfile — 加载本地 HTML 文件方式三resource 协议 — 动态加载本地资源方式四loadData — 直接渲染 HTML 字符串流程图四种加载方式对比加载富文本数据loadRichText加载后动态切换页面选哪种方式Web 组件怎么显示内容说白了就一件事告诉它去哪里拿页面。HarmonyOS ArkWeb 提供了四种截然不同的加载方式分别适合不同场景。搞清楚这四种方式开发体验直接上一个台阶。先把四种方式整体过一遍方式典型用法适合场景在线 URLWeb({ src: https://... })加载网络页面rawfileWeb({ src: $rawfile(index.html) })加载本地 HTML 文件resource 协议Web({ src: resource://rawfile/index.html })动态切换本地资源loadDatacontroller.loadData(htmlStr, ...)直接渲染 HTML 字符串下面逐一拆解。方式一加载在线 URL最基础的用法直接传网址import{webview}fromkit.ArkWeb;import{BusinessError}fromkit.BasicServicesKit;EntryComponentstruct LoadUrlPage{controller:webview.WebviewControllernewwebview.WebviewController();build(){Column(){Button(跳转到 example1.com).onClick((){try{// 页面已经显示后用 loadUrl 切换到新地址this.controller.loadUrl(https://www.example1.com);}catch(error){console.error(ErrorCode:${(errorasBusinessError).code}, Message:${(errorasBusinessError).message});}})// 组件创建时先加载这个地址Web({src:https://www.example.com,controller:this.controller}).width(100%).height(100%)}}}几个要注意的点Web({ src })里的地址是组件初始加载的页面要切换页面调controller.loadUrl()不要直接修改 srchttp 地址需要在module.json5里申请网络权限ohos.permission.INTERNET方式二rawfile — 加载本地 HTML 文件把 HTML 文件放在src/main/resources/rawfile/目录下用$rawfile()引用import{webview}fromkit.ArkWeb;EntryComponentstruct RawfilePage{controller:webview.WebviewControllernewwebview.WebviewController();build(){Column(){// $rawfile(index.html) 指向 src/main/resources/rawfile/index.htmlWeb({src:$rawfile(index.html),controller:this.controller}).width(100%).height(100%)}}}rawfile 里的 HTML 可以正常引用同目录下的 CSS、JS、图片!-- src/main/resources/rawfile/index.html --!DOCTYPEhtmlhtmlheadlinkrelstylesheethrefstyle.css/headbodyh1本地页面/h1scriptsrcapp.js/script/body/html方式三resource 协议 — 动态加载本地资源$rawfile()是编译期静态引用如果你想运行时动态指定本地文件路径就用resource://rawfile/协议import{webview}fromkit.ArkWeb;import{BusinessError}fromkit.BasicServicesKit;EntryComponentstruct ResourceLoadPage{controller:webview.WebviewControllernewwebview.WebviewController();build(){Column(){Button(加载 index1.html).onClick((){try{// resource://rawfile/ 后面跟文件名运行时动态指定this.controller.loadUrl(resource://rawfile/index1.html);}catch(error){console.error(ErrorCode:${error.code}, Message:${error.message});}})// 初始加载 index.htmlWeb({src:resource://rawfile/index.html,controller:this.controller}).width(100%).height(100%)}}}resource://rawfile/和$rawfile()指向同一个目录区别是前者是字符串可以拼接、动态构造。方式四loadData — 直接渲染 HTML 字符串不需要任何文件直接把 HTML 内容当字符串传进去渲染import{webview}fromkit.ArkWeb;import{BusinessError}fromkit.BasicServicesKit;EntryComponentstruct LoadDataPage{controller:webview.WebviewControllernewwebview.WebviewController();// 要渲染的 HTML 内容StatehtmlContent:string!DOCTYPE htmlhtmlheadtitle动态内容/title/headbodyh1 stylecolor: #007AFF;这是动态生成的内容/h1p无需任何文件直接渲染字符串/p/body/html;build(){Column(){Button(刷新内容).onClick((){try{this.controller.loadData(this.htmlContent,text/html,// mimeTypeUTF-8// encoding);}catch(error){console.error(ErrorCode:${(errorasBusinessError).code}, Message:${(errorasBusinessError).message});}})Web({src:about:blank,controller:this.controller}).width(100%).height(100%)}}}loadData非常适合展示用户生成的富文本内容帖子、文章详情渲染模板 数据拼接出的动态页面在不依赖网络的情况下显示格式化内容流程图四种加载方式对比加载富文本数据loadRichText如果只是展示纯 HTML 片段还有个更简单的方式loadRichText不需要完整的 HTML 文档结构import{webview}fromkit.ArkWeb;import{BusinessError}fromkit.BasicServicesKit;EntryComponentstruct RichTextPage{controller:webview.WebviewControllernewwebview.WebviewController();build(){Column(){Button(加载富文本).onClick((){try{// 直接传 HTML 片段不需要 htmlbody 等标签this.controller.loadRichText(h2标题/h2p正文内容b加粗/bi斜体/i/p);}catch(error){console.error(ErrorCode:${(errorasBusinessError).code}, Message:${(errorasBusinessError).message});}})Web({src:$rawfile(index.html),controller:this.controller}).width(100%).height(100%)}}}加载后动态切换页面加载完成后可以在onPageEnd里做后续操作。比如页面 A 加载完了自动预加载页面 Bimport{webview}fromkit.ArkWeb;EntryComponentstruct AutoNavigatePage{controller:webview.WebviewControllernewwebview.WebviewController();build(){Column(){Web({src:https://www.example.com,controller:this.controller}).onPageEnd((event){if(event){console.info(当前页加载完成:,event.url);// 在这里可以执行跳转、注入脚本等操作}}).width(100%).height(100%)}}}选哪种方式纯展示网络内容→ 在线 URLApp 内嵌静态页面帮助文档、协议页面→ rawfile根据用户行为动态切换本地页→ resource 协议渲染动态数据API 返回的富文本、模板页→ loadData / loadRichText四种方式没有高下之分选对场景就好。