第10章 HarmonyOs开发图解 用 JS 开发 UI

学习目标

使用者痛点速览 🚩

• 样式失效：很多新手直接把传统 HTML/CSS 写法搬到 .hml/.css 中，结果页面样式根本不生效。
• 跨设备适配混乱：不同设备基准宽度不同，若不掌握基准概念会导致布局错位。
• 数据绑定不刷新：忘记在 data 中声明变量或使用错误的 {{}} 语法，导致 UI 不响应数据变化。
• FA 与 PA 通信异常：直接在 JS FA 中调用 Java 类方法会报错，必须走 FeatureAbility.callAbility 的桥接流程。
• 目录结构不清晰：项目文件散落无序。找不到对应页面的 .hml/.css/.js，调试效率低下。

主要图解

内容讲解

JS UI 概述

JS UI 的基础能力 🎯

JS UI 框架架构 🏗️

JS UI 框架分为四层：

1. 应用层 : 开发者使用 JS UI 框架编写的 FA 应用。
2. 前端框架层 : MVVM 开发模式、页面路由、自定义组件等主要功能。
网站适配层 : 抽象底层接口，对接程序网站实现真正的多端运行。

基准宽度 📏

• 手机 & 智慧屏：720px为基准宽度
至于智能穿戴设备。454px 为基准宽度 实际显示时会根据屏幕物理像素自动缩放，实现“一次编码，多端适配”。

JS FA 开发 🚀

创建 JS FA 应用 创建工程时选择Empty Ability 模板。JS FA通过类加载，在config.json 中配置js 字段指定页面路由。

说到"js"，{
"name"的观点是，"default"。"pages":
}

AceAbility

public class MainAbility extends AceAbility {
@Override
public void onStart {
super.onStart;}
}

如果修改了 config.json 中的js.name，需要在onStart 方法里调用setInstanceName 来显式指定实例名。

@Override
public void onStart {
super.setInstanceName;super.onStart;}

JS FA 开发目录结构

三件套详解 📂

{{ title }}

{{ count }}