第10章 HarmonyOs开发图解 用 JS 开发 UIHarmonyOS 学习系统 | 阶段二进阶实战期建议学习时长2-3 周学习目标序号能力1理解 JS UI 声明式编程模型和 MVVM 架构2掌握 hml/css/js 三件套的开发流程3能实现数据绑定和事件处理4了解 JS FA 调用 Java PA 的两种方式核心图解内容讲解10.1 JS UI 概述如果你有网页开发经验JS UI 会让你感到非常亲切.hml 文件 HTML 文件——定义页面结构但叫 hml 不是 html.css 文件 CSS 文件——定义页面样式跟 CSS 几乎一样.js 文件 JavaScript 文件——定义业务逻辑标准 ECMAScriptAceAbility Java FA 的 JS 版本——JS 页面的宿主数据绑定 {{ }} Vue.js 的模板语法——变量变了界面自动更新JS UI 的基础能力能力说明声明式编程类 HTML 和 CSS 声明式语言避免编写 UI 状态切换代码跨设备运行时自动映射到不同设备类型开发者无感知高性能针对声明式语法进行了渲染流程优化JS UI 框架架构JS UI 框架分为四层应用层 (Application Layer)开发者使用 JS UI 框架开发的 FA 应用前端框架层 (Framework Layer)MVVM 开发模式、页面路由机制、自定义组件引擎层 (Engine Layer)DOM 树构建、布局计算、渲染命令构建、事件管理平台适配层 (Porting Layer)抽象接口对接到系统平台基准宽度手机和智慧屏以720px逻辑像素为基准宽度智能穿戴设备以454px为基准宽度实际显示时会根据屏幕物理像素自动缩放10.2 JS FA 开发创建 JS FA 应用创建工程时选择Empty Ability(JS)模板。JS FA 通过AceAbility类加载在 config.json 中配置js字段指定页面路由。js:{name:default,pages:[pages/index/index]}AceAbilityAceAbility是 JS FA 在 HarmonyOS 上运行环境的基类继承自Ability。默认代码publicclassMainAbilityextendsAceAbility{OverridepublicvoidonStart(Intentintent){super.onStart(intent);}}如果修改了 config.json 中的js.name需要在onStart()中调用setInstanceName()OverridepublicvoidonStart(Intentintent){super.setInstanceName(JSComponentName);super.onStart(intent);}JS FA 开发目录结构main/js/default/ ├── i18n/ # 国际化 │ ├── en-US.json │ └── zh-CN.json ├── common/ # 公共资源 │ └── images/ └── pages/ └── index/ ├── index.hml # 页面结构 ├── index.css # 页面样式 └── index.js # 业务逻辑三件套详解index.hml页面结构divclasscontainertextclasstitle{{ title }}/textimagesrc{{ isPressed ? $r(app.media.liked) : $r(app.media.unliked) }}classlike-imgonclicktoggleLike/imagetextclasscount{{ count }}/text/divindex.css页面样式.container{flex-direction:column;align-items:center;justify-content:center;}.title{font-size:30px;color:#333333;margin-bottom:20px;}.like-img{width:100px;height:100px;}.count{font-size:24px;color:#e91e63;margin-top:10px;}index.js业务逻辑exportdefault{data:{title:Hello HarmonyOS!,isPressed:false,count:99},toggleLike(){this.isPressed!this.isPressed;if(this.isPressed){this.count;}else{this.count--;}}}数据绑定机制JS UI 采用 MVVM 模式data中的变量通过{{ 变量名 }}绑定到视图。当变量值发生变化时视图自动更新——这和 Vue.js 的响应式原理类似。10.3 JS UI 组件与布局组件分类分类组件基础组件text、image、progress、rating、span、marquee、divider、search容器组件div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、refresh媒体组件video画布组件canvas常用布局 CSS 属性属性说明示例值flex-direction排列方向column / rowjustify-content主轴对齐center / flex-start / flex-end / space-betweenalign-items交叉轴对齐center / flex-start / flex-end / stretchflex-wrap是否换行wrap / nowrapflex-weight权重占比1 / 2 / 310.4 JS FA 调用 PAJS UI 框架提供了 JS FA 调用 Java PA 的机制支持两种调用方式方式生命周期通信方式适用场景Ability独立 Ability 生命周期远程进程通信 (RPC)多 FA 调用、后台独立运行Internal Ability与 FA 共进程内部函数调用对时延要求高的场景JS 端调用 PAimportFeatureAbilityfromohos.featureability;exportdefault{data:{result:等待计算结果...},play(){FeatureAbility.callAbility({bundleName:com.example.jsfacallpa,abilityName:PlayAbility,messageCode:1001,data:{numbers:[1,2,3,4,5]},arity:1}).then((data){this.result计算结果: data.result;}).catch((error){this.result调用失败: error;});}}Java PA 端处理publicclassPlayAbilityextendsAbility{OverridepublicbooleanonRemoteRequest(intcode,MessageParceldata,MessageParcelreply,MessageOptionoption){if(code1001){// 解析参数StringnumbersStrdata.readString();// 执行计算intsum0;// ... 计算逻辑reply.writeString(String.valueOf(sum));returntrue;}returnfalse;}}代码速查卡特性Java UIJS UI编程范式命令式声明式 (MVVM)布局定义XML 文件HML 文件样式定义XML 属性 / graphic XMLCSS 文件数据绑定手动 findComponentById setText自动{{ 变量名 }}宿主类Ability extends AbilityAceAbility extends Ability页面单元AbilitySlice.hml .css .js 三件套适合人群Java/Android 开发者前端/Web 开发者跨设备适配需手动适配自动适配720px 基准事件绑定setClickedListener()onclickmethodName调用 PA直接 Java 调用FeatureAbility.callAbility()与 Android/iOS 对比特性HarmonyOS JS UIAndroid (Jetpack Compose)iOS (SwiftUI)编程语言JavaScriptKotlinSwift编程范式声明式 MVVM声明式声明式模板语法hml (类 HTML)Composable 函数ViewBuilder样式定义CSS 文件Modifier 链式调用修饰符链式调用数据绑定{{ }} 自动remember / stateState / Binding跨平台HarmonyOS 多设备Android 设备Apple 设备⚠️ 踩坑回忆录第一次写 JS FA 时我直接把 HTML 语法搬过来了写了div classbox stylecolor:red结果样式完全没生效。后来才明白hml 语法虽然类似 HTML 但不完全一样内联样式要用style属性但语法有差异而且有些 HTML 标签在 hml 中是不支持的。另外JS FA 的运行时和 Java FA 不同——Java FA 运行在方舟运行时上JS FA 运行在 JS 引擎上两者的生命周期管理也不一样不能混用。如果你在 JS FA 中需要调用 Java 的能力必须通过 FA 调用 PA 的机制来桥接。必做实操任务序号任务难度1使用 Empty Ability(JS) 模板创建应用并运行★☆☆2实现点赞按钮功能数据绑定 事件处理★★☆3使用 list 组件实现一个简单的列表展示★★☆4使用 tabs 组件实现多 Tab 页面切换★★☆5实现 JS FA 调用 Java PA 的计算功能★★★学习检查清单能说出 JS UI 框架的四层架构能创建 JS FA 工程并理解目录结构能实现数据绑定{{ }} 语法能实现事件处理onclick 等事件能说出 hml/css/js 三件套各自的职责能解释 MVVM 模式在 JS UI 中的应用能实现 JS FA 调用 PA 的基本流程理解 Java UI 和 JS UI 的核心区别阶段二学习路径进阶方向深入学习 JS UI 的自定义组件开发学习 swiper、refresh 等高级容器组件了解 JS UI 的页面路由router机制学习响应式布局和自适应屏幕