基础入门
储存
鸿蒙应用提供多种数据存储方式，包括：
数组
数组是一组有序的数据集合，可以通过索引访问每个元素。
let numbers = [1, 2, 3, 4, 5];console.log(numbers[0]); // 输出 1
复制代码
函数的使用与写法
函数是封装了一段代码，用于完成特定任务的独立单元。
function greet(name) { return "Hello, " + name;}console.log(greet("Alice")); // 输出 Hello, Alice
复制代码
箭头函数
箭头函数提供了一种更简洁的函数写法。
const greet = (name) => "Hello, " + name;console.log(greet("Bob")); // 输出 Hello, Bob
复制代码
接口
接口用于定义对象的行为，确保实现接口的类遵循特定的规范。
interface Person { name: string; age: number; greet(): string;} class Employee implements Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet(): string { return "Hello, I am " + this.name; }}
复制代码
对象与对象方法
对象是属性和方法的集合。
let person = { name: "Charlie", age: 30, greet: function() { return "Hello, " + this.name; }};console.log(person.greet()); // 输出 Hello, Charlie
复制代码
联合类型
联合类型表示一个值可以是几种类型中的一种。
let age: number | string;age = 25;age = "twenty-five";
复制代码
枚举
枚举用于定义一组命名的常量。
enum Direction { Up, Down, Left, Right}let direction: Direction = Direction.Up;
复制代码
界面开发思路与布局
组件属性与方法
鸿蒙开发提供了丰富的 UI 组件，每个组件都有特定的属性和方法。
属性：用于设置组件的外观和行为。
方法：用于执行组件的操作。
文本颜色与文字溢出
图片组件
使用<image>标签添加图片。
html复制代码
<image src="path/to/image.png" width="100" height="100"></image>
复制代码
输入框
使用<input>标签创建输入框。
html复制代码
<input type="text" placeholder="Enter text here"></input>
复制代码
SVG 图标
支持直接嵌入 SVG 代码或使用<image>标签加载 SVG 文件。
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>
复制代码
布局元素
布局元素用于组织和管理 UI 组件的位置和大小。
外边距
通过margin属性设置外边距。
.container { margin: 10px;}
复制代码
边框
通过border属性设置边框。
.box { border: 1px solid black;}
复制代码
特殊形状的圆角
通过border-radius属性设置圆角。
.rounded { border-radius: 20px;}
复制代码
背景
.background { background-color: #f0f0f0; background-image: url('path/to/image.png'); background-position: center; background-size: cover;}
复制代码
线性布局主轴对齐方式
线性布局（Linear Layout）可以通过justify-content和align-items属性控制主轴和交叉轴的对齐方式。
.linear-layout { display: flex; justify-content: center; /* 主轴对齐方式：居中 */ align-items: center; /* 交叉轴对齐方式：居中 */}
复制代码
评论