鴻蒙JS 開發整理

• 2022 年 4 月 3 日
• 筆記
• 鴻蒙

一、前言：

5月25日，華為對外宣布計劃在6月2日正式舉辦鴻蒙手機發布會，這也是2019年華為發布鴻蒙系統之後正式搭載的到智慧手機。

6月2日晚，華為舉辦 HarmonyOS 2及華為全場景新品發布會，正式發布 HarmonyOS 2，發布會上，其所印象最深刻的，便是”萬物互聯”。

後來也有幸接觸過鴻蒙的JS UI框架應用開發。寫下此篇文章，只做一個學生所應有的學習。

這裡將網路收集而來的資訊整合在此，一是個人的知識了解記錄，二是提供參考。如您想直觀了解更多資訊或需要完整了解，請移至底部，將提供給相關傳送門。

“萬物互聯的時代，沒有人會是一座孤島”

二、鴻蒙 JS UI框架

2.1 JS UI特性

• 聲明式編程，JS UI框架採用類HTML和CSS聲明式程式語言作為頁面布局和樣式的開發語言。業務邏輯採用規範標準的JavaScript語言
• 跨設備，支援UI跨設備顯示能力，運行時自動映射到不同設備類型，降低開發者多設備適配成本
• 高性能，JS UI框架包含了許多核心控制項，各類組件等。針對聲明式語法進行了渲染流程的優化

2.2 架構

鴻蒙JS UI，IDE中支援的是類似小程式的開發方式，如xx.html、xx.css、xx.js

在開發中，我發現鴻蒙的JS UI框架，遵循著MVVM模式，這會讓學過Vue、Angular的人，更容易上手。

2.3 新的UI框架結構

三、API

在調用某個API時，需要先聲明才可使用

其寫法與Vue類似。

部分程式碼示例

//，推薦使用新的http方式
//import http from '@ohos.net.http';
import fetch from '@system.fetch'; //網路請求，API 6以下適用

import router from '@system.router'; //導入路由模組
import storage from '@system.storage'; //導入存儲
export default {
   data: {
       name:"hello"
   },
    //生命周期
    onInit() {
       //this.title = this.$t('strings.world');
        //this.cinematext = this.$st('st.cinematext');
        //this.cinematext = "xxx";
    },
   onShow(){
    },
    //路由
    videoplay(e) {
        router.push({
            uri: "pages/page2/page2",
            params: {
                method:e
            }
        })
    },
 }

了解更多：網路請求

這有一個很好的教程示例:如何開發一個鴻蒙應用，起始篇

四、最後

本篇文章主要參考:關於鴻蒙系統 JS UI 框架源碼的分析

鴻蒙開發分為應用開發和設備開發，這裡主要提供應用開發類傳送門：

官方：Harmony OS、開發者文檔、JS API參考

學習：基礎了解、開發者學堂及社區

如想打包項目在真機上調試，參考:鴻蒙 真機-HAP開發編譯調試