零基础学 ArkUI24：手把手教你开发一个简易浏览器 App

🌐 零基础学 ArkUI24：手把手教你开发一个简易浏览器 App

博主说：手机浏览器是我们每天打开最多次的应用之一。你有没有想过——在 HarmonyOS 上实现一个简易浏览器其实只需要几十行代码？ArkUI 内置了强大的Web 组件，可以轻松加载网页、执行 JavaScript、处理页面加载事件。今天我们就用 Web 组件做一款支持导航栏、前进后退、加载进度、书签管理的简易浏览器。

📱 应用场景

在 App 内嵌网页查看内容、快速访问常用网站、开发 Hybrid 应用时调试前端页面……简易浏览器的应用场景非常广泛。我们要开发的浏览器会实现：

• 地址栏输入 URL 并加载
• 加载进度条
• 前进 / 后退 / 刷新
• 网页标题显示
• 书签管理（收藏常用网站）
• 加载状态提示（加载中 / 加载失败）
• 全屏模式（扩展）

⚙️ 运行环境要求

🛠️ 实战：从零搭建简易浏览器

Step 1：认识 ArkUI 的 Web 组件

Web组件是 ArkUI 内置的网页渲染引擎，基于 Chromium 内核：

importwebviewfrom'@ohos.web.webview';// 在 build 中使用 Web 组件Web({src:'https://www.example.com',controller:this.controller}).width('100%').height('100%').javaScriptAccess(true)// 允许 JS.domStorageAccess(true)// 允许 DOM 存储.onPageBegin((url)=>{/* 开始加载 */}).onPageEnd((url)=>{/* 加载完成 */}).onErrorReceive((err)=>{/* 加载出错 */})

Step 2：浏览器数据结构设计

// 书签数据结构interfaceBookmark{id:string;title:string;url:string;icon:string;// favicon}// WebView 控制器controller:webview.WebviewController=newwebview.WebviewController();// 浏览历史（用于前进/后退判断）@StatecanGoBack:boolean=false;@StatecanGoForward:boolean=false;

Step 3：完整代码

