1 分•作者: flfljh•7 个月前
# HarmonyOS 开发基础
## 数据存储
HarmonyOS 应用提供多种数据存储选项：
- *Preferences*：用于存储简单数据的轻量级键值对存储
- *SQLite*：用于存储结构化数据的关系型数据库
- *文件存储*：直接访问文件系统，用于自定义数据存储
## 数组
数组是由索引访问的有序数据集合：
```javascript
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出 1
```
## 函数
### 普通函数
封装可重用的代码块：
```javascript
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice")); // 输出 "Hello, Alice"
```
### 箭头函数
简洁的函数语法：
```javascript
const greet = (name) => "Hello, " + name;
console.log(greet("Bob")); // 输出 "Hello, Bob"
```
## 接口
定义对象结构契约：
```typescript
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;
}
}
```
## 对象和方法
属性和方法的集合：
```javascript
let person = {
name: "Charlie",
age: 30,
greet: function() {
return "Hello, " + this.name;
}
};
console.log(person.greet()); // 输出 "Hello, Charlie"
```
## 联合类型
可以为多种类型之一的值：
```typescript
let age: number | string;
age = 25; // 有效
age = "twenty-five"; // 也有效
```
## 枚举
命名的常量集合：
```typescript
enum Direction {
Up,
Down,
Left,
Right
}
let direction: Direction = Direction.Up; // 使用枚举值
```
------
## UI 开发概念和布局
### 组件属性和方法
- *属性*：配置外观和行为
- *方法*：执行特定于组件的操作
### 文本样式
- *文本颜色*：通过 `text-color` 属性设置
- *文本溢出*：使用 `text-overflow` 控制（例如，`ellipsis` 显示截断点）
### 图像组件
```html
<image src="path/to/image.png" width="100" height="100"></image>
```
### 输入框
```html
<input type="text" placeholder="Enter text here"></input>
```
### SVG 图标
直接嵌入或引用 SVG 文件：
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
```
### 布局元素
组织 UI 组件的定位和大小调整
#### 外边距
```css
.container {
margin: 10px; /* 统一外边距 */
margin: 5px 10px; /* 垂直 | 水平 */
margin: 5px 10px 15px; /* 顶部 | 水平 | 底部 */
margin: 5px 10px 15px 20px; /* 顶部 | 右侧 | 底部 | 左侧 */
}
```
#### 边框
```css
.box {
border: 1px solid black; /* 宽度 | 样式 | 颜色 */
border-radius: 10px; /* 圆角 */
}
```
#### 自定义形状
```css
.special-shape {
border-radius: 20px 10px 30px 5px; /* 自定义圆角 */
}
```
### 背景
```css
.background {
background-color: #f0f0f0; /* 纯色 */
background-image: url('path/to/image.png'); /* 背景图片 */
background-position: center; /* 图片定位 */
background-size: cover; /* 图片大小 */
background-repeat: no-repeat; /* 阻止平铺 */
}
```
### 线性布局对齐
```css
.linear-layout {
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
flex-direction: row; /* 布局方向（行/列） */
}
```