帶你走進 HarmonyOS：前端如何迎接新技術的到來

京东云开发者發表於2024-03-13
前端

一、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 會越來越好！

相關文章