十個可以手動編寫的 JavaScript 數(shù)組 API
JavaScript 中有很多API，使用得當，會很方便，省力不少。 你知道它的原理嗎? 今天這篇文章，我們將對它們進行一次小總結。現(xiàn)在開始吧。1.forEach()forEach()用于遍歷數(shù)組接收一參
想了解更多關于開源的內(nèi)容，請訪問：
51CTO 開源基礎軟件社區(qū)
https://ost.51cto.com
最近研究了ArkUI中的一些常用組件，其中Web組件是很常用且相對獨立的一種組件。本文總結了Web組件的常用函數(shù)，以及基本用法。先來一個AI畫的Web組件助助興（好吧，不能說毫無關系，只能說一點也不像）：
在ArkUI中，Web組件用于顯示W(wǎng)eb網(wǎng)頁，可以理解為一個嵌入式的小型瀏覽器，用于展示W(wǎng)eb內(nèi)容，實現(xiàn)Web的混合開發(fā)。例如，在API 9中目前還沒有地圖組件可用，那么我們就可以借助Web組件顯示OpenLayers、OSM等提供的地圖空間和地圖服務。據(jù)說ArkUI的Web組件采用了chromium內(nèi)核，應當還是非常高效的。
● DevEco Studio版本：DevEco Studio 3.1 Release
● HarmonyOS SDK版本：API version 9
使用Web組件分為3個基本步驟：
import webview from '@ohos.web.webview';創(chuàng)建Web視圖控制器（WebViewController）：通過Web視圖控制器可以對Web組件的顯示內(nèi)容進行控制，實現(xiàn)加載、交互等操作。
webCtr : webview.WebviewController = new webview.WebviewController();創(chuàng)建Web組件：在創(chuàng)建Web組件時可以傳入默認加載地址和控制器對象。比如，默認加載百度網(wǎng)站的首頁，代碼如下：
Web({src : "https://m.baidu.com", controller : this.webCtr})此時，這個Web組件就和webCtr對象綁定在一起了。開發(fā)者就可以通過webCtr對象的方法對Web組件中的內(nèi)容進行控制了。
不要忘了，訪問網(wǎng)站時需要添加互聯(lián)網(wǎng)訪問權限。在entry模塊下的module.json5文件中，添加ohos.permission.INTERNET權限，代碼如下：
{ "module": { ... "requestPermissions": [ {"name": "ohos.permission.INTERNET"} ], ... } ...}隨后，運行程序就可以顯示相應的頁面了，顯示效果如下：
加載互聯(lián)網(wǎng)頁面的代碼如下：
this.webCtr.loadUrl('m.bilibili.com');加載本地頁面的代碼如下：
this.webCtr.loadUrl($rawfile("test.html"));前提是需要將test.html加入到entry/src/main/resources/rawfile目錄下。
當然，還可以通過loadData函數(shù)加載HTML代碼，這種方式通常用于顯示簡單的數(shù)據(jù)。例如，通過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個參數(shù)，第一個是文本代碼，第二個用于指定文本代碼的格式，如text/html、text/plain等；第三個是字符編碼方式，如UTF-8、GB2312、GBK等
顯示效果如所示：
#星計劃#淺談ArkUI之Web組件的基礎用法-鴻蒙開發(fā)者社區(qū)
頁面交互包括在ArkTS中執(zhí)行Web組件中的JavaScript函數(shù)以及對象注入等2個主要功能。另外，還可以通過createWebMessagePorts函數(shù)創(chuàng)建消息端口來實現(xiàn)Web組件和ArkTS語言環(huán)境的數(shù)據(jù)通信，輕松實現(xiàn)數(shù)據(jù)傳遞。
調(diào)用JavaScript函數(shù)。
通過runJavaScript函數(shù)就可以輕松實現(xiàn)前端函數(shù)的調(diào)用，代碼如下：
this.webviewController.runJavaScript('run()');當然，前端要提前設計好run()函數(shù)才可以正常運行。
對象注入。
所謂對象注入，就是將ArkTS的對象注入到Web組件的前端代碼中。例如，在ArkTS中定義Test類，代碼如下：
class Test { constructor() { } hello(): string { return "Hello, JavaScript!"; } toString(): void { console.log('This is from ArkTS'); }}創(chuàng)建Test類的實例，代碼如下：
@State test: Test = new Test();最后，即可通過Web組件的javaScriptProxy函數(shù)將test對象注入到前端代碼中：
Web({ ... }) .javaScriptProxy({ object: this.test, name: "jsTest", methodList: ["hello", "toString"], controller: this.webCtr})其中，object用于指定需要注入的對象；name表示注入后的對象名稱；methodList用于聲明注入對象的函數(shù)；controller指定了Web視圖控制器。
當然，還可以通過WebViewController的registerJavaScriptProxy函數(shù)注入對象，代碼如下：
this.webCtr.registerJavaScriptProxy(this.test, "jsTest", ["hello", "toString"]);隨后，在前端就可以訪問到jsTest對象，代碼如下：
let str = jsTest.hello();let st2 = jsTest.toString();在DevEco Studio中，通過DevTools工具可以很輕松地對Web組件中的頁面進行調(diào)試，不過，需要通過setWebDebuggingAccess函數(shù)開啟調(diào)試模式，代碼如下：
this.webCtr.setWebDebuggingAccess(true);隨后，通過以下命令在電腦端配置映射，如下所示：
// 添加映射 hdc fport tcp:9222 tcp:9222 // 查看映射 hdc fport ls映射建立成功后，就可以通過Chrome、Edge等瀏覽器通過USB線對Web頁面進行調(diào)試了。在頁面中輸入地址chrome://inspect/#devices，即可調(diào)試Web組件中的界面了。
想了解更多關于開源的內(nèi)容，請訪問：
51CTO 開源基礎軟件社區(qū)
https://ost.51cto.com
本文鏈接：http://www.www897cc.com/showinfo-26-55263-0.html淺談ArkUI之Web組件的基礎用法
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 淺談ArkUI之Web組件的基礎用法
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號