【HarmonyOS HiSpark AI Camera試用連載 】鴻蒙JS UI介紹

小嵌

【HarmonyOS HiSpark AI Camera試用連載 】鴻蒙JS UI介紹,   

2.png （169.21 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

昨天 20:04 上傳

JS UI框架是一種跨設(shè)備的高性能UI開(kāi)發(fā)框架，支持聲明式編程和跨設(shè)備多態(tài)UI。

HTML5

CSS

JavaScript

JS UI框架適用于手機(jī)（Phone）、平板（Tablet）、智慧屏（TV）和智能穿戴（Wearable）應(yīng)用開(kāi)發(fā)，針對(duì)輕量級(jí)智能穿戴（Lite Wearable）請(qǐng)參考輕量級(jí)智能穿戴開(kāi)發(fā)。



聲明式編程

JS UI框架采用類HTML和CSS聲明式編程語(yǔ)言作為頁(yè)面布局和頁(yè)面樣式的開(kāi)發(fā)語(yǔ)言，頁(yè)面業(yè)務(wù)邏輯則支持ECMAScript規(guī)范的JavaScript語(yǔ)言。JS UI框架提供的聲明式編程，可以讓開(kāi)發(fā)者避免編寫UI狀態(tài)切換的代碼，視圖配置信息更加直觀。

跨設(shè)備

開(kāi)發(fā)框架架構(gòu)上支持UI跨設(shè)備顯示能力，運(yùn)行時(shí)自動(dòng)映射到不同設(shè)備類型，開(kāi)發(fā)者無(wú)感知，降低開(kāi)發(fā)者多設(shè)備適配成本。

高性能

開(kāi)發(fā)框架包含了許多核心的控件，如列表、圖片和各類容器組件等，針對(duì)聲明式語(yǔ)法進(jìn)行了渲染流程的優(yōu)化。

整體架構(gòu)

JS UI框架包括應(yīng)用層（Application）、前端框架層（Framework）、引擎層（Engine）和平臺(tái)適配層（Porting Layer）。



1.png （94.34 KB, 下載次數(shù): 0）

下載附件  保存到相冊(cè)  

昨天 20:08 上傳





Application

應(yīng)用層表示開(kāi)發(fā)者使用JS UI框架開(kāi)發(fā)的FA應(yīng)用，這里的FA應(yīng)用特指JS FA應(yīng)用。使用Java開(kāi)發(fā)FA應(yīng)用請(qǐng)參考Java UI框架。

Framework

前端框架層主要完成前端頁(yè)面解析，以及提供MVVM（Model-View-ViewModel）開(kāi)發(fā)模式、頁(yè)面路由機(jī)制和自定義組件等能力。

Engine

引擎層主要提供動(dòng)畫解析、DOM（Document Object Model）樹(shù)構(gòu)建、布局計(jì)算、渲染命令構(gòu)建與繪制、事件管理等能力。

Porting Layer

適配層主要完成對(duì)平臺(tái)層進(jìn)行抽象，提供抽象接口，可以對(duì)接到系統(tǒng)平臺(tái)。比如：事件對(duì)接、渲染管線對(duì)接和系統(tǒng)生命周期對(duì)接等。

JS FA概述

JS UI框架支持純JavaScript、JavaScript和Java混合語(yǔ)言開(kāi)發(fā)。JS FA指基于JavaScript或JavaScript和Java混合開(kāi)發(fā)的FA，下面主要介紹：JS FA在HarmonyOS上運(yùn)行時(shí)需要的基類AceAbility、加載JS FA主體的方法、JS FA開(kāi)發(fā)目錄。

AceAbility

AceAbility類是JS FA在HarmonyOS上運(yùn)行環(huán)境的基類，繼承自Ability。開(kāi)發(fā)者的應(yīng)用運(yùn)行入口類應(yīng)該從該類派生，代碼示例如下

• public class MainAbility extends AceAbility {
    
  
•     @Override
    
  
•     public void onStart（Intent intent） {
    
  
•         super.onStart（intent）;
    
  
•     }
    
  
• 
    
  
•     @Override
    
  
•     public void onStop（） {
    
  
•         super.onStop（）;
    
  
•     }
    
  
• }
  

復(fù)制代碼