1. Web組件簡(jiǎn)介
本系列的第18篇文章《鴻蒙網(wǎng)絡(luò)編程系列18-Web組件加載網(wǎng)頁(yè)的四種方式示例》中，使用ArkTS語(yǔ)言基于API 9環(huán)境演示了Web組件四種加載網(wǎng)頁(yè)內(nèi)容的方式，其中就包括使用WebviewController的loadData方法直接加載HTML腳本的方式。不過(guò)，目前的倉(cāng)頡版本還不支持loadData方法，因此，本文將基于API 12環(huán)境演示W(wǎng)eb組件加載網(wǎng)頁(yè)的其他三種方式。
2. Web組件加載網(wǎng)頁(yè)演示
本示例運(yùn)行后的頁(yè)面如圖所示：
在這種默認(rèn)的情況下，使用的是加載資源文件的方式，也就是預(yù)先把html文件作為資源文件嵌入到應(yīng)用中，然后在初始化web組件時(shí)作為src屬性傳入：
Web(src: @rawfile("index.html"), controller: controller)
第二種方式是直接加載網(wǎng)址，輸入網(wǎng)址后，單擊網(wǎng)址后面的“加載”按鈕即可進(jìn)行網(wǎng)頁(yè)加載，如圖所示：
第三種方式是加載本地html文件，單擊“選擇”按鈕，選擇本地html文件，如圖所示：
選擇文件后，單擊“完成”按鈕回到主界面，再單擊“加載按鈕”即可加載本地html文件，如圖所示：
3. HWeb組件加載網(wǎng)頁(yè)示例編寫
下面詳細(xì)介紹創(chuàng)建該示例的步驟（確保DevEco Studio已安裝倉(cāng)頡插件）。
步驟1：創(chuàng)建[Cangjie]Empty Ability項(xiàng)目。
步驟2：在module.json5配置文件加上對(duì)權(quán)限的聲明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
這里添加了訪問(wèn)互聯(lián)網(wǎng)的權(quán)限。
步驟3：在build-profile.json5配置文件加上倉(cāng)頡編譯架構(gòu)：
"cangjieOptions": {
"path": "./src/main/cangjie/cjpm.toml",
"abiFilters": ["arm64-v8a", "x86_64"]
}
步驟4：在main_ability.cj文件里添加如下的引用：
import ohos.ability.*
然后定義變量globalContext：
var globalContext: Option<AbilityContext> = Option<AbilityContext>.None
在onCreate函數(shù)里添加如下的代碼：
globalContext = this.context
步驟5：創(chuàng)建index.html文件，并添加如下的代碼：
<!-- index.html -->
<!DOCTYPE html>
<html>
<body style="font-size: large;text-align: center;">
<div style="color:blue">Hello HarmonyOS Next</div>
<div>Load with resource file</div>
</body>
</html>
把index.html文件作為資源文件嵌入到應(yīng)用中：
步驟6：在index.cj文件里添加如下的代碼：
package ohos_app_cangjie_entry
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import std.collection.HashMap
import ohos.net.http.*
import ohos.file_picker.*
import ohos.ability.getStageContext
import ohos.ability.*
import ohos.file_fs.*
import ohos.webview.*
@Entry
@Component
class EntryView {
@State
var title: String = '倉(cāng)頡版Web加載示例';
//要加載的網(wǎng)址
@State
var webUrl: String = "https://******"
//要加載的文件
@State
var loadFileUri: String = ""
let scroller: Scroller = Scroller()
let controller: WebviewController = WebviewController()
func build() {
Row {
Column {
Text(title).fontSize(14).fontWeight(FontWeight.Bold).width(100.percent).textAlign(TextAlign.Center).
padding(10)
Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) {
Text("網(wǎng)址：").fontSize(14)
TextInput(text: webUrl).onChange({
value => webUrl = value
}).width(100).fontSize(11).flexGrow(1)
Button("加載").onClick {
evt => this.controller.loadUrl(this.webUrl);
}.width(70).fontSize(14)
}.width(100.percent).padding(10)
Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) {
Text("文件：").fontSize(14)
TextInput(text: loadFileUri).onChange({
value => loadFileUri = value
}).width(100).fontSize(11).flexGrow(1)
Button("選擇").onClick {
evt => selectLoadFile();
}.width(70).fontSize(14)
Button("加載").onClick {
evt => loadLocalFile()
}.width(70).fontSize(14)
}.width(100.percent).padding(10)
Scroll(scroller) {
Web(src: @rawfile("index.html"), controller: controller).domStorageAccess(true).fileAccess(true).
padding(10).width(100.percent).backgroundColor(0xeeeeee)
}.align(Alignment.Top).backgroundColor(0xeeeeee).height(300).flexGrow(1).scrollable(
ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarWidth(20)
}.width(100.percent).height(100.percent)
}.height(100.percent)
}
//選擇需要加載的文件
func selectLoadFile() {
let option = DocumentSelectOptions(maxSelectNumber: 1, selectMode: DocumentSelectMode.MIXED)
let documentPicker = DocumentViewPicker(globalContext.getOrThrow())
let documentSelectCallback = {
errorCode: Option<AsyncError>, data: Option<Array<String>> => match (errorCode) {
case Some(e) => ()
case _ => match (data) {
case Some(value) => loadFileUri = value[0]
case _ => ()
}
}
}
documentPicker.select(documentSelectCallback, option: option)
}
//加載本地文件
func loadLocalFile() {
let segments = this.loadFileUri.split('/')
//文件名稱
let fileName = segments[segments.size - 1] + ".html"
//計(jì)劃復(fù)制到的目標(biāo)路徑
let realUri = globalContext.getOrThrow().filesDir + "/" + fileName
//復(fù)制選擇的文件到沙箱cache文件夾
let file = FileFs.open(this.loadFileUri);
FileFs.copyFile(file.fd, realUri)
FileFs.close(file);
this.controller.loadUrl("file://${realUri}");
}
}
步驟7：編譯運(yùn)行，可以使用模擬器或者真機(jī)，在當(dāng)前版本下，最好使用真機(jī)。
步驟8：按照本節(jié)第2部分“Web組件加載網(wǎng)頁(yè)演示”操作即可。
4. 代碼分析
在加載本地文件時(shí)，需要復(fù)制本地文件到沙箱目錄，再進(jìn)行加載，加載時(shí)需要注意文件的路徑格式，這里使用的是file前綴，對(duì)應(yīng)代碼如下所示：
func loadLocalFile() {
let segments = this.loadFileUri.split('/')
//文件名稱
let fileName = segments[segments.size - 1] + ".html"
//計(jì)劃復(fù)制到的目標(biāo)路徑
let realUri = globalContext.getOrThrow().filesDir + "/" + fileName
//復(fù)制選擇的文件到沙箱cache文件夾
let file = FileFs.open(this.loadFileUri);
FileFs.copyFile(file.fd, realUri)
FileFs.close(file);
this.controller.loadUrl("file://${realUri}");
}
（本文作者原創(chuàng)，除非明確授權(quán)禁止轉(zhuǎn)載）
本文源碼地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/web/WebDemo4Cj
