1. Web組件簡介
本系列的第18篇文章《鴻蒙網(wǎng)絡(luò)編程系列18-Web組件加載網(wǎng)頁的四種方式示例》中，使用ArkTS語言基于API 9環(huán)境演示了Web組件四種加載網(wǎng)頁內(nèi)容的方式芽世，其中就包括使用WebviewController的loadData方法直接加載HTML腳本的方式聋呢。不過，目前的倉頡版本還不支持loadData方法触机，因此帚戳，本文將基于API 12環(huán)境演示W(wǎng)eb組件加載網(wǎng)頁的其他三種方式玷或。
2. Web組件加載網(wǎng)頁演示
本示例運行后的頁面如圖所示：
在這種默認的情況下，使用的是加載資源文件的方式片任，也就是預先把html文件作為資源文件嵌入到應(yīng)用中偏友，然后在初始化web組件時作為src屬性傳入：
Web(src: @rawfile("index.html"), controller: controller)
第二種方式是直接加載網(wǎng)址，輸入網(wǎng)址后蚂踊，單擊網(wǎng)址后面的“加載”按鈕即可進行網(wǎng)頁加載约谈，如圖所示：
第三種方式是加載本地html文件，單擊“選擇”按鈕犁钟，選擇本地html文件棱诱，如圖所示：
選擇文件后，單擊“完成”按鈕回到主界面涝动，再單擊“加載按鈕”即可加載本地html文件迈勋，如圖所示：
3. HWeb組件加載網(wǎng)頁示例編寫
下面詳細介紹創(chuàng)建該示例的步驟（確保DevEco Studio已安裝倉頡插件）。
步驟1：創(chuàng)建[Cangjie]Empty Ability項目醋粟。
步驟2：在module.json5配置文件加上對權(quán)限的聲明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
這里添加了訪問互聯(lián)網(wǎng)的權(quán)限靡菇。
步驟3：在build-profile.json5配置文件加上倉頡編譯架構(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 = '倉頡版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"
//計劃復制到的目標路徑
let realUri = globalContext.getOrThrow().filesDir + "/" + fileName
//復制選擇的文件到沙箱cache文件夾
let file = FileFs.open(this.loadFileUri);
FileFs.copyFile(file.fd, realUri)
FileFs.close(file);
this.controller.loadUrl("file://${realUri}");
}
}
步驟7：編譯運行米愿，可以使用模擬器或者真機厦凤，在當前版本下，最好使用真機育苟。
步驟8：按照本節(jié)第2部分“Web組件加載網(wǎng)頁演示”操作即可较鼓。
4. 代碼分析
在加載本地文件時，需要復制本地文件到沙箱目錄违柏，再進行加載博烂，加載時需要注意文件的路徑格式，這里使用的是file前綴漱竖，對應(yīng)代碼如下所示：
func loadLocalFile() {
let segments = this.loadFileUri.split('/')
//文件名稱
let fileName = segments[segments.size - 1] + ".html"
//計劃復制到的目標路徑
let realUri = globalContext.getOrThrow().filesDir + "/" + fileName
//復制選擇的文件到沙箱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