// pages/Index.ets — 简易浏览器主页面importwebviewfrom'@ohos.web.webview';interfaceBookmark{id:string;title:string;url:string;}@Entry@Componentstruct SimpleBrowser{// ======== 状态变量 ========@StateurlInput:string='https://www.example.com';@StatepageTitle:string='';@StateisLoading:boolean=false;@StateloadProgress:number=0;@StatecanGoBack:boolean=false;@StatecanGoForward:boolean=false;@StateshowBookmarks:boolean=false;@Statebookmarks:Bookmark[]=[{id:'1',title:'HarmonyOS 开发文档',url:'https://developer.harmonyos.com'},{id:'2',title:'华为开发者社区',url:'https://developer.huawei.com'},{id:'3',title:'CSDN',url:'https://www.csdn.net'},];privatecontroller:webview.WebviewController=newwebview.WebviewController();privatewebviewRef:string='webview';// ======== 页面生命周期 ========aboutToAppear(){// 默认加载首页this.loadUrl(this.urlInput);}// ======== 加载 URL ========loadUrl(url:string){if(!url.startsWith('http://')&&!url.startsWith('https://')){url='https://'+url;}this.urlInput=url;this.isLoading=true;this.loadProgress=0;this.controller.loadUrl(url);}// ======== 导航控制 ========goBack(){if(this.controller.accessBackward()){this.controller.backward();}}goForward(){if(this.controller.accessForward()){this.controller.forward();}}refresh(){this.controller.refresh();}// ======== 添加书签 ========addBookmark(){constnewBookmark:Bookmark={id:Date.now().toString(),title:this.pageTitle||this.urlInput,url:this.urlInput};// 去重constexists=this.bookmarks.find(b=>b.url===newBookmark.url);if(!exists){this.bookmarks.push(newBookmark);}}// ======== 删除书签 ========deleteBookmark(bm:Bookmark){constidx=this.bookmarks.indexOf(bm);if(idx>-1)this.bookmarks.splice(idx,1);}// ======== UI 构建 ========build(){Column(){// ---- 地址栏 + 导航按钮 ----Row(){Button('<').fontSize(20).backgroundColor('transparent').fontColor(this.canGoBack?'#007AFF':'#ccc').enabled(this.canGoBack).onClick(()=>{this.goBack();})Button('>').fontSize(20).backgroundColor('transparent').fontColor(this.canGoForward?'#007AFF':'#ccc').enabled(this.canGoForward).onClick(()=>{this.goForward();})TextInput({placeholder:'输入网址...',text:this.urlInput}).layoutWeight(1).height(36).backgroundColor('#F0F0F0').borderRadius(18).padding({left:12}).onSubmit((val:string)=>{this.loadUrl(val);})Button('↻').fontSize(18).backgroundColor('transparent').fontColor('#007AFF').onClick(()=>{this.refresh();})Button('🔖').fontSize(16).backgroundColor('transparent').onClick(()=>{this.addBookmark();})}.width('100%').padding({top:8,bottom:4,left:8,right:8}).backgroundColor('#F8F8F8')// ---- 加载进度条 ----if(this.isLoading){Progress({value:this.loadProgress,total:100,type:ProgressType.Linear}).width('100%').height(3).color('#007AFF').value(this.loadProgress)}// ---- 书签收藏栏 ----if(this.showBookmarks){Column(){Row(){Text('🔖 书签').fontSize(16).fontWeight(FontWeight.Bold)Button('✕').fontSize(14).backgroundColor('transparent').fontColor('#999').onClick(()=>{this.showBookmarks=false;})}.width('100%').justifyContent(FlexAlign.SpaceBetween)List(){ForEach(this.bookmarks,(bm:Bookmark)=>{ListItem(){Row(){Text('📄').fontSize(20)Column(){Text(bm.title).fontSize(14).fontWeight(FontWeight.Bold)Text(bm.url).fontSize(11).fontColor('#999').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1)}.layoutWeight(1).margin({left:8})Button('✕').fontSize(12).backgroundColor('transparent').fontColor('#FF3B30').onClick(()=>{this.deleteBookmark(bm);})}.padding(10).width('100%')}.onClick(()=>{this.loadUrl(bm.url);this.showBookmarks=false;})},(bm:Bookmark)=>bm.id)}.height(200)}.width('100%').backgroundColor('#fff').shadow({radius:4,color:'#20000000',offsetY:2})}// ---- 网页内容区域 ----Web({src:this.urlInput,controller:this.controller}).width('100%').layoutWeight(1).javaScriptAccess(true).domStorageAccess(true).onPageBegin(()=>{this.isLoading=true;this.loadProgress=0;}).onPageEnd((event)=>{this.isLoading=false;this.loadProgress=100;this.pageTitle=this.controller.title();// 更新前进/后退状态this.canGoBack=this.controller.accessBackward();this.canGoForward=this.controller.accessForward();}).onProgressChange((event)=>{this.loadProgress=event.newProgress;}).onErrorReceive((event)=>{this.isLoading=false;console.error('页面加载失败:',event.request.getRequestUrl());}).onTitleReceive((event)=>{this.pageTitle=event.title;})// ---- 底部状态栏 ----Row(){if(this.isLoading){Text('加载中...').fontSize(12).fontColor('#007AFF')}else{Text(this.pageTitle||this.urlInput).fontSize(12).fontColor('#999').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1)}Text('🔖').fontSize(14).onClick(()=>{this.showBookmarks=!this.showBookmarks;})}.width('100%').padding({left:16,right:16,top:6,bottom:6}).backgroundColor('#F0F0F0').justifyContent(FlexAlign.SpaceBetween)}.width('100%').height('100%').backgroundColor('#FFFFFF')}}

📚 核心知识点深度解析

1. Web 组件的核心属性

2. WebviewController 控制方法

controller.loadUrl(url)// 加载 URLcontroller.backward()// 后退controller.forward()// 前进controller.refresh()// 刷新controller.title()// 获取页面标题controller.accessBackward()// 能否后退controller.accessForward()// 能否前进

3. 浏览器状态机

用户输入 URL → loadUrl() → 开始加载（isLoading=true） ↓ onProgressChange → 更新进度条 ↓ onPageEnd → 标题更新 + 前进/后退状态更新 ↓ 加载完成（isLoading=false）

⚠️ 避坑指南

🔥 最佳实践

1. URL 自动补全：用户输入不带http(s)://时自动补全，减少输入错误
2. 加载进度条：用 Linear Progress 给用户视觉反馈，提升体验
3. 前进/后退状态灰化：不能前进时按钮用灰色#ccc并enabled(false)
4. 书签去重：添加前检查 URL 是否已存在
5. 错误处理：onErrorReceive中显示友好提示而非直接白屏
6. 地址栏实时显示：单页应用（SPA）URL 变化时，用 JavaScript 桥接更新地址栏

🚀 扩展挑战

1. 多标签页：支持多个 Web 实例，通过 Tab 切换
2. 无痕模式：加载时使用incognitoMode(true)
3. 广告过滤：通过onInterceptRequest拦截广告请求
4. Javascript 桥接：通过javaScriptProxy()实现 App 与网页双向通信
5. 下载管理：监听onDownloadStart实现文件下载
6. 暗黑模式：通过 CSS 注入prefers-color-scheme: dark

运行结果完整截图：

官方文档：HarmonyOS 应用开发文档

• 开发者社区：华为开发者论坛
• 欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net/