javascript
HarmonyOS JS UI
一、簡介
什么是鴻蒙
鴻蒙操作系統 (HarmonyOS、鴻蒙OS) 是一款面向全場景的分布式操作系統。其開源項目為OpenHarmony。
歷史
- 2012 年，華為開始規劃自有操作系統“鴻蒙”
- 2019 年 8 月 9 日，華為在發布鴻蒙 1.0
- 2020 年 9 月 10 日，華為發布鴻蒙 2.0
- 2021 年 6 月 2 日，鴻蒙正式商用（華為正式發布 HarmonyOS 2 及多款搭載 HarmonyOS 2 的新產品）
鴻蒙的三大特征
- 超級小程序
- H5 只能使用瀏覽器的功能
- 小程序可以調用微信的功能（掃碼、拍照、定位、查通訊錄）
- 鴻蒙可以調用系統級別的功能（線程），而且可以調用其他設備的功能
- 可剪裁系統
- 可以跑在手機、平板、電視、可穿戴設備、智能硬件和?載系統上
- 鴻蒙可以根據系統（芯片）的算力，選擇性地運行整個系統的某些部分
- 模改通訊協議
- IoT 互通互聯的標準語言（手機，微波爐，冰箱，汽?，手表，耳機）
- 類似普通話，統一了方言
有用的網站
鴻蒙官網：https://www.harmonyos.com/
鴻蒙系統開發者：https://developer.harmonyos.com/
華為開發者：https://developer.huawei.com/
在線體驗：https://playground.harmonyos.com/
Gitee：https://gitee.com/openharmony
JS API：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791
儲備知識
- 熟悉前端技術棧（HTML、CSS、JS）
- 熟悉微信小程序
- 熟悉 Vue
- 有安卓開發經驗更好
二、系統架構
鴻蒙系統架構一共分四層：應用層、框架層、系統服務層、內核層。
內核層
- 內核子系統：HarmonyOS 采用多內核設計，支持針對不同資源受限設備選用適合的 OS內核。內核抽象層（KAL，Kernel Abstract Layer）通過屏蔽多內核差異，對上層提供基礎的內核能力，包括進程/線程管理、內存管理、文件系統、網絡管理和外設管理等。
- 驅動子系統：硬件驅動框架（HDF）是 HarmonyOS 硬件生態開放的基礎，提供統一外設訪問能力和驅動開發、管理框架。
系統服務層
系統服務層是 HarmonyOS 的核心能力集合，通過框架層對應用程序提供服務。該層包含以下幾個部分：
- 系統基本能力子系統集：為分布式應用在 HarmonyOS 多設備上的運行、調度、遷移等操作提供了基礎能力，由分布式軟總線、分布式數據管理、分布式任務調度、方舟多語言運行時、公共基礎庫、多模輸入、圖形、安全、AI 等子系統組成。其中，方舟運行時提供了C/C++/JS 多語言運行時和基礎的系統類庫，也為使用方舟編譯器靜態化的Java程序（即應用程序或框架層中使用Java語言開發的部分）提供運行時。
- 基礎軟件服務子系統集：為 HarmonyOS 提供公共的、通用的軟件服務，由事件通知、電話、多媒體、DFX（Design For X） 、MSDP & DV 等子系統組成。
- 增強軟件服務子系統集：為 HarmonyOS 提供針對不同設備的、差異化的能力增強型軟件服務，由智慧屏專有業務、穿戴專有業務、IoT 專有業務等子系統組成。
- 硬件服務子系統集：為 HarmonyOS 提供硬件服務，由位置服務、生物特征識別、穿戴專有硬件服務、IoT 專有硬件服務等子系統組成。
根據不同設備形態的部署環境，基礎軟件服務子系統集、增強軟件服務子系統集、硬件服務子系統集內部可以按子系統粒度裁剪，每個子系統內部又可以按功能粒度裁剪。
框架層
框架層為 HarmonyOS 應用開發提供了 Java/C/C++/JS 等多語言的用戶程序框架和 Ability框架，兩種 UI 框架（包括適用于 Java 語言的 Java UI 框架、適用于 JS 語言的 JS UI 框架），以及各種軟硬件服務對外開放的多語言框架 API。根據系統的組件化裁剪程度，HarmonyOS 設備支持的 API 也會有所不同。
應用層
應用層包括系統應用和第三方非系統應用。HarmonyOS 的應用由一個或多個 FA（Feature Ability）或 PA（Particle Ability）組成。其中，FA 有 UI 界面，提供與用戶交互的能力；而 PA無 UI 界面，提供后臺運行任務的能力，以及統一的數據訪問抽象。FA 在進行用戶交互時所需的后臺數據訪問，也需要由對應的 PA 提供支撐。基于 FA/PA 開發的應用，能夠實現特定的業務功能，支持跨設備調度與分發，為用戶提供一致、高效的應用體驗。
JS UI 框架架構
JS UI 框架包括應用層（Application）、前端框架層（Framework）、引擎層（Engine）和平臺適配層（Porting Layer）。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-overview-0000000000500376
應用層
表示開發者使用 JS UI 框架開發的 FA 應用。
這里的 FA 應用特指 JS FA 應用。使用 Java開發FA應用請參考。Java UI框架
前端框架層
主要完成前端?面解析，以及提供 MVVM（Model-View-ViewModel）開發模式、?面路由機制和自定義組件等能力。
引擎層
主要提供動畫解析、DOM（Document Object Model）樹構建、布局計算、渲染命令構建與繪制、事件管理等能力。
適配層
主要完成對平臺層進行抽象，提供抽象接口，可以對接到系統平臺。比如：事件對接、渲染管線對接和系統生命周期對接等。
三、搭建開發環境
DevEco Studio
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/installation_process-0000001071425528
簡介
DevEco Studio 是面向全場景多設備，提供一站式的分布式應用開發平臺，支持分布式多端開發、分布式多端調測、多端模擬仿真，全方位的質量與安全保障。
環境要求
下載
下載地址：https://developer.harmonyos.com/cn/develop/deveco-studio#download
目前提供 Mac 和 Windows 兩大主流操作系統。針對自己的操作系統，下載對應的安裝包即可（以下內容是在 Mac 上的安裝截圖）
安裝
安裝過程
具體步驟
| 1 | 軟件安裝 | Windows系統軟件安裝 | 安裝DevEco Studio |
| macOS系統軟件安裝 | |||
| 2 | 配置開發環境 | (可選)設置Gradle代理 | 網絡不能直接訪問Internet，需要通過代理服務器才可以訪問的情況下需要設置。如果無需代理即可訪問Internet，可跳過該步驟。 |
| 3 | 配置開發環境 | (可選)設置IDE代理 | 網絡不能直接訪問Internet，需要通過代理服務器才可以訪問的情況下需要設置。如果無需代理即可訪問Internet，可跳過該步驟。 |
| 4 | 配置開發環境 | (可選)設置npm代理 | 網絡不能直接訪問Internet，需要通過代理服務器才可以訪問的情況下需要設置。如果無需代理即可訪問Internet，可跳過該步驟。 |
| 5 | 配置開發環境 | 下載HarmonyOS SDK | - |
| 6 | 運行HelloWorld | 創建工程 | 使用模擬器運行Demo工程，驗證環境是否已經配置完成。 |
| 7 | 運行HelloWorld | 運行應用 | 使用模擬器運行Demo工程，驗證環境是否已經配置完成。 |
執行安裝
運行
SDK 組件安裝
協議許可，點擊 Accept，然后 Next
安裝中（下載組件），等待…
安裝完成后，點擊 done。然后進入歡迎界面。左側有四個菜單
- 創建鴻蒙項目
- 打開項目
- 在版本控制中獲取
- 導入鴻蒙示例
接下來，我們可以點擊第一個菜單（Create HarmonyOS Project），去創建一個項目。
初始化項目
點擊歡迎?的 Create HarmonyOS Project
這里我選擇 List Tab Ability（JS）
四、初始化項目
初始化完成后，就會看到如下界面（如此熟悉的目錄的代碼，跟小程序?得很像有木有~）
查看效果
點擊 右側的 Previewer 查看效果（或者 View -> Tool Windows -> Previewer ）
五、安裝模擬器
打開 Device Manager
注冊并登錄
如果沒有注冊，請先注冊華為開發者賬號（注冊地址：https://developer.huawei.com/）；
如果沒有登錄，請先登錄。登錄后，會看到如下?面
實名認證
點擊 Go Authentication 會看到下面的彈窗。然后點擊 here，然后會跳轉到華為開發者網站。
在華為開發者網站，注冊成為開發者。
是否有敏感應用上架？
- 選擇 是 ，會彈出銀行卡認證的?面（后續需要支付相關的功能）
- 選擇 否 ，推薦銀行卡認證（不強制）；但是，我們可以選擇身份證認證。
選擇 是，進行銀行卡實名認證（ 3 分鐘 - 認證速度快），認證成功后的效果如下：
選擇 否，然后進行身份證認證（1-2個工作日 - 認證速度慢）。
填寫基本信息，上傳身份證
提到并等待審核
安裝模擬器
賬戶認證通過后，就可以在 DevEco 中添加模擬器了。
Tools -> Device Manager
安裝后，看到如下效果
點擊運行，可能查看項目在模擬器上的運行效果。
模擬器（Simulator）與預覽器（Previewer）的區別：
六、漢化菜單
鴻蒙操作系統剛剛推出，為了更快的面向國際市場，編輯器默認采用英文。下面介紹一下漢化方法。
操作步驟
安裝完成后重啟 IDE
重啟后的效果
可以看到，大部分的菜單都漢化了
七、JS 框架
詳情查看：https://developer.harmonyos.com/cn/documentation
目錄結構
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-file-0000000000611396
實例目錄
單實例目錄
多實例目錄
文件（目錄）介紹
作用
- app.js 全局入口文件
- pages 存放?面
- common 公共資源
- resources 資源配置文件
- i18n 多語言目錄
- share 多實例共享資源目錄（5+）
注意：
如下文件夾是開發保留文件夾，不可重命名：
share
如果 share 中的資源和實例 (default) 中的資源文件同名且目錄一致時，實例中資源的優先級高于share 中資源的優先級。
其他文件，可以根據開發需要自行創建。
訪問規則
應用資源可通過絕對路徑或相對路徑的方式進行訪問，本開發框架中絕對路徑以"/“開頭，相對路徑以”./“或”…/"。具體訪問規則如下：
- 引用代碼文件，需使用相對路徑，比如：…/common/utils.js。
- 引用資源文件，推薦使用絕對路徑。比如：/common/xxx.png。
- 公共代碼文件和資源文件推薦放在 common 下，通過以上兩條規則進行訪問。
- CSS 樣式文件中通過 url() 函數創建 數據類型，如：url(/common/xxx.png)。
?面文件
?面中文件分類如下：
- .hml 描述?面的布局結構。
- .css 描述?面樣式。
- .js 用于處理?面和用戶的交互。
resources
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-resource-file-categories-0000001052066099
1 resources 2 |---base // 默認存在的目錄 3 | |---element 4 | | |---string.json 5 | |---media 6 | | |---icon.png 7 |---en_GB-vertical-car-mdpi // 限定詞目錄示例，需要開發者自行創建 8 | |---element 9 | | |---string.json 10 | |---media 11 | | |---icon.png 12 |---rawfile // 默認存在的目錄resources 目錄分類
資源組目錄
資源文件的使用：https://developer.harmonyos.com/cn/docs/documentation/doc-
guides/basic-resource-file-example-0000001051733014
八、配置文件
config.json
簡介
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-overview-0000000000011951
建議在 DevEco 中，以可視化窗口的方式，來理解各配置項的含義
應用的每個 HAP 的根目錄下都存在一個“config.json”配置文件，文件內容主要涵蓋以下三個方面：
- 應用的全局配置信息，包含應用的包名、生產廠商、版本號等基本信息。
- 應用在具體設備上的配置信息，包含應用的備份恢復、網絡安全等能力。
- HAP 包的配置信息，包含每個 Ability 必須定義的基本屬性（如包名、類名、類型以及Ability 提供的能力），以及應用訪問系統或其他應用受保護部分所需的權限等。
config.json 采用 JSON 格式。即內容都是有 屬性: 值 組成的
- 屬性，出現順序不分先后，且每個屬性最多只允許出現一次。
- 值，每個屬性的值為JSON的基本數據類型（數值、字符串、布爾值、數組、對象或者null類型）。如果屬性值需要引用資源文件，可參?資源文件。
常用配置
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463
module
以下為 module 的配置想
申請權限
reqPermissions
defPermissions
1 { 2 "module": { 3 "defPermissions": [ 4 { 5 "name": "com.myability.permission.MYPERMISSION", 6 "grantMode": "system_grant", 7 "availableScope": ["signature"] 8 }, { 9 ... 10 } 11 ] 12 } 13 }js
pages
1 "pages": [ 2 "pages/index/index", 3 "pages/detail/detail" 4 ]注意：
pages 列表中第一個?面是應用的首?，即 entry 入口。
?面文件名不能使用組件名稱，比如：text.hml、button.hml 等。
name
JS 實例名稱
window
window 用于設置窗口配置。對于屏幕適配問題，有 2 種配置方法：
指定 designWidth（屏幕邏輯寬度，在手機和智慧屏上默認 720px，智能穿戴默認454px），所有與大小相關的樣式（例如width、font-size）均以 designWidth 和實際屏幕寬度的比例進行縮放。
例如在 designWidth 為 720 時，如果設置 width 為100px時，在實際寬度為 1440 物理像素的屏幕上，width 實際渲染像素為 200 物理像素。
設置 autoDesignWidth 為 true，此時 designWidth 字段將會被忽略，渲染組件和布局 時按屏幕密度進行縮放。屏幕邏輯寬度由設備寬度和屏幕密度自動計算得出，在不同設備上可能不同，請使用相對布局來適配多種設備。
例如：在 466*466 分辨率，320dpi 的設備上，屏幕密度為 2 （以160dpi為基準），1px等于渲染出的 2 物理像素。
配置示例
詳情參考：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-example-0000000000034466
九、生命周期
應用生命周期
onCreate：應用啟動時調用
onDestroy：應用銷毀時調用
?面生命周期
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-syntax-js-0000000000611432#ZH-CN_TOPIC_0000001058562835__s962b82fb67304ec9a50fb06ffa977560
?面 A 的生命周期接口的調用順序
- 打開?面 A：onInit() -> onReady() -> onShow() -> onActive()
- 在?面 A 打開?面 B：onInactive() -> onHide()
- 從?面 B 返回?面 A：onShow() -> onActive()
- 退出?面 A：onBackPress() -> onInactive() -> onHide() -> onDestroy()
- ?面隱藏到后臺運行：onInactive() -> onHide()
?面從后臺運行恢復到前臺：onShow()
十、路由與導航
在 config.json 中聲明路由
1 {2 // ... 3 "module": { 4 "js": [ 5 { 6 // 聲明?面路由 7 "pages": [ 8 "pages/index/index", 9 "pages/details/details", 10 "pages/comp/comp" 11 ], 12 "name": "default", 13 "window": { 14 "designWidth": 720 , 15 "autoDesignWidth": false 16 } 17 } 18 ] 19 } 20 }在 pages 目錄下聲明對應的三個文件
聲明導航
引入 router
聲明導航方法
1 export default { 2 // ... 3 4 launch: function () { 5 router.push({ 6 uri: 'pages/details/details', 7 }); 8 } 9 }除了上面的 push 方法以外，還有如下方法。
十一、JS 語法
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-syntax-js-0000000000611432
支持 ES 6 語法（但不支持最新的 ES 語法）
鴻蒙 JS 是參考 Vue 2 封裝的
JS 應用
$def
在?面中，通過 this.app.app.app.def，獲取在 app.js 中暴露的對象
數據綁定
data | public：類型是對象或者函數
private：數據只能由當前?面修改
數據修改
this.set(′key′,value);this.set('key', value); this.set(′key′,value);this.delete(‘key’);
獲取 DOM 元素
$refs
1 // index.hml 2 <text ref="target" >內容</div> 3 4 // index.js 5 const t = this.$refs.target; // 獲取 ref 屬性為 target 的 DOM 元素$element
1 // index.hml 2 <text id="target" >內容</div> 34 // index.js 5 const t = this.$element("target"); // 獲取 id 屬性為 target 的 DOM 元素 6 7 // 獲取根組件對象 8 const t = this.$element();JS 架構
- JS UI 框架
- 類 Web 范式編程的 UI 界面展示
- https://gitee.com/openharmony/ace_ace_engine
- JS 應用開發框架
- 輕量級的 MVVM 實現（仿 Vue 2）
- https://gitee.com/openharmony/ace_engine_lite
- JS 原生模塊（NAPI）
- 實現 JS 與 C/C++ 代碼互相訪問
- https://gitee.com/openharmony/ace_napi
十二、HML 語法
HML（HarmonyOS Markup Language）是一套類 HTML 的標記語言，通過組件，事件構建出?面的內容。?面具備事件綁定、數據綁定、列表渲染、條件渲染和邏輯控制等能力。
詳情查看：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-syntax-hml-0000000000611413
十三、CSS 語法
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-syntax-css-0000000000611425
基本語法
尺寸單位
只有像素和百分比
樣式導入
@import ‘…/…/common/style.css’;
預編譯
鴻蒙可以直接解析 sass 和 less（不需要自己安裝解析插件）
屏幕適配
基于設計稿
假定設計稿尺寸（假定：720 px），終端尺寸（假定：1440 px）
則縮放比例為 1440 px /720 px = 2.0
根據縮放比例轉換實際尺寸 100 px X 2.0 = 200 px
基于屏幕密度
屏幕密度（dpi = dots per inch 每英寸點數）
ldpi：低密度屏幕（~120dpi）（0.75 基準密度）
mdpi：中密度屏幕（~160dpi）（1.0 基準密度）
hdpi：高密度屏幕（~240dpi）（1.5 基準密度）
xhdpi：加高密度屏幕（~320dpi）（2.0 基準密度）
xxhdpi：超超高密度屏幕（~480dpi）（3.0 基準密度）
xxxhdpi：超超超高密度屏幕（~640dpi）（4.0 基準密度）
適配原理
根據基準密度轉換實際尺寸（100 px X 2.0 = 200 px）
十四、多語言支持
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-multiple-languages-0000000000625923
- i18n 目錄下存放語言包
- 語言-地區.json（zh-CN.json）
- $t() 獲取對應的內容
- 切換系統語言時（模擬器或真機中），可以看到效果
十五、組件
組件是用來展示?面內容的，其功能定位與 HTML 標簽相同。
需要強調的是， 華為提供的組件不是運行在瀏覽器環境下的 ，華為的組件，更像是小程序的組件。
但是，為了降低學習成本，華為提供的組件名稱，大部分參考 HTML 標簽的命名。例如：button，div，
input 等。雖然這些組件名稱與 HTML 標簽名一樣，但屬性和使用方式不盡相同。具體以官方文檔為準。
基礎組件
基礎組件提供了基本的內容展示功能，是最常用的一些組件。
按鈕
button
提供按鈕組件，包括膠囊按鈕、圓形按鈕、文本按鈕、弧形按鈕、下載按鈕。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-button-0000000000621726
toggle
狀態按鈕
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-toggle-0000001061155984
piece
一種塊狀的入口，可包含圖片和文本。常用于展示收件人，例如：郵件收件人或信息收件人。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-piece-0000001060517794
文本
text
用來顯示文本信息
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-text-0000000000611633
span
作為<text>的子組件提供文本修飾能力
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-span-0000000000611621
marquee
以跑?燈效果展示一行文本
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-marquee-0000000000611657
textarea
顯示多行文本
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-textarea-0000000000611748
label
標簽組件
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-label-0000000000611688
圖片
image
用來渲染展示圖片
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-0000000000611597
image-animator
圖片幀動畫
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-animator-0000001050066126
表單
input
輸入框，包括單選框，多選框，按鈕和單行文本輸入框。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673
select
下拉選擇組件
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-select-0000000000611712
option
可以作為 <select> 和<menu>的子組件來展示內容
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-option-0000000000611700
search
搜索組件
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-search-0000000000618599
switch
開關選擇器
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-switch-0000000000611736
rating
評分條
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-rating-0000000000611645
picker
選擇器，類型支持普通選擇器，日期選擇器，時間選擇器，時間日期選擇器，多列文本選擇器。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-picker-0000000000621791
picker-view
嵌入?面的滑動選擇器
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-picker-view-0000001050119874
導航
menu
提供菜單組件，作為臨時性彈出窗口，用于展示用戶可執行的操作。其子組件是 option
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-menu-0000000000618614
toolbar
工具欄
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-toolbar-0000001062209279
toolbar-item
工具欄子項
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-toolbar-item-0000001061931453
其他
slider
滑動條
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-slider-0000000000611724
progress
進度條
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-progress-0000000000611609
divider
分割器，用來分割不同的內容
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-divider-0000000000618583
chart
圖標組件
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-chart-0000001050030933
qrcode
生成并顯示二維碼
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-qrcode-0000001051089032
容器組件
div
用作?面結構的根節點或將內容進行分組。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-div-0000000000611484
stack
堆疊容器，子組件按照順序依次入棧，后一個子組件覆蓋前一個子組件。（相當于 z-index）
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-stack-0000000000611521
badge
徽章
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-badge-0000001060267851
列表
列表包含一系列相同寬度的列表項。適合連續、多行呈現同類數據，例如圖片和文本。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-0000000000611496
list-item
<list>的子組件，用來展示列表具體item
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-item-0000000000611509
list-item-group
<list>的子組件，用來展示分組，寬度默認充滿list組件。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-item-group-0000001050023049
柵格
提供柵格布局效果，通過柵格系統進行元素布局，主要提供 <grid-container><grid-row><grid-col> 柵格容器組件。
柵格系統有 Margins，Gutters，Columns 三個屬性。
格斷點系統
柵格系統定義了不同水平寬度設備對應 Columns 的數量關系，形成了一套斷點規則定義。
柵格系統以水平分辨率值作為斷點依據，不同的設備根據自身當前水平寬度 px 值(配置了autoDesignWidth 為 true) 在不同的斷點范圍內的情況，顯示不同數量的柵格數。
- xs: 0<水平分辨率<320 時：2 Columns 柵格；
- sm: 320<=水平分辨率<600 時：4 Columns 柵格；
- md: 600<=水平分辨率<840 時：8 Columns 柵格；
- lg: 840 <= 水平分辨率時：12 Columns 柵格；
grid-container
柵格布局容器根節點，包含 grid-row 與 gird-col 進行柵格布局。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-grid-container-0000001062133103
grid-row
grid-row 是柵格布局容器 grid-container 的子容器組件，使用 flex 橫向布局，排列每個grid-col 容器，justify-content 與 align-items 默認為 flex-start，支持折行顯示。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-grid-row-0000001062811276
grid-col
grid-col 是柵格布局容器 grid-row 的子容器組件。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-grid-col-0000001063130862
選項卡
tabs
選項卡容器
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000000000611572
tab-bar
選項卡菜單
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tab-bar-0000000000611548
tab-content
選項卡內容
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tab-content-0000000000611560
彈窗
dialog
自定義彈窗
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-dialog-0000001050068157
popup
氣泡彈窗
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-popup-0000000000611584
panel
可滑動面板。提供一種輕量的內容展示的窗口，可方便的在不同尺寸中切換。屬于彈出式組件。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-panel-0000001062321291
步驟導航
stepper
步驟導航器。當完成一個任務需要多個步驟時，可以使用步驟導航器展示當前進展。
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-stepper-0000001060518078
stepper-item
步驟導航子組件
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-stepper-item-0000001060038131
輪播圖
輪播圖組件
swiper
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-swiper-0000000000611533
下拉刷新容器
下拉刷新容器。
refresh
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-refresh-0000000000618205
通用組件
媒體查詢
基本語法
1 @media [media-type] [and|not|only] [(media-feature)] { 2 CSS-Code; 3 }@media screen and (round-screen: true) { … } // 當設備屏幕是圓形時條件成立
@media (max-height: 800) { … } // 范圍查詢，CSS level 3 寫法
@media (height <= 800) { … } // 范圍查詢，CSS level 4 寫法，與 CSS level3 寫法等 價
@media screen and (device-type: tv) or (resolution < 2) { … } // 同時包含媒體類型和多個媒體特征的多條件復雜語句查詢
引入資源
1 @import url [media-type] [and|not|only] [(media-feature)]; 2 3 # 例如 4 @import '../common/style.css' screen and (min-width: 600 ) and (max -width: 1200 );操作符
and、or、not、only用于構成復雜媒體查詢，也可以通過comma（,）將其組合起來。
在MediaQuery Level 4中引入了范圍查詢，使其能夠使用max-，min-的同時，也支持了 <=，>=，<，>操作符。
媒體特征
自定義組件
自定義組件通過element引入到宿主?面。
1 <element name='comp' src='../../common/component/comp.hml'></eleme nt> 2 <div> 3 <comp prop1='xxxx' @child1="bindParentVmMethod"></comp> 4 </div>- name 屬性指自定義組件名稱(非必填)，組件名稱對大小寫不敏感，默認使用小寫。src 屬性指自定義組件 hml 文件路徑(必填)，若沒有設置 name 屬性，則默認使用 hml 文件名作為組件名。
- 事件綁定：自定義組件中綁定子組件事件使用（on|@)child1）語法，子組件中通過this.$emit(‘child1’, { params: ‘傳遞參數’ }) 觸發事件并進行傳值，父組件執行 bindParentVmMethod 方法并接收子組件傳遞的參數。
子組件中使用駝峰命名法命名的事件，在父組件中綁定時需要使用短橫線分隔命名形式，例如：@children-event表示綁定子組件的 childrenEvent 事件，如 @children-event=“bindParentVmMethod”。
事件傳遞
子組件
模板文件
JS 文件
1 // comp.js 2 export default { 3 data: { 4 showObj: false, 5 }, 6 childClicked () { 7 this.$emit('eventType1'); 8 this.showObj = !this.showObj; 9 }, 10 }父組件
模板文件
1 <!-- xxx.hml --> 2 <element name='comp' src='../../common/component/comp.hml'></eleme nt> 3 <div class="container"> 4 <comp @event-type1="textClicked"></comp> 5 </div>JS 文件
1 // xxx.js 2 export default { 3 textClicked () {}, 4 }參數傳遞
子組件
模板文件
JS 文件
1 // comp.js 2 export default { 3 props: ['compProp'], 4 }父組件
1 <!-- xxx.hml --> 2 <element name='comp' src='../../common/component/comp/comp.hml'></ element> 3 <div class="container"> 4 <comp comp-prop="{{title}}"></comp> 5 </div>父組件 comp-prop => 子組件 compProp
設置默認值
1 // comp.js 2 export default { 3 props: { 4 compProp: { 5 default: '123', 6 }, 7 }, 8 }當用戶沒有在父組件中設置 comp-prop 的值時，會默認顯示 123
數據單向性
父子組件之間數據的傳遞是單向的，只能從父組件傳遞給子組件，子組件不能直接修改父組件傳遞下來的值，可以將 props 傳入的值用 data 接收后作為默認值，再對 data 的值進行修改。
1 // comp.js 2 export default { 3 props: ['compProp'], 4 data() { 5 return { 6 count: this.compProp, 7 }; 8 }, 9 onClick() { 10 this.count = this.count + 1 ; 11 }, 12 }$watch
監控數據變化
1 // comp.js 2 export default { 3 props: ['title'], 4 onInit() { 5 this.$watch('title', 'onPropertyChange'); 6 }, 7 onPropertyChange(newV, oldV) { 8 console.info('title 屬性變化 ' + newV + ' ' + oldV); 9 }, 10 }computed
計算屬性變化
自定義組件中，經常需要在讀取或設置某個屬性時，進行預先處理，此時，就需要使用 computed 字段。computed 中的 getter 和 setter 方法，在屬性讀寫的時候進行觸發，使用方式如下：
1 // comp.js 2 export default { 3 props: ['title'], 4 data() { 5 return { 6 objTitle: this.title, 7 time: 'Today', 8 }; 9 }, 10 computed: { 11 message() { 12 return this.time + ' ' + this.objTitle; 13 }, 14 notice: { 15 get() { 16 return this.time; 17 }, 18 set(newValue) { 19 this.time = newValue; 20 }, 21 }, 22 }, 23 onClick() { 24 console.info('get click event ' + this.message); 25 this.notice = 'Tomorrow'; 26 }, 27 }這里聲明的第一個計算屬性 message 默認只有 getter 函數，message 的值會取決于objTitle 的值的變化。getter 函數只能讀取不能改變值，當需要賦值給計算屬性時，可以提供一個 setter 函數，如示例中的 notice。
事件參數
子組件也可以通過綁定的事件向上傳遞參數，在自定義事件上添加傳遞參數的示例如下：
子組件
模板文件
1 <!-- comp.hml --> 2 <div class="item"> 3 <text class="text-style" onclick="childClicked">點擊這里查看隱藏文 本</text> 4 <text class="text-style" if="{{showObj}}">hello world</text> 5 </div>JS 文件
1 // comp.js 2 export default { 3 childClicked () { 4 this.$emit('eventType1', {text: '收到子組件參數'}); 5 this.showObj = !this.showObj; 6 }, 7 }父組件
模板文件
JS 文件
1 // xxx.js 2 export default { 3 data: { 4 text: '開始', 5 }, 6 textClicked (e) {7 this.text = e.detail.text; 8 }, 9 }插槽
匿名插槽
父組件：<tag><text>內容</text></tag>
子組件：<slot></slot>
具名插槽
父組件：<tag><text slot="slotname">內容</text></tag>
子組件：<slot name="slotname"></slot>
十六、接口
同步
同步方法調用后，必須等到返回結果，然后才能繼續后續操作。
沒有回調函數或有 Sync 后綴的，一般是同步操作
異步
異步方法調用時，不會阻礙調用者的工作。業務執行完成后，會調用開發者提供的回調函數。
有回調函數或無 Sync 后綴的，一般是異步操作
1 device.getInfo({ 2 success: function(data) { 3 console.log('成功，設備品牌:' + data.brand); 4 }, 5 fail: function(data, code) { 6 console.log('失敗. 錯誤碼:'+ code + '; 錯誤信息: ' + data); 7 }, 8 complete: function() { 9 console.log('get info complete'); 10 }, 11 });訂閱
訂閱之后，該回調函數會在完成時，或者事件變化時再次進行回調；可以執行多次
例如：訂閱地理位置，位置發生變化時，會再次執行回調函數。
1 geolocation.subscribe({ 2 success: function(data) { 3 console.log('get location. latitude:' + data.latitude); 4 }, 5 fail: function(data, code) { 6 console.log('fail to get location. code:' + code); 7 }, 8 });十七、 基本功能
應用上下文
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-basic-features-context-0000000000611801
?面路由
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-basic-features-routes-0000000000611824
彈窗
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-basic-features-pop-up-0000000000611864
定時器
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-basic-features-timer-0000001058085020
十八、網絡功能
上傳下載
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-network-uploading-downloading-0000000000626076
數據請求
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-network-data-request-0000000000626077
十九、文件數據
數據存儲
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-data-storage-0000000000626080
引入
1 import storage from '@system.storage';使用
1 // 設置內容 2 storage.set({ 3 key: 'storage_key', 4 value: 'storage value', 5 success: function() { 6 console.log('call storage.set success.'); 7 }, 8 fail: function(data, code) { 9 console.log('call storage.set fail, code: ' + code + ', data: ' + data); 10 }, 11 }); 12 13 // 獲取內容 14 storage.get({ 15 key: 'storage_key', 16 success: function(data) { 17 console.log('call storage.get success: ' + data); 18 }, 19 fail: function(data, code) { 20 console.log('call storage.get fail, code: ' + code + ', data: ' + data); 21 }, 22 complete: function() { 23 console.log('call complete'); 24 }, 25 }); 26 27 // 刪除內容 28 storage.delete({ 29 key: 'Storage1', 30 success: function() { 31 console.log('call storage.delete success.'); 32 }, 33 fail: function(data, code) { 34 console.log('call storage.delete fail, code: ' + code + ', da ta: ' + data); 35 }, 36 }); 37 38 // 清空內容 39 storage.clear({ 40 success: function() { 41 console.log('call storage.clear success.'); 42 }, 43 fail: function(data, code) { 44 console.log('call storage.clear fail, code: ' + code + ', dat a: ' + data); 45 }, 46 });文件存儲
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-file-storage-0000000000629445
存儲目錄
引入
1 import file from '@system.file';使用
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-file-storage-0000000000629445
二十、 系統功能
通知消息
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-system-notification-0000000000626084
引入
1 import notification from '@system.notification';使用
1 notification.show({ 2 contentTitle: 'title info', 3 contentText: 'text', 4 clickAction: { 5 bundleName: 'com.huawei.testapp', 6 abilityName: 'notificationDemo', 7 uri: '/path/to/notification', 8 }, 9 });震動
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-system-vibration-0000000000626085
引入
1 import vibrator from '@system.vibrator';使用
1 vibrator.vibrate({ 2 mode: 'short', 3 success() { 4 console.log('success to vibrate'); 5 }, 6 fail(data, code) { 7 console.log('handle fail, data = ${data}, code = ${code}'); 8 }, 9 });傳感器
詳情查看：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-system-sensor-0000000000626088
引入
1 import sensor from '@system.sensor';權限
- 計步器：ohos.permission.ACTIVITY_MOTION
- 心率：ohos.permission.READ_HEALTH_DATA
- 加速度：ohos.permission.ACCELEROMETER
使用
1 // 觀察加速度數據變化。再次調用時，會覆蓋前一次調用效果，即僅最后一次調用生效。 2 sensor.subscribeAccelerometer({ 3 interval: 'normal', 4 success: function(ret) { 5 console.log('get data x:' + ret.x); 6 console.log('get data y:' + ret.y); 7 console.log('get data z:' + ret.z); 8 }, 9 fail: function(data, code) { 10 console.error("subscribe accelerometer fail, code: ' + code + ', data: ' + data); 11 }, 12 });13 14 // 訂閱羅盤數據變化。再次調用時，會覆蓋前一次調用效果，即僅最后一次調用生效。15 sensor.subscribeCompass({ 16 success: function(ret) { 17 console.log('get data direction:' + ret.direction); 18 }, 19 fail: function(data, code) { 20 console.error("subscribe compass fail, code: ' + code + ', da ta: ' + data); 21 }, 22 }); 23 24 // 訂閱環境光線感應數據變化。再次調用時，會覆蓋前一次調用效果，即僅最后一次調用 生效。 25 sensor.subscribeLight({ 26 success: function(ret) { 27 console.log('get data intensity:' + ret.intensity); 28 }, 29 fail: function(data, code) { 30 console.error('subscribe light fail, code: ' + code + ', dat a: ' + data); 31 }, 32 }); 33 34 // 訂閱計步傳感器數據變化。再次調用時，會覆蓋前一次調用效果，即僅最后一次調用生 效。 35 sensor.subscribeStepCounter({ 36 success: function(ret) { 37 console.log('get step value:' + ret.steps); 38 }, 39 fail: function(data, code) { 40 console.log('subscribe step count fail, code:' + code + ', da ta:' + data); 41 }, 42 }); 43 44 // 訂閱氣壓傳感器數據變化。再次調用時，會覆蓋前一次調用效果，即僅最后一次調用生 效。 45 sensor.subscribeBarometer({46 success: function(ret) { 47 console.log('get data value:' + ret.pressure); 48 }, 49 fail: function(data, code) { 50 console.log('subscribe barometer fail, code: ' + code + ', da ta: ' + data); 51 }, 52 }); 53 54 // 訂閱心率傳感器數據變化。再次調用時，會覆蓋前一次調用效果，即僅最后一次調用生 效。 55 sensor.subscribeHeartRate({ 56 success: function(ret) { 57 console.log('get heartrate value:' + ret.heartRate); 58 }, 59 fail: function(data, code) { 60 console.log('subscribe heart rate fail, code: ' + code + ', d ata: ' + data); 61 }, 62 }); 63 64 // 訂閱設備佩戴狀態。再次調用時，會覆蓋前一次調用效果，即僅最后一次調用生效。 65 sensor.subscribeOnBodyState({ 66 success: function(ret) { 67 console.log('get on-body state value:' + ret.value); 68 }, 69 fail: function(data, code) { 70 console.log('fail to get on body state, code:' + code + ', da ta: ' + data); 71 }, 72 }); 73 74 // 獲取設備佩戴狀態。 75 sensor.getOnBodyState({ 76 success: function(ret) { 77 console.log('on body state: ' + ret.value); 78 }, 79 fail: function(data, code) { 80 console.log('handling fail, message: ' + data + ', code: ' + code); 81 },82 });地理位置
詳情參考：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-system-location-0000000000626089
引入
權限
ohos.permission.LOCATION
使用
1 // 獲取位置信息 2 geolocation.getLocation({ 3 success: function(data) { 4 console.log('經度:' + data.longitude); 5 console.log('緯度:' + data.latitude); 6 }, 7 fail: function(data, code) { 8 console.log('fail to get location. code:' + code + ', data:' + data); 9 }, 10 });網絡狀態
詳情參考：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-system-network-0000000000626092
權限
- ohos.permission.GET_WIFI_INFO
- ohos.permission.GET_NETWORK_INFO
使用
1 network.getType({ 2 success: function(data) { 3 console.log('success get network type:' + data.type); 4 }, 5 fail: function(data, code) { 6 console.log('fail to get network type code:' + code + ', dat a:' + data); 7 }, 8 });設備信息
詳情參考：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-system-device-info-0000000000626093
使用
1 import device from '@system.device';使用
1 device.getInfo({ 2 success: function(data) { 3 console.log('Device brand:' + data.brand); 4 }, 5 fail: function(data, code) { 6 console.log('Error code:'+ code + '; Error information: ' + da ta); 7 }, 8 });屏幕亮度
詳情參考：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-system-screen-brightness-0000001050025075
使用
1 import brightness from '@system.brightness';1 brightness.getValue({ 2 success: function(data){ 3 console.log('success get brightness value:' + data.value); 4 }, 5 fail: function(data, code) { 6 console.log('get brightness fail, code: ' + code + ', data: ' + data); 7 }, 8 });y7二十一、 官方 Demo
鴻蒙提供的一些具體應用實例。有代碼，有文字介紹，有效果演示
詳情查看：https://developer.harmonyos.com/cn/develop/codelabs/
JS 購物應用
詳情查看：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/JS-COMPONENTS
JS 計步器卡片
詳情查看：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/Step-Card
分布式新聞分享
詳情查看：
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-NewsClient
分布式親自教育
詳情查看：
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-EducationSystem
總結
以上是生活随笔為你收集整理的HarmonyOS JS UI的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nextcloud 多人共享
- 下一篇： Sping、SpringMVC框架教程