鴻蒙ArkUI體驗:Hexo博客客戶端開發心得


最近部門也在跟進鴻蒙平臺的業務開發,自己主要是做 Android 開發,主要使用 Kotlin/Java 語言。,需要對新的開發平臺和開發模式進行學習,在業余時間開了個項目練手,做了個基于 Hexo 博客內容開發的App。鴻蒙主要使用ArkTS語言和ArkUI框架進行開發,有使用 Jetpack Compose 和 JavaScript/TypeScript 的開發經驗的話,上手會比較的輕松。本文主要介紹做的App功能以及對鴻蒙開發體驗的一個總結。

App 簡介

后臺數據來自 Hexo 生成的博客文章,利用 hexo-generator-wxapi 生成 api .json 文件,再利用 七牛云 提供對圖片和 .json 文件 CDN。

實現的功能

  • 博客列表分頁加載
  • 文章詳情加載
  • 文章按分類/標簽展示
  • 文章內容統計
  • 深色/淺色模式切換
  • 數據本地緩存

功能預覽

博客列表統計個人文章詳情分類標簽

依賴項

Hexo
  • Hexo 快速、簡潔且高效的博客框架
  • hexo-generator-wxapi 用于將 Hexo 博客內容生成 api 風格的.json文件
  • 七牛云 提供對圖片和.json文件 CDN加速
HarmonyOS
  • ArkTS ArkTS在TypeScript(簡稱TS)生態基礎上做了進一步擴展,保持了TS的基本風格,同時通過規范定義強化開發期靜態檢查和分析,提升代碼健壯性,并實現更好的程序執行穩定性和性能。
  • ArkUI ArkUI(方舟UI框架)為應用的UI開發提供了完整的基礎設施,包括簡潔的UI語法、豐富的UI功能(組件、布局、動畫以及交互事件),以及實時界面預覽工具等,可以支持開發者進行可視化界面開發。
  • ohos_pull_to_refresh 列表加載/刷新控件(沒有’No more’的狀態)
  • MMKV 是基于 mmap 內存映射的 key-value 組件

鴻蒙開發總結

ArkTs 語言

ArkTS 是 TypeScript 的超集,TypeScript 又是 JavaScript 的超集,所以對于基本數據類型使用的是 TypeScript 語法。他們三者的關系如下圖所示:

相關的差異可以參考社區話題討論 ArkTS與Typescript的區別?
上圖也來自這里的討論。

這里主要記錄一下自己使用過程中踩過的坑:

基本語言類型

Number 和 number 是兩個不同的類型,Number 是 JavaScript 中的一個全局對象,可以使用 new Number() 來創建一個 Number 對象。同理對于 String 和 string,Boolean 和 boolean 也是一樣的,大寫開頭的是包裝對象類型,小寫的是原始類型,這點Java/kotlin也有類似的包裝對象比較好理解,但 Object 居然也有大小寫之區分相比難理解點,寫代碼的時候好幾次忽略了這個事,Object 是所有對象的基類,object 表示非原始類型(即不是 number、string、boolean、symbol、null 或 undefined 的所有類型)。可以是任何對象、數組、函數、類實例等。

let obj: object;
obj = { a: 1 };         // ? 正確:普通對象
obj = [1, 2, 3];        // ? 正確:數組
obj = () => {};         // ? 正確:函數
obj = new Date();       // ? 正確:類實例obj = 42;               // ? 錯誤:原始類型 number
obj = "hello";          // ? 錯誤:原始類型 string

兩則的區別

特性objectObject
允許的值僅非原始類型(對象、數組等)任意類型(包括原始值)
原始值處理禁止自動裝箱(如 42 → Number)
使用場景明確限制為非原始類型時極少使用(通常用 unknown 或具體類型替代)
Map 等集合類當作普通 JavaScript 對象來操作
let map = new Map<string, object>();
map["key"] = value;            // ? 錯誤用法!
console.log(map.get("biz"));   // ? 輸出 undefined

最開始挺奇怪的 map 明明設置了值,但是對應的 map size 為0,遍歷 map 也沒有數據。后來才發現是這種方式 不會 觸發 Map 的內部機制,而是繞過了 Map 的方法,直接操作對象的屬性,賦值后,鍵值對 不會 被存入 Map 的真實存儲中,而是作為對象的普通屬性存在。正確的用法是:

