淺談ArkUI之Web組件的基礎(chǔ)用法
想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：
最近研究了ArkUI中的一些常用組件，其中Web組件是很常用且相對(duì)獨(dú)立的一種組件。本文總結(jié)了Web組件的常用函數(shù)，以及基本用法。先來(lái)一個(gè)AI畫(huà)的Web組件助助興（好吧，不能說(shuō)毫無(wú)關(guān)系，只能說(shuō)一點(diǎn)也不像）：
在ArkUI中，Web組件用于顯示W(wǎng)eb網(wǎng)頁(yè)，可以理解為一個(gè)嵌入式的小型瀏覽器，用于展示W(wǎng)eb內(nèi)容，實(shí)現(xiàn)Web的混合開(kāi)發(fā)。例如，在API 9中目前還沒(méi)有地圖組件可用，那么我們就可以借助Web組件顯示OpenLayers、OSM等提供的地圖空間和地圖服務(wù)。據(jù)說(shuō)ArkUI的Web組件采用了chromium內(nèi)核，應(yīng)當(dāng)還是非常高效的。
1、開(kāi)發(fā)環(huán)境要求
● DevEco Studio版本：DevEco Studio 3.1 Release
● HarmonyOS SDK版本：API version 9
2、基本用法
使用Web組件分為3個(gè)基本步驟：
import webview from '@ohos.web.webview';創(chuàng)建Web視圖控制器（WebViewController）：通過(guò)Web視圖控制器可以對(duì)Web組件的顯示內(nèi)容進(jìn)行控制，實(shí)現(xiàn)加載、交互等操作。
webCtr : webview.WebviewController = new webview.WebviewController();創(chuàng)建Web組件：在創(chuàng)建Web組件時(shí)可以傳入默認(rèn)加載地址和控制器對(duì)象。比如，默認(rèn)加載百度網(wǎng)站的首頁(yè)，代碼如下：
Web({src : "https://m.baidu.com", controller : this.webCtr})此時(shí)，這個(gè)Web組件就和webCtr對(duì)象綁定在一起了。開(kāi)發(fā)者就可以通過(guò)webCtr對(duì)象的方法對(duì)Web組件中的內(nèi)容進(jìn)行控制了。
不要忘了，訪(fǎng)問(wèn)網(wǎng)站時(shí)需要添加互聯(lián)網(wǎng)訪(fǎng)問(wèn)權(quán)限。在entry模塊下的module.json5文件中，添加ohos.permission.INTERNET權(quán)限，代碼如下：
{
"module": {
...
"requestPermissions": [
{"name": "ohos.permission.INTERNET"}
], ...
} ...
}隨后，運(yùn)行程序就可以顯示相應(yīng)的頁(yè)面了，顯示效果如下：
3、頁(yè)面加載
加載互聯(lián)網(wǎng)頁(yè)面的代碼如下：
this.webCtr.loadUrl('m.bilibili.com');加載本地頁(yè)面的代碼如下：
this.webCtr.loadUrl($rawfile("test.html"));前提是需要將test.html加入到entry/src/main/resources/rawfile目錄下。
當(dāng)然，還可以通過(guò)loadData函數(shù)加載HTML代碼，這種方式通常用于顯示簡(jiǎn)單的數(shù)據(jù)。例如，通過(guò)loadData顯示“Hello, HarmonyOS”，代碼如下：
this.controller.loadData(
"<html><body>Hello, <b>Harmony<span style="text-decoration:underline;">O</span>S</b></body></html>",
"text/html",
"UTF-8"
);loadData有3個(gè)參數(shù)，第一個(gè)是文本代碼，第二個(gè)用于指定文本代碼的格式，如text/html、text/plain等；第三個(gè)是字符編碼方式，如UTF-8、GB2312、GBK等
顯示效果如所示：
#星計(jì)劃#淺談ArkUI之Web組件的基礎(chǔ)用法-鴻蒙開(kāi)發(fā)者社區(qū)
4、頁(yè)面交互
頁(yè)面交互包括在ArkTS中執(zhí)行Web組件中的JavaScript函數(shù)以及對(duì)象注入等2個(gè)主要功能。另外，還可以通過(guò)createWebMessagePorts函數(shù)創(chuàng)建消息端口來(lái)實(shí)現(xiàn)Web組件和ArkTS語(yǔ)言環(huán)境的數(shù)據(jù)通信，輕松實(shí)現(xiàn)數(shù)據(jù)傳遞。
調(diào)用JavaScript函數(shù)。
通過(guò)runJavaScript函數(shù)就可以輕松實(shí)現(xiàn)前端函數(shù)的調(diào)用，代碼如下：
this.webviewController.runJavaScript('run()');當(dāng)然，前端要提前設(shè)計(jì)好run()函數(shù)才可以正常運(yùn)行。
對(duì)象注入。
所謂對(duì)象注入，就是將ArkTS的對(duì)象注入到Web組件的前端代碼中。例如，在ArkTS中定義Test類(lèi)，代碼如下：
class Test {
constructor() {
}
hello(): string {
return "Hello, JavaScript!";
}
toString(): void {
console.log('This is from ArkTS');
}
}創(chuàng)建Test類(lèi)的實(shí)例，代碼如下：
@State test: Test = new Test();最后，即可通過(guò)Web組件的javaScriptProxy函數(shù)將test對(duì)象注入到前端代碼中：
Web({ ... })
.javaScriptProxy({
object: this.test,
name: "jsTest",
methodList: ["hello", "toString"],
controller: this.webCtr
})其中，object用于指定需要注入的對(duì)象；name表示注入后的對(duì)象名稱(chēng)；methodList用于聲明注入對(duì)象的函數(shù)；controller指定了Web視圖控制器。
當(dāng)然，還可以通過(guò)WebViewController的registerJavaScriptProxy函數(shù)注入對(duì)象，代碼如下：
this.webCtr.registerJavaScriptProxy(this.test, "jsTest", ["hello", "toString"]);隨后，在前端就可以訪(fǎng)問(wèn)到j(luò)sTest對(duì)象，代碼如下：
let str = jsTest.hello();
let st2 = jsTest.toString();5、頁(yè)面調(diào)試
在DevEco Studio中，通過(guò)DevTools工具可以很輕松地對(duì)Web組件中的頁(yè)面進(jìn)行調(diào)試，不過(guò)，需要通過(guò)setWebDebuggingAccess函數(shù)開(kāi)啟調(diào)試模式，代碼如下：
this.webCtr.setWebDebuggingAccess(true);隨后，通過(guò)以下命令在電腦端配置映射，如下所示：
// 添加映射
hdc fport tcp:9222 tcp:9222
// 查看映射
hdc fport ls映射建立成功后，就可以通過(guò)Chrome、Edge等瀏覽器通過(guò)USB線(xiàn)對(duì)Web頁(yè)面進(jìn)行調(diào)試了。在頁(yè)面中輸入地址chrome://inspect/#devices，即可調(diào)試Web組件中的界面了。
