帶你走進 HarmonyOS:前端如何迎接新技術的到來
一、HarmonyOS 簡介
HarmonyOS 是一款 “面向未來”、面向全場景(移動辦公、運動健康、社交通訊、媒體娛樂等)的分散式作業系統。在傳統的單裝置系統能力的基礎上,HarmonyOS 提出了基於同一套系統能力、適配多種終端形態的分散式理念,能夠支援多種終端裝置。
2024 年開始,更新後的鴻蒙,Android APK 將不允許在 HarmonyOS NEXT 上執行,因為系統已經不存在 AOSP 程式碼。更新後的鴻蒙,它會使用全自研核心,僅支援鴻蒙核心和鴻蒙系統的應用,將會減少了 40% 的冗餘程式碼,使系統的流暢度、能效、純淨安全特性大為提升。對於開發者而言,這絕對是一件重要的事,很可能因為業務需求,需要重新學習一門新型語言。
二、 HarmonyOS 應用開發語言 ArkTS 簡介
ArkTS 是 HarmonyOS 應用開發語言。它在保持 TypeScript(簡稱 TS)基本語法風格的基礎上,對 TS 的動態型別特性施加更嚴格的約束,引入靜態型別。同時,提供了宣告式 UI、狀態管理等相應的能力,讓開發者可以以更簡潔、更自然的方式開發高效能應用。ArkTS 借鑑了 TypeScript 的語法風格,對前端開發人員很友好。
ArkTS 提供了簡潔自然的宣告式語法、元件化機制、資料-UI 自動關聯等能力,實現了貼近自然語言,書寫效率更高的程式設計方式,為開發者帶來易學、易懂、極簡開發的優質體驗。有過 Compose 或者 Flutter 開發經驗的小夥伴去學習 HarmonyOS 應用開發會非常簡單,容易上手。
ArkCompiler 執行時在 HarmonyOS 上提供了 Worker API 支援併發程式設計。在執行時例項記憶體隔離的基礎上,ArkCompiler 透過共享執行例項中的不可變或者不易變的物件、內建程式碼塊、方法位元組碼等技術手段,最佳化了併發執行例項的啟動效能和記憶體開銷。
三、HarmonyOS 開發框架 ArkUI 及跨平臺應用開發框架 ArkUI-X 簡介
ArkUI 是一套構建分散式應用介面的宣告式 UI 開發框架。它使用極簡的 UI 資訊語法、豐富的 UI 元件、以及實時介面預覽工具,幫助您提升 HarmonyOS 應用介面開發效率 30%。您只需使用一套 ArkTS API,就能在多個 HarmonyOS 裝置上提供生動而流暢的使用者介面體驗。
ArkUI 更接近於前端框架的資料繫結機制,邏輯和 UI 分離透過利用資料雙向繫結機制傳遞頁面變化邏輯,將流轉 7 個步驟簡化為 2 個步驟。可將跨端遷移和協同的開發程式碼量降低 40% 以上。
ArkUI-X 進一步將 ArkUI 擴充套件到了多個 OS 平臺:目前支援 OpenHarmony、HarmonyOS、Android、 iOS,後續會逐步增加更多平臺支援。開發者基於一套主程式碼,就可以構建支援多平臺的精美、高效能應用。
四、HarmonyOS 開發工具 DevEco Studio 簡介
HUAWEI DevEco Studio 是基於 IntelliJ IDEA Community 開源版本打造,為執行在 HarmonyOS 和 OpenHarmony 系統上的應用和服務(以下簡稱應用/服務)提供一站式的開發平臺。下載連結如下: https://developer.harmonyos.com/cn/develop/deveco-studio#download
使用 DevEco Studio,只需要按照如下幾步,即可輕鬆開發並上架一個應用/服務到華為應用市場。
五、HarmonyOS 語法示例 - 實現一個小應用
主要使用 Tabs、 Row、Column、Button 等常用元件
應用開發之前,需要你對 Typescript 與 ArkTS 文件有過基本瞭解,實現效果如下:
1、首先建立一個空專案,初始化完成模版
修改 src>main>ets>pages>index.ets 檔案程式碼如下,檔案圖片資源可根據程式碼自己新增到 src>resources>base>media 資料夾中,缺少模組使用自動修復功能:
// index.ets 入口檔案
@Entry
@Component
struct Index {
@State fontColor: string = '#182431'
@State selectedFontColor: Resource = $r('app.color.text_color_one')
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
// tabs 資料
private tabsList: { id: number, src: Resource, name: string }[] = [
{ id: 0, src: $r('app.media.home'), name: 'tab1', },
{ id: 1, src: $r('app.media.category'), name: 'tab2' },
{ id: 0, src: $r('app.media.folder'), name: 'tab3' },
{ id: 0, src: $r('app.media.profile'), name: 'tab4' }
]
@Builder TabBuilder(index: number, name: string, icon: Resource) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
Image(icon)
.width(30)
.height(30)
.fillColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) }
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
}
build() {
Column(){
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
TabContent() { Home() }
.tabBar(this.TabBuilder(0, this.tabsList[0].name, this.tabsList[0].src))
TabContent() { Category() }
.tabBar(this.TabBuilder(1, this.tabsList[1].name, this.tabsList[1].src))
TabContent() { Folder() }
.tabBar(this.TabBuilder(2, this.tabsList[2].name, this.tabsList[2].src))
TabContent() { Profile() }
.tabBar(this.TabBuilder(3, this.tabsList[3].name, this.tabsList[3].src))
}
.scrollable(false)
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(0)
.width('100%')
.height('100%')
.onChange((index: number) => {
this.currentIndex = index
})
}
.width('100%')
.height('100%')
}
}
2、建立 Home.ets、Category.ets、Folder.ets、Profile.ets 檔案,程式碼如下:
// 公共元件:AppBar.ets
import router from '@ohos.router'
@Componentexport struct AppBar {
title: string = ''
goBack() {
console.log('返回上一頁')
router.back()
}
build() {
Row(){
if (parseInt(router.getLength()) > 1) {
Image($r('app.media.appbar_back'))
.width(36)
.padding({left: 10})
.fillColor('#eeeeee')
.onClick(() => {
this.goBack()
})
}
Row(){
Text(this.title)
.fontSize(18)
.fontColor('#eeeeee')
.textAlign(TextAlign.Center)
}
.layoutWeight(1)
.justifyContent(FlexAlign.Center)
if (parseInt(router.getLength()) > 1) {
Row().width(46).height('100%')
}
}
.width('100%')
.height(46)
.backgroundColor($r('app.color.text_color_one'))
}
}
// Home.ets
@Component
export struct Home {
build() {
Column() {
AppBar({title: '首頁'})
Button('跳轉到詳情')
.margin({top: 40})
.onClick(() => {
router.pushUrl({
url: 'pages/views/HomeDetail', // 跳轉地址可根據自己專案修改
params: { type: '來自於home' }
})
})
}
.width('100%')
.height('100%')
}
}
// Category.ets
@Component
export struct Category {
build(){
Column(){
Text('Category').fontSize(30)
}
}
}
// Folder.ets
@Component
export struct Folder {
build(){
Column(){
Text('Folder').fontSize(30)
}
}
}
// Profile.ets
@Component
export struct Profile {
build(){
Column(){
Text('Profile').fontSize(30)
}
}
}
程式碼量並不多,編碼格式與 flutter 很相似,語法風格與 Typescript 相似,前端開發友好,可以很快的完成應用的開發。
六、HarmonyOS 總結
開發人員使用 ArkTS 確實效率很高,語法非常現代化,對於前端及客戶端人員友好。目前使用 HarmonyOS 開發的應用還不太多,社群生態完善需要很長的路要走,如果 HarmonyOS 應用效能頂得住,和官網宣傳的一樣,那透過 ArkTS 開發誇端應用將是一個很好的選擇。現在已經有很多框架開始相容 HarmonyOS,例如 Taro、Flutter、uniapp 等。畢竟是國產,各個大廠都在陸續開始探索使用,相信在未來 HarmonyOS 會越來越好!
相關文章
- 帶你走進memcache,老牌記憶體快取技術記憶體快取
- 帶你走進 RedisRedis
- 從圖靈原創談起,帶你走進國產技術書的時代圖靈
- 中業興融帶你走進網際網路技術新時代,惠民初心不變
- 帶你走進Java集合之ArrayListJava
- 帶你走進Java集合之HashMapJavaHashMap
- 帶你走進CSS定位詳解CSS
- “Mate50系列將攜帶一個很牛的新技術到來
- 前端技術演進(八):未來前端趨勢前端
- Miox帶你走進動態路由的世界路由
- 走進JavaWeb技術世界10:從JavaBean講到SpringJavaWebBeanSpring
- 帶你走進Java集合之ConcurrentHashMapJavaHashMap
- 帶你走進零知識證明
- 關於向量瓦片技術支援前端渲染帶來的思考前端
- 解讀新技術,解鎖新玩法,HarmonyOS開發者日杭州站等你來參加
- 走進JavaWeb技術世界3:JDBC的進化與連線池技術JavaWebJDBC
- 前端技術演進(七):前端跨棧技術前端
- APISpace 帶你一起走進西湖美景API
- 一張圖帶你走進Retrofit原始碼世界原始碼
- 前端技術學習路線及技術彙總(從瞭解到學習,你的思維格局決定你的未來)前端
- 帶你走進神一樣的Elasticsearch索引機制Elasticsearch索引
- 帶你走進Choerodon豬齒魚的知識管理
- 手把手帶你走進Babel的編譯世界Babel編譯
- 福布斯:加密貨幣如何在技術領域帶來新的就業機會?加密就業
- 走進JavaWeb技術世界1:JavaWeb的由來和基礎知識JavaWeb
- 前端如何快速進階,突破技術瓶頸?前端
- 前端技術演進(一):Web前端技術基礎前端Web
- 【重構前端知識體系之HTML】2022,你還會來看HTML嗎?帶你重溫亦或走進!前端HTML
- CSS基本知識點——帶你走進CSS的新世界CSS
- 視覺化,帶你走進“真實”的虛擬世界視覺化虛擬世界
- 帶你走進Oracle資料安全的世界一觀(轉)Oracle
- 吳軍:ChatGPT不算新技術革命,帶不來什麼新機會ChatGPT
- 帶你走進MySQL全新高可用解決方案-MGRMySql
- 帶你走進webpack世界,成為webpack頭號玩家。Web
- 小菜前端的技術棧是如何規劃和演進的前端
- 2018年你應該瞭解的前端新技術前端
- 百度MIP技術強勢來襲 帶你的網頁飈起來網頁
- 走進AI影像生成核心技術 - DiffusionAI