let map = new Map<string, object>();
map.set["key"] = value;        //  ? 正確用法!
console.log(map.get("biz"));   //  ? 輸出 value
struct 的困擾

在 js 里面是沒有 struct 這個關鍵詞的,從剛接觸到現在它唯一的作用就是:和 @Component綁定聲明一個UI控件。例如:

@Component
export struct ToolBar{}

@Componentstruct 兩則缺一不可,既然必須有 @Component來標注這是一個UI控件,為什么不能下面這樣呢?能省掉一個關鍵字。

@Component
export class ToolBar {}

同樣困擾的人還有很多,這里有一份討論定義組件時的stuct關鍵字是什么?
官方也有一份聊勝于無的介紹

struct和class的區別是什么?

struct只在自定義組件中使用,@Component裝飾的struct就是自定義組件,自定義組件和class是兩個概念,自定義組件沒有類型,也不能等同于class。如果開發者需要使用組件作為參數在組件之間傳遞,可以使用自定義占位節點。

我猜測這樣是為了省掉對@Component裝飾器編譯的工作量,如果使用 class 聲明,那么聲明的UI控件就有“面向對象”的能力,實際上只希望它是一個UI控件聲明,不需要它有其他的能力。難道不能對 @Component 裝飾過的對象收回“面向對象”的能力么?當然能啊,估計要做很多編譯檢查的事兒。另外,從開發理解的層面上來講,它確實也已經不是"對象"了,它只是一個干巴巴的一個UI結構,所以干脆就搞了一個新的關鍵詞 struct。

ArkUI 框架

整體框架使用的方式和 Jetpack Compose 類似,都是聲明式UI框架。compose 里面使用 @Composable來標記某個方法這個方法便成了UI控件,控件里面的狀態管理使用 remember+ mutableState來控制。而 ArkUI 通過 @State、@Link、@Prop 等裝飾器來控制。了解了這些個裝飾器的用法,基本上就能理解 ArkUI 的開發流程了。

構建 UI 的 @Component @Builder

@Component 和 @Builder 組合起來實現的差不多就是 Compose 里面使用 @Composable 裝飾某個方法的作用,用于構建 UI 或可復用的邏輯單元。
@Component
用于創建一個自定義組件,組件可以包含獨立的 UI 結構、狀態管理和生命周期。

@Builder
定義可復用的 UI 片段,用于創建一個UI 構建函數,封裝一段可復用的 UI 代碼塊。不是獨立組件,而是嵌入到其他組件或布局中執行,主要作用是復用和邏輯隔離,例如:關于頁面,里面的文本是差不多的樣式,只是內容不一樣,那么只需要保留一個 text 屬性出來接收參數。或者某塊UI比較復雜,可以抽離一部分UI成為一個獨立的UI邏輯模塊。

構建 UI 的狀態控制裝飾器

@State
比較常用的裝飾器,和 Compose 里面 remember+mutableStateOf 的作用差不多,對應的值改變之后,對相關的使用到該屬性UI的地方進行刷新。

@Prop
@Prop 裝飾的變量和父組件建立單向的同步關系,@Prop變量允許在本地修改,但修改后的變化不會同步回父組件。

也就是在某個 @Component 的組件內有一個 @State 裝飾的屬性,傳遞到子 @Component 組件 @Prop 修飾的屬性。子控件對這個屬性修改之后,父控件不會對這個改變感知,父控件UI不會改變。

@Link
子組件中被@Link裝飾的變量與其父組件中對應的數據源建立雙向數據綁定。
跟 @Prop 的作用類似,不過是雙向的,子控件對這個屬性修改之后,父控件會感知這個變化,父控件UI會隨著這個屬性改變而改變。

@BuilderParam
主要用于動態注入 UI 構建邏輯(即 @Builder 函數),實現父組件向子組件傳遞可定制的 UI 片段,也就是向子控件傳遞 UI 參數。

基本上比較常用到的就這些,還有很多例如:@LocalBuilder @StorageLink @Styles等,都是為了解決開發過過程中遇到的問題,但是只要掌握了 ArkUI UI組件的聲明周期和狀態管理的基本原理理解其他裝飾器還是比較簡單的。

總結

總體開發體驗下來,鴻蒙開發學習成本并不是特別高,比較快能上手,但設計的 api 更像一個縫合怪,且使用上不太收斂。很多庫還需要再建設,例如音視頻開發對應的支持庫還不是特別成熟。不過,作為一個從頭搞的生態來說能實現成這樣已經很不錯了,就像此前武磊登陸西甲,以及目前被看好的青年新星王鈺棟,都是"自己的孩子",需要邁出第一步。現在,很多公司也在適配鴻蒙了,期待未來能從 Android 跟 iOS 的生態中爭奪出一片大市場。

