1. Web組件簡介
在應(yīng)用界面里嵌入網(wǎng)頁是很多快速APP開發(fā)使用的方式之一，通過這種方式可以比較好的達(dá)到多端兼容的效果，鴻蒙也一樣提供了類似的能力，就是基礎(chǔ)組件中的Web組件。當(dāng)然，單純的靠Web組件也無法實(shí)現(xiàn)復(fù)雜的功能，還需要對應(yīng)的控制器WebviewController，兩者配合可以達(dá)到最佳的控制和顯示效果。
2. Web組件及控制器常用方法
web組件及其控制器位于web_webview模塊下，使用如下的方式導(dǎo)入：
import web_webview from '@ohos.web.webview';
web_webview模塊包括了眾多的操作方法，就本文而言，重點(diǎn)需要掌握的是如下三個：
Web組件方法
1）Web(options: { src: ResourceStr, controller: WebviewController | WebController})
創(chuàng)建Web組件實(shí)例，其中src是網(wǎng)頁資源地址，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
加載指定的數(shù)據(jù)。
3. Web組件加載網(wǎng)頁示例
本示例演示加載網(wǎng)頁的四種方式，默認(rèn)是加載資源文件，運(yùn)行后的初始界面如下所示：
下面詳細(xì)介紹創(chuàng)建該應(yīng)用的步驟。
步驟1：創(chuàng)建Empty Ability項(xiàng)目。
步驟2：在module.json5配置文件加上對權(quán)限的聲明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
這里添加了獲取互聯(lián)網(wǎng)信息的權(quán)限。
步驟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 {
//要加載的網(wǎng)址
@State webUrl: string = "https://www.baidu.com"
//要加載的文件
@State loadFileUri: string = ""
//要加載的內(nèi)容
@State webContent: string = `<!DOCTYPE html>
<html>
<body style="font-size: large;text-align: center;">
<div>測試加載文本內(nèi)容!</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("網(wǎng)址：")
.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("下方輸入框的文本內(nèi)容：")
.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%')
}
//選擇文件，為簡單起見，選擇一個不太大的網(wǎng)頁文件
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"
//計(jì)劃復(fù)制到的目標(biāo)路徑
let realUri = context.cacheDir + "/" + fileName
//復(fù)制選擇的文件到沙箱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，內(nèi)容如下：
<!-- 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：編譯運(yùn)行，可以使用模擬器或者真機(jī)。
步驟6：如前所示，默認(rèn)頁面是加載資源文件index.html的效果，然后輸入在線網(wǎng)站，比如百度的首頁，隨后單擊“加載”按鈕，截圖如下所示：
這樣就演示了加載在線網(wǎng)址的效果。
步驟7：單擊“選擇”按鈕，彈出文件選擇窗口，如圖所示：
可以選擇demo.html，該文件內(nèi)容如下：
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div style="text-align: center;">測試加載本地文件</div>
<div style="text-align: center;">通過復(fù)制本地文件到沙箱實(shí)現(xiàn)</div>
</body>
</html>
然后單擊“選擇”按鈕后的“加載”按鈕，把選中的文件復(fù)制到沙箱中，最后加載這個文件，效果如下所示：
步驟8：最后是直接加載網(wǎng)頁內(nèi)容，在輸入框里輸入要加載的html，然后單擊“加載”按鈕，效果如圖所示：
這樣就完成了Web組件加載網(wǎng)頁的應(yīng)用。
4. 加載功能分析
這四種加載方式中，最復(fù)雜的是加載從本機(jī)選擇的文件，因?yàn)槲募辉谏诚渲校瑹o法直接加載，所以首先把選中的文件復(fù)制到沙箱中，然后再從沙箱中加載該文件，實(shí)現(xiàn)的代碼如下：
//加載本地文件
async loadLocalFile() {
let context = getContext(this)
let segments = this.loadFileUri.split('/')
//文件名稱
let fileName = segments[segments.length-1] + ".html"
//計(jì)劃復(fù)制到的目標(biāo)路徑
let realUri = context.cacheDir + "/" + fileName
//復(fù)制選擇的文件到沙箱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)
}
}
（本文作者原創(chuàng)，除非明確授權(quán)禁止轉(zhuǎn)載）
本文源碼地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/web/WebDemo
本系列源碼地址：
