鴻蒙JS 開發整理

十五十五發表於2022-04-03

鴻蒙JS

一、前言：

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時，需要先宣告才可使用。同時，希望您在使用提供的API時，請注意檢視其所支援的版本，如API4、API6，也請注意您的鴻蒙系統支援到API幾。

例：在網路請求資料中，fetch是更早的版本支援，如您需更新、更好的網路請求，官方是這樣說明的。

同時，官方提供了模組的各種引數、方法說明，可以更好的使用它。

自己踩過的坑，希望能給後者以提示。瞭解更多：網路請求

部分程式碼示例

//，推薦使用新的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
            }
        })
    },
 }

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