工程相關源碼:
blog_harmony

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/81448.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/81448.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/81448.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【和春筍一起學C++】(十四)指針與const

將const用于指針&#xff0c;有兩種情況&#xff1a; const int *pt; int * const pt; 目錄 1. const int *pt 2. int * const pt 3. 擴展 1. const int *pt 首先看第一種情況&#xff0c;const在int的前面&#xff0c;有如下語句&#xff1a; int peoples12&#xff1…

本地緩存更新方案探索

文章目錄 本地緩存更新方案探索1 背景2 方案探索2.1 初始化2.2 實時更新2.2.1 長輪詢2.2.1.1 client2.2.2.2 server 本地緩存更新方案探索 1 背景 大家在工作中是否遇到過某些業務數據需要頻繁使用&#xff0c;但是數據量不大的情況&#xff0c;一般就是幾十條甚至幾百條這種…

深入理解 requestIdleCallback:瀏覽器空閑時段的性能優化利器

requestIdleCallback 核心作用 requestIdleCallback 是瀏覽器提供的 API&#xff0c;用于將非關鍵任務延遲到瀏覽器空閑時段執行&#xff0c;避免阻塞用戶交互、動畫等關鍵任務&#xff0c;從而提升頁面性能體驗。 基本語法 const handle window.requestIdleCallback(callb…

51單片機——交通指示燈控制器設計

設計目標 1、設計一交通燈控制&#xff0c;控制東西方向的紅、黃、綠燈和南北方向的紅、黃、綠燈。 2、可手動控制和自動控制&#xff0c;設置兩個輸入控制開關。 手動/自動開關&#xff0c;通過P11的按鍵輸入控制 3、手動&#xff1a;設置開關P11&#xff0c;兩種情況&#x…

神經網絡語言模型(前饋神經網絡語言模型)

神經網絡語言模型 什么是神經網絡&#xff1f;神經網絡的基本結構是什么&#xff1f;輸入層隱藏層輸出層 神經網絡為什么能解決問題&#xff1f;通用近似定理為什么需要權重和偏置&#xff1f;為什么需要激活函數&#xff1f;權重是如何確定的&#xff1f;1. 窮舉2. 反向傳播主…

信息系統項目管理師高級-軟考高項案例分析備考指南(2023年案例分析)

個人筆記整理---僅供參考 計算題 案例分析里的計算題就是進度、掙值分析、預測技術。主要考査的知識點有:找關鍵路徑、求總工期、自由時差、總時差、進度壓縮資源平滑、掙值計算、預測計算。計算題是一定要拿下的&#xff0c;做計算題要保持頭腦清晰&#xff0c;認真讀題把PV、…

unordered_map和unordered的介紹和使用

目錄 unordered系列關聯式容器 unordered_map unordered_map的接口說明 unordered_map的定義方式 unordered_map接口的使用 unordered_map的容量 unordered_map的迭代器 unordered_map的元素訪問 unordered_map的查詢 unordered_map的修改操作 unordered_multimap u…

設計模式7大原則與UML類圖詳解

設計模式7大原則與UML類圖詳解 引言 &#x1f31f; 在軟件工程領域&#xff0c;設計模式和UML&#xff08;統一建模語言&#xff09;是提高代碼質量、增強系統可維護性的重要工具。設計模式提供了解決軟件設計中常見問題的通用方案&#xff0c;而UML則為我們提供了一種可視化的…

計算機視覺與深度學習 | Python實現ARIMA-LSTM時間序列預測(完整源碼和數據)

ARIMA-LSTM混合模型 1. 環境準備2. 數據生成(示例數據)3. 數據預處理4. ARIMA建模5. LSTM殘差建模6. 混合預測7. 結果可視化完整代碼說明1. **數據生成**2. **ARIMA建模**3. **LSTM殘差建模**4. **混合預測**5. **性能評估**參數調優建議擴展方向典型輸出以下是使用Python實現…

Docker部署單節點Elasticsearch

1.Docker部署單節點ES 1.前置條件 配置內核參數 echo "vm.max_map_count262144" >> /etc/sysctl.conf sysctl -w vm.max_map_count262144準備密碼 本文所有涉及密碼的配置&#xff0c;均使用通用密碼 Zzwl2024。 生產環境&#xff0c;請用密碼生成器生成20…

