1. Web组件简介
在应用界面里嵌入网页是很多快速APP开发使用的方式之一,通过这种方式可以比较好的达到多端兼容的效果,鸿蒙也一样提供了类似的能力,就是基础组件中的Web组件。当然,单纯的靠Web组件也无法实现复杂的功能,还需要对应的控制器WebviewController,两者配合可以达到最佳的控制和显示效果。
2. Web组件及控制器常用方法
web组件及其控制器位于web_webview模块下,使用如下的方式导入:
import web_webview from '@ohos.web.webview';
web_webview模块包括了众多的操作方法,就本文而言,重点需要掌握的是如下三个:
Web组件方法
1)Web(options: { src: ResourceStr, controller: WebviewController | WebController})
创建Web组件实例,其中src是网页资源地址,controller是组件控制器,从API Version 9开始,建议使用WebviewController作为控制器。
WebviewController方法
2)loadUrl(url: string | Resource, headers?: Array<WebHeader>): void
加载指定的url,headers为可选的请求头。
3)loadData(data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string): void
加载指定的数据。
3. Web组件加载网页示例
本示例演示加载网页的四种方式,默认是加载资源文件,运行后的初始界面如下所示:
下面详细介绍创建该应用的步骤。
步骤1:创建Empty Ability项目。
步骤2:在module.json5配置文件加上对权限的声明:
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
这里添加了获取互联网信息的权限。
步骤3:在Index.ets文件里添加如下的代码:
import http from '@ohos.net.http';
import util from '@ohos.util';
import fs from '@ohos.file.fs';
import picker from '@ohos.file.picker';
import systemDateTime from '@ohos.systemDateTime';
import request from '@ohos.request';
import connection from '@ohos.net.connection';
import HashSet from '@ohos.util.HashSet';
import ArrayList from '@ohos.util.ArrayList';
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct Index {
//要加载的网址
@State webUrl: string = "https://www.baidu.com"
//要加载的文件
@State loadFileUri: string = ""
//要加载的内容
@State webContent: string = `<!DOCTYPE html>
<html>
<body style="font-size: large;text-align: center;">
<div>测试加载文本内容!</div>
</body>
</html>`
scroller: Scroller = new Scroller()
contentScroller: Scroller = new Scroller()
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Row() {
Column() {
Text("Web加载示例")
.fontSize(14)
.fontWeight(FontWeight.Bold)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("网址:")
.fontSize(14)
.width(50)
.flexGrow(0)
TextInput({ text: this.webUrl })
.onChange((value) => {
this.webUrl = value
})
.width(110)
.fontSize(11)
.flexGrow(1)
Button("加载")
.onClick(() => {
this.controller.loadUrl(this.webUrl);
})
.width(60)
.fontSize(14)
.flexGrow(0)
}
.width('100%')
.padding(5)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("文件:")
.fontSize(14)
.width(50)
.flexGrow(0)
TextInput({ text: this.loadFileUri })
.onChange((value) => {
this.loadFileUri = value
})
.width(110)
.fontSize(11)
.flexGrow(1)
Button("选择")
.onClick(() => {
this.selectFile()
})
.width(60)
.fontSize(14)
.flexGrow(0)
Button("加载")
.onClick(() => {
this.loadLocalFile()
})
.width(60)
.fontSize(14)
.flexGrow(0)
}
.width('100%')
.padding(5)
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Text("下方输入框的文本内容:")
.fontSize(14)
.width(200)
.flexGrow(0)
Button("加载")
.onClick(() => {
this.controller.loadData(this.webContent, "text/html",
"UTF-8")
})
.width(60)
.fontSize(14)
.flexGrow(0)
}
.width('100%')
.padding(5)
Scroll(this.contentScroller) {
TextArea({ text: this.webContent })
.onChange((value) => {
this.webContent = value
})
.backgroundColor(0xffffee)
.width('100%')
.fontSize(11)
}
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(120)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
Scroll(this.scroller) {
Web({ src: $rawfile("index.html"), controller: this.controller })
.padding(10)
.width('100%')
.backgroundColor(0xeeeeee)
}
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(300)
.flexGrow(1)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.height('100%')
}
.height('100%')
}
//选择文件,为简单起见,选择一个不太大的网页文件
selectFile() {
let documentPicker = new picker.DocumentViewPicker();
documentPicker.select().then((result) => {
if (result.length > 0) {
this.loadFileUri = result[0]
}
}).catch((err) => {
console.error(err.message)
});
}
//加载本地文件
async loadLocalFile() {
let context = getContext(this)
let segments = this.loadFileUri.split('/')
//文件名称
let fileName = segments[segments.length-1] + ".html"
//计划复制到的目标路径
let realUri = context.cacheDir + "/" + fileName
//复制选择的文件到沙箱cache文件夹
try {
let file = await fs.open(this.loadFileUri);
fs.copyFileSync(file.fd, realUri)
this.controller.loadUrl(`file://${realUri}`);
} catch (err) {
console.error(err.message)
}
}
}
步骤4:添加资源文件index.html,路径为src/main/resources/rawfile/index.html,内容如下:
<!-- index.html -->
<!DOCTYPE html>
<html>
<body style="font-size: large;text-align: center;">
<div>Hello HarmonyOS Next</div>
<div>Load with resource file</div>
</body>
</html>
步骤5:编译运行,可以使用模拟器或者真机。
步骤6:如前所示,默认页面是加载资源文件index.html的效果,然后输入在线网站,比如百度的首页,随后单击“加载”按钮,截图如下所示:
这样就演示了加载在线网址的效果。
步骤7:单击“选择”按钮,弹出文件选择窗口,如图所示:
可以选择demo.html,该文件内容如下:
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div style="text-align: center;">测试加载本地文件</div>
<div style="text-align: center;">通过复制本地文件到沙箱实现</div>
</body>
</html>
然后单击“选择”按钮后的“加载”按钮,把选中的文件复制到沙箱中,最后加载这个文件,效果如下所示:
步骤8:最后是直接加载网页内容,在输入框里输入要加载的html,然后单击“加载”按钮,效果如图所示:
这样就完成了Web组件加载网页的应用。
4. 加载功能分析
这四种加载方式中,最复杂的是加载从本机选择的文件,因为文件不在沙箱中,无法直接加载,所以首先把选中的文件复制到沙箱中,然后再从沙箱中加载该文件,实现的代码如下:
//加载本地文件
async loadLocalFile() {
let context = getContext(this)
let segments = this.loadFileUri.split('/')
//文件名称
let fileName = segments[segments.length-1] + ".html"
//计划复制到的目标路径
let realUri = context.cacheDir + "/" + fileName
//复制选择的文件到沙箱cache文件夹
try {
let file = await fs.open(this.loadFileUri);
fs.copyFileSync(file.fd, realUri)
this.controller.loadUrl(`file://${realUri}`);
} catch (err) {
console.error(err.message)
}
}
最后
有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。
点击领取→【纯血版鸿蒙全套最新学习资料】(安全链接,放心点击)希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!
这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、(南向驱动、嵌入式等)鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。
鸿蒙(HarmonyOS NEXT)最新学习路线
有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
- ArkTS语言
- 安装DevEco Studio
- 运用你的第一个ArkTS应用
- ArkUI声明式UI开发
- .……
《鸿蒙开发进阶》
- Stage模型入门
- 网络管理
- 数据管理
- 电话服务
- 分布式应用开发
- 通知与窗口管理
- 多媒体技术
- 安全技能
- 任务管理
- WebGL
- 国际化开发
- 应用测试
- DFX面向未来设计
- 鸿蒙系统移植和裁剪定制
- ……
《鸿蒙进阶实战》
- ArkTS实践
- UIAbility应用
- 网络案例
- ……
大厂面试必问面试题
鸿蒙南向开发技术
鸿蒙APP开发必备
鸿蒙生态应用开发白皮书V2.0PDF
总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。