pe文件二進制解析(用c/c++解析一個二進制pe文件)

pe文件二進制解析 c解析pe文件控制臺版本 #include<iostream> #include<windows.h> #include<vector>/*RVA&#xff08;相對虛擬地址&#xff09;與FOA&#xff08;文件偏移地址&#xff09;的轉換1.得到 的值&#xff1a;內存地址 - ImageBase2.判斷是否位…

融智學視域下的系統性認知增強框架——基于文理工三類AI助理賦能HI四階躍遷路徑

融智學視域下的系統性認知增強框架 ——基于文理工三類AI助理賦能HI四階躍遷路徑 一、如何排除50個認知偏差&#xff1a;消除50類偏差的精準矯正系統 1. 技術架構 文科AI&#xff1a; 構建文化語義場&#xff08;Cultural Semantic Field, CSF&#xff09;&#xff0c;通過…

MMDetection環境安裝配置

MMDetection 支持在 Linux&#xff0c;Windows 和 macOS 上運行。它需要 Python 3.7 以上&#xff0c;CUDA 9.2 以上和 PyTorch 1.8 及其以上。 MMDetection 至今也一直更新很多個版本了&#xff0c;但是對于最新的pytorch版本仍然不支持&#xff0c;我安裝的時候仍然多次遇到m…

如何實現k8s高可用

一、控制平面高可用設計 多主節點部署 ? API Server 冗余&#xff1a;部署至少 3 個 Master 節點&#xff0c;每個節點運行獨立的 API Server&#xff0c;通過負載均衡器&#xff08;如 Nginx、HAProxy、云廠商 LB&#xff09;對外提供統一入口。 ? 選舉機制&#xff1a;Sche…

記錄心態和工作變化

忙中帶閑的工作 其實工作挺忙的, 總是在趕各種功能點. 好巧的是iOS那邊因為上架的問題耽擱了一些時間, 從而讓Android的進度有了很大的調整空間. 更巧的是后端那邊因為對客戶端的需求不是很熟悉, 加上Android海外這塊的業務他也是第一次接觸. 所以需要給他留一些時間把各個環節…

JVM 雙親委派機制

一、從 JDK 到 JVM&#xff1a;Java 運行環境的基石 在 Java 開發領域&#xff0c;JDK&#xff08;Java Development Kit&#xff09;是開發者的核心工具包。它不僅包含了編譯 Java 代碼的工具&#xff08;如 javac&#xff09;&#xff0c;還內置了 JRE&#xff08;Java Run…

java開發之異常

一 結構 Throwable分為Exception和error Exception分為RuntimeException&#xff08;運行時異常&#xff09;和其他異常 主動拋出運行時異常和非運行時異常的區別 1、throw RuntimeException&#xff08;或運行時異常的子類&#xff09; 編譯時不會報錯。 2、throw Excepti…

MySQL 中 JOIN 和子查詢的區別與使用場景

目錄 一、JOIN:表連接1.1 INNER JOIN:內連接1.2 LEFT JOIN:左連接1.3 RIGHT JOIN:右連接1.4 FULL JOIN:全連接二、子查詢:嵌套查詢2.1 WHERE 子句中的子查詢2.2 FROM 子句中的子查詢2.3 SELECT 子句中的子查詢三、JOIN 和子查詢的區別3.1 功能差異3.2 性能差異3.3 使用場…

2025年第三屆盤古石杯初賽(智能冰箱,監控部分)

前言 所以去哪里可以取到自己家里的智能家居數據呢&#xff1f;&#xff1f;&#xff1f;&#xff1f; IOT物聯網取證 1、分析冰箱&#xff0c;請問智能冰箱的品牌&#xff1f; [答案格式&#xff1a;xiaomi] Panasonic2、請問智能冰箱的型號&#xff1f; [答案格式&#x…

【強化學習】強化學習算法 - 馬爾可夫決策過程

文章目錄 馬爾可夫決策過程 (Markov Decision Process, MDP)1. MDP 原理介紹2. MDP 建模/實現步驟3. MDP 示例&#xff1a;簡單網格世界 (Grid World) 馬爾可夫決策過程 (Markov Decision Process, MDP) 1. MDP 原理介紹 馬爾可夫決策過程 (MDP) 是強化學習 (Reinforcement L…