鸿蒙开发入门实战：从零构建你的第一个HarmonyOS应用（ArkTS版）

熊猫钓鱼>_>2025-09-30 10:26

面对万物互联时代，鸿蒙HarmonyOS作为一款面向全场景的分布式操作系统，正为开发者带来前所未有的机遇。本文将带你一步步走进鸿蒙应用开发的世界，从环境搭建到实际项目开发，全面掌握ArkTS语言的核心开发技巧。

一、认识HarmonyOS：为什么选择鸿蒙开发？

在移动操作系统领域，HarmonyOS代表了一种全新的设计理念。与传统操作系统不同，HarmonyOS是面向万物互联时代而设计的分布式操作系统，能够支持手机、平板、手表、车机、智能家居等多种设备。

根据华为开发者联盟2024年数据报告显示，HarmonyOS设备激活量已突破7.3亿台，其中采用ArkTS声明式UI框架开发的应用占比达68%。这一数据充分说明了鸿蒙生态的迅猛发展和ArkTS作为主流开发语言的地位。

1.1 HarmonyOS的核心特性

HarmonyOS具有三大核心特性：

分布式架构：实现跨设备无缝协同，允许应用能力在多个设备之间流转。例如，你可以在手机上开始阅读一篇文章，然后无缝切换到平板电脑上继续阅读。

一次开发，多端部署：通过自适应UI框架和原子化服务，开发者只需编写一次代码，即可适配多种终端设备。

统一生态：集成了HMS Core服务，包括地图、支付、账号等常用功能，为开发者提供全面的基础设施支持。

1.2 鸿蒙开发的语言选择：为什么是ArkTS？

ArkTS是鸿蒙应用开发的首选语言，它基于TypeScript扩展而来，融合了声明式UI开发范式。如果你有TypeScript或JavaScript基础，学习ArkTS将会事半功倍。

ArkTS的优势包括：

  • 类型安全：静态类型检查帮助在编码阶段发现错误

  • 声明式UI：简化界面开发流程，提高代码可读性

  • 响应式编程：数据变化自动更新UI，减少手动DOM操作

  • 良好生态：完整工具链支持和丰富的API接口

二、搭建鸿蒙开发环境

2.1 安装DevEco Studio

DevEco Studio是官方提供的集成开发环境，基于IntelliJ IDEA社区版构建，为鸿蒙应用开发提供了全方位支持。

安装步骤：

  1. 访问华为开发者联盟官网，下载对应操作系统的DevEco Studio版本。

  2. 安装并配置环境变量，过程与Android Studio类似。

  3. 启动后配置SDK，选择HarmonyOS SDK版本（推荐API 9+）。

  4. 注册华为开发者账号，并完成实名认证，这是应用调试和发布的必要条件。

2.2 创建第一个鸿蒙项目

环境配置完成后，我们来创建第一个Hello World项目：

  1. 打开DevEco Studio，选择"Create HarmonyOS Project"

  2. 选择"Empty Ability"模板

  3. 配置项目信息：

    • Project Name：MyFirstApp

    • Package Name：com.example.myfirstapp

    • Save Location：选择项目保存路径

    • Language：ArkTS

    • API Version：选择最新稳定版

  4. 点击"Finish"完成创建

创建完成后，IDE会自动生成项目结构，核心目录包括：

  • AppScope：应用全局资源（图标、名称等）

  • entry：主模块代码目录

  • src/main/ets：ArkTS源代码位置

  • entryability：应用Ability入口

  • entrypages：页面文件目录

  • resources：资源文件（图片、字符串等）

三、ArkTS语言基础：快速上手

对于有TypeScript或JavaScript基础的开发者，ArkTS的学习曲线较为平缓。我们先从基础语法开始了解。

3.1 基础语法结构

ArkTS支持现代TypeScript的大部分特性，包括类型注解、类、接口、模块化等。

变量声明：

复制代码 
// 类型注解
let name: string = "鸿蒙开发者";
let age: number = 25;
let isActive: boolean = true;

// 数组和元组
let hobbies: string[] = ["编程", "阅读", "运动"];
let userInfo: [string, number] = ["张三", 30];

// 常量声明
const APP_VERSION: string = "1.0.0";

函数定义：

复制代码 
// 普通函数
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 箭头函数
const multiply = (a: number, b: number): number => a * b;

// 可选参数和默认参数
function introduce(name: string, age: number, country: string = "中国"): void {
  console.log(`我叫${name}，今年${age}岁，来自${country}`);
}

条件判断和循环：

复制代码 
// 条件判断
if (score >= 90) {
  grade = 'A';
} else if (score >= 80) {
  grade = 'B';
} else {
  grade = 'C';
}

// 循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

let numbers: number[] = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
  console.log(num);
});

3.2 面向对象编程

ArkTS全面支持面向对象编程特性，包括类、继承、接口等。

类和继承：

复制代码 
// 基类
class Person {
  name: string;
  age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  
  introduce(): void {
    console.log(`我叫${this.name}，今年${this.age}岁`);
  }
}

// 继承
class Developer extends Person {
  specialty: string;
  
  constructor(name: string, age: number, specialty: string) {
    super(name, age);
    this.specialty = specialty;
  }
  
  // 方法重写
  introduce(): void {
    console.log(`我叫${this.name}，是一名${this.specialty}开发工程师`);
  }
}

// 使用
let dev = new Developer("李四", 28, "鸿蒙");
dev.introduce();

接口和抽象类：

复制代码 
// 接口定义
interface Serializable {
  serialize(): string;
  deserialize(data: string): void;
}

// 抽象类
abstract class Shape {
  abstract calculateArea(): number;
  
  display(): void {
    console.log(`面积: ${this.calculateArea()}`);
  }
}

class Circle extends Shape {
  radius: number;
  
  constructor(radius: number) {
    super();
    this.radius = radius;
  }
  
  calculateArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

四、鸿蒙UI开发：声明式布局实战

鸿蒙的ArkUI框架采用声明式UI开发范式，与传统的命令式UI开发有显著区别。声明式UI的核心思想是描述UI应该是什么样子，而不是如何一步步构建UI。

4.1 基础组件使用

ArkUI提供了一系列基础组件，用于构建用户界面。

Text组件：用于显示文本内容

复制代码 
Text('Hello, HarmonyOS!')
  .fontSize(20)
  .fontColor(Color.Blue)
  .fontWeight(FontWeight.Bold)
  .textAlign(TextAlign.Center)

Button组件：创建可交互的按钮

复制代码 
Button('点击我')
  .width('50%')
  .height(50)
  .backgroundColor(0xFF3498DB)
  .fontColor(Color.White)
  .onClick(() => {
    console.log('按钮被点击了');
    // 处理点击事件
  })

Image组件：显示图片资源

复制代码 
Image($r('app.media.app_icon')) // 加载资源目录下的图片
  .width(100)
  .height(100)
  .objectFit(ImageFit.Contain)
  .borderRadius(10)

TextInput组件：文本输入框

复制代码 
@State textInput: string = '';

TextInput({ placeholder: '请输入内容' })
  .text(this.textInput)
  .onChange((value: string) => {
    this.textInput = value;
  })
  .height(40)
  .padding(10)
  .border({ width: 1, color: '#cccccc' })

4.2 布局容器

ArkUI提供了多种布局容器，用于组织界面元素

Column容器：垂直排列子组件

复制代码 
Column({ space: 10 }) {
  Text('第一个元素')
    .fontSize(16)
  Text('第二个元素')
    .fontSize(16)
  Button('按钮')
    .width('100%')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

Row容器：水平排列子组件

复制代码 
Row({ space: 20 }) {
  Text('左侧')
  Text('中间')
  Text('右侧')
}
.width('100%')
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)

Stack容器：层叠布局，子组件可以重叠

复制代码 
Stack() {
  Image($r('app.media.background'))
    .width('100%')
    .height('100%')
  Text('叠加在图片上的文字')
    .fontSize(20)
    .fontColor(Color.White)
}
.width('100%')
.height(200)

List容器：用于渲染长列表

复制代码 
List({ space: 10 }) {
  ForEach(this.items, (item: string, index: number) => {
    ListItem() {
      Text(item)
        .fontSize(16)
        .padding(10)
    }
  }, (item: string, index: number) => index.toString())
}
.width('100%')
.height('100%')

4.3 自定义组件

自定义组件是鸿蒙开发中的重要概念，可以提高代码的复用性和可维护性

创建自定义组件：

复制代码 
@Component
export struct InfoCard {
  @Prop title: string = '';
  @Prop subtitle: string = '';
  @Prop icon: string = '';
  @Prop onTap: () => void = () => {};
  
  build() {
    Column({ space: 5 }) {
      // 图标
      Text(this.icon)
        .fontSize(24)
      
      // 标题
      Text(this.title)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
      
      // 副标题
      Text(this.subtitle)
        .fontSize(12)
        .fontColor(Color.Gray)
    }
    .width(100)
    .height(100)
    .padding(10)
    .backgroundColor(Color.White)
    .borderRadius(12)
    .shadow({ radius: 2, color: '#f0f0f0', offsetX: 1, offsetY: 1 })
    .onClick(this.onTap)
  }
}

使用自定义组件：

复制代码 
import { InfoCard } from '../components/InfoCard';

@Entry
@Component
struct Index {
  build() {
    Column() {
      InfoCard({
        icon: '📦',
        title: '今日订单',
        subtitle: '已完成：123单',
        onTap: () => {
          console.log('点击了订单卡片');
        }
      })
      
      InfoCard({
        icon: '💰',
        title: '本月收入',
        subtitle: '￥18,250',
        onTap: () => {
          console.log('点击了收入卡片');
        }
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
    .padding(20)
  }
}

五、状态管理：让UI响应数据变化

状态管理是声明式UI开发的核心概念。ArkTS提供了多种装饰器来管理组件状态

5.1 基础状态管理

@State装饰器：组件内部状态管理

复制代码 
@Entry
@Component
struct Counter {
  @State count: number = 0;
  
  build() {
    Column() {
      Text(`计数: ${this.count}`)
        .fontSize(24)
      
      Button('增加')
        .onClick(() => {
          this.count++;
        })
        .margin(10)
      
      Button('减少')
        .onClick(() => {
          this.count--;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Prop装饰器：父子组件单向通信

复制代码 
// 子组件
@Component
struct ProgressBar {
  @Prop progress: number;
  
  build() {
    Row() {
      // 进度条背景
      Rectangle()
        .width('100%')
        .height(10)
        .fill('#e0e0e0')
      
      // 进度条前景
      Rectangle()
        .width(`${this.progress}%`)
        .height(10)
        .fill('#0A59F7')
    }
    .width('100%')
    .borderRadius(5)
    .clip(true)
  }
}

// 父组件
@Entry
@Component
struct ParentComponent {
  @State progressValue: number = 0;
  
  build() {
    Column() {
      ProgressBar({ progress: this.progressValue })
      
      Slider({
        value: this.progressValue,
        min: 0,
        max: 100
      })
      .onChange((value: number) => {
        this.progressValue = value;
      })
    }
    .padding(20)
  }
}

@Link装饰器：父子组件双向绑定

复制代码 
// 子组件
@Component
struct ToggleSwitch {
  @Link isOn: boolean;
  
  build() {
    Row() {
      if (this.isOn) {
        Text('开')
          .fontColor(Color.Green)
      } else {
        Text('关')
          .fontColor(Color.Gray)
      }
    }
    .onClick(() => {
      this.isOn = !this.isOn;
    })
  }
}

// 父组件
@Entry
@Component
struct SettingsPage {
  @State switchState: boolean = false;
  
  build() {
    Column() {
      ToggleSwitch({ isOn: $switchState })
      Text(`开关状态: ${this.switchState ? '开启' : '关闭'}`)
    }
  }
}

5.2 进阶状态管理

对于复杂应用，可能需要更强大的状态管理方案

应用级状态管理：

复制代码 
// 定义全局状态类
class AppState {
  @Provide @Watch('onUserChange') currentUser: User | null = null;
  
  onUserChange(): void {
    console.log('用户状态发生变化:', this.currentUser);
  }
}

// 在组件中使用
@Entry
@Component
struct MainApp {
  @Consume appState: AppState;
  
  build() {
    Column() {
      if (this.appState.currentUser) {
        HomePage()
      } else {
        LoginPage()
      }
    }
  }
}

六、实战项目：构建待办事项应用

下面我们通过一个完整的待办事项应用，综合运用前面学到的知识

6.1 项目结构设计

复制代码 
todoapp/
├── entry/
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/
│   │   │   │   ├── entryability/
│   │   │   │   ├── pages/
│   │   │   │   │   ├── Index.ets        # 主页面
│   │   │   │   │   └── AddTodo.ets      # 添加待办页面
│   │   │   │   ├── model/
│   │   │   │   │   └── Todo.ts          # 数据模型
│   │   │   │   └── components/
│   │   │   │       ├── TodoItem.ets     # 待办项组件
│   │   │   │       └── ProgressCard.ets # 进度卡片组件
│   │   │   └── resources/               # 资源文件

6.2 数据模型定义

复制代码 
// model/Todo.ts
export class Todo {
  id: string;
  title: string;
  completed: boolean;
  createTime: number;
  priority: 'low' | 'medium' | 'high';
  
  constructor(title: string, priority: 'low' | 'medium' | 'high' = 'medium') {
    this.id = this.generateId();
    this.title = title;
    this.completed = false;
    this.createTime = new Date().getTime();
    this.priority = priority;
  }
  
  private generateId(): string {
    return `todo_${new Date().getTime()}_${Math.random().toString(36).substr(2, 9)}`;
  }
}

6.3 主页面实现

复制代码 
// pages/Index.ets
@Entry
@Component
struct Index {
  @State todos: Todo[] = [];
  @State showCompleted: boolean = false;
  
  // 计算属性：获取未完成待办数量
  get uncompletedCount(): number {
    return this.todos.filter(todo => !todo.completed).length;
  }
  
  // 计算属性：获取完成进度
  get progress(): number {
    if (this.todos.length === 0) return 0;
    return (this.todos.filter(todo => todo.completed).length / this.todos.length) * 100;
  }
  
  build() {
    Column() {
      // 头部标题
      Text('待办事项')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 10 })
      
      // 进度卡片
      ProgressCard({
        total: this.todos.length,
        completed: this.todos.filter(todo => todo.completed).length,
        progress: this.progress
      })
      
      // 过滤选项
      Row() {
        Text('显示已完成')
          .fontSize(14)
        
        Toggle({ isOn: $showCompleted })
          .onChange((value: boolean) => {
            this.showCompleted = value;
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('90%')
      .margin(10)
      
      // 待办列表
      List() {
        ForEach(this.filteredTodos, (todo: Todo) => {
          ListItem() {
            TodoItem({
              todo: todo,
              onToggle: (id: string) => this.toggleTodo(id),
              onDelete: (id: string) => this.deleteTodo(id)
            })
          }
        }, (todo: Todo) => todo.id)
      }
      .layoutWeight(1)
      .width('100%')
      
      // 添加按钮
      Button('添加待办')
        .width('90%')
        .height(40)
        .backgroundColor('#0A59F7')
        .fontColor(Color.White)
        .margin(10)
        .onClick(() => {
          // 跳转到添加页面
          router.pushUrl({
            url: 'pages/AddTodo'
          });
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
  
  // 获取过滤后的待办列表
  get filteredTodos(): Todo[] {
    if (this.showCompleted) {
      return this.todos;
    }
    return this.todos.filter(todo => !todo.completed);
  }
  
  // 切换完成状态
  private toggleTodo(id: string): void {
    this.todos = this.todos.map(todo => {
      if (todo.id === id) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    });
  }
  
  // 删除待办
  private deleteTodo(id: string): void {
    this.todos = this.todos.filter(todo => todo.id !== id);
  }
  
  aboutToAppear() {
    // 初始化示例数据
    this.todos = [
      new Todo('学习ArkTS基础', 'high'),
      new Todo('完成鸿蒙应用开发', 'medium'),
      new Todo('准备项目演示', 'low')
    ];
  }
}

6.4 自定义组件实现

待办项组件：

复制代码 
// components/TodoItem.ets
@Component
export struct TodoItem {
  @Prop todo: Todo;
  @Prop onToggle: (id: string) => void;
  @Prop onDelete: (id: string) => void;
  
  build() {
    Row() {
      // 完成状态复选框
      Image(this.todo.completed ? $r('app.media.checked') : $r('app.media.unchecked'))
        .width(20)
        .height(20)
        .onClick(() => {
          this.onToggle(this.todo.id);
        })
      
      // 待办内容
      Column() {
        Text(this.todo.title)
          .fontSize(16)
          .fontColor(this.todo.completed ? '#999' : '#000')
          .decoration({ type: this.todo.completed ? TextDecorationType.LineThrough : TextDecorationType.None })
        
        Text(this.getPriorityText())
          .fontSize(12)
          .fontColor(this.getPriorityColor())
      }
      .layoutWeight(1)
      .margin({ left: 10 })
      
      // 删除按钮
      Button('删除')
        .fontSize(12)
        .padding(5)
        .backgroundColor('#FF3B30')
        .fontColor(Color.White)
        .onClick(() => {
          this.onDelete(this.todo.id);
        })
    }
    .padding(10)
    .backgroundColor(Color.White)
    .borderRadius(8)
    .margin({ top: 5, bottom: 5, left: 10, right: 10 })
    .shadow({ radius: 2, color: '#f0f0f0', offsetX: 1, offsetY: 1 })
  }
  
  private getPriorityText(): string {
    switch (this.todo.priority) {
      case 'high': return '高优先级';
      case 'medium': return '中优先级';
      case 'low': return '低优先级';
      default: return '';
    }
  }
  
  private getPriorityColor(): string {
    switch (this.todo.priority) {
      case 'high': return '#FF3B30';
      case 'medium': return '#FF9500';
      case 'low': return '#34C759';
      default: return '#999';
    }
  }
}

进度卡片组件：

复制代码 
// components/ProgressCard.ets
@Component
export struct ProgressCard {
  @Prop total: number = 0;
  @Prop completed: number = 0;
  @Prop progress: number = 0;
  
  build() {
    Column() {
      Text('完成进度')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .width('100%')
        .textAlign(TextAlign.Start)
      
      Row() {
        Text(`${this.completed}/${this.total} 任务完成`)
          .fontSize(14)
          .fontColor('#666')
        
        Text(`${this.progress.toFixed(0)}%`)
          .fontSize(14)
          .fontColor('#0A59F7')
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .margin({ top: 5, bottom: 10 })
      
      // 进度条
      Stack() {
        // 背景
        Rectangle()
          .width('100%')
          .height(8)
          .fill('#e0e0e0')
          .borderRadius(4)
        
        // 进度
        Rectangle()
          .width(`${this.progress}%`)
          .height(8)
          .fill('#0A59F7')
          .borderRadius(4)
      }
      .width('100%')
    }
    .padding(15)
    .backgroundColor(Color.White)
    .borderRadius(12)
    .shadow({ radius: 4, color: '#f0f0f0', offsetX: 0, offsetY: 2 })
    .width('90%')
    .margin(10)
  }
}

6.5 添加待办页面

复制代码 
// pages/AddTodo.ets
@Entry
@Component
struct AddTodo {
  @State title: string = '';
  @State priority: 'low' | 'medium' | 'high' = 'medium';
  
  build() {
    Column() {
      Text('添加新待办')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 30 })
      
      // 标题输入
      TextInput({ placeholder: '请输入待办内容' })
        .text(this.title)
        .onChange((value: string) => {
          this.title = value;
        })
        .padding(10)
        .backgroundColor(Color.White)
        .border({ width: 1, color: '#e0e0e0' })
        .borderRadius(8)
        .width('90%')
        .margin(10)
      
      // 优先级选择
      Text('优先级')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .width('90%')
        .textAlign(TextAlign.Start)
        .margin({ top: 20 })
      
      Row() {
        RadioButton({ value: 'low', group: 'priority' })
          .checked(this.priority === 'low')
          .onChange((checked: boolean) => {
            if (checked) this.priority = 'low';
          })
        Text('低')
          .fontSize(14)
          .margin({ left: 5 })
        
        RadioButton({ value: 'medium', group: 'priority' })
          .checked(this.priority === 'medium')
          .onChange((checked: boolean) => {
            if (checked) this.priority = 'medium';
          })
          .margin({ left: 20 })
        Text('中')
          .fontSize(14)
          .margin({ left: 5 })
        
        RadioButton({ value: 'high', group: 'priority' })
          .checked(this.priority === 'high')
          .onChange((checked: boolean) => {
            if (checked) this.priority = 'high';
          })
          .margin({ left: 20 })
        Text('高')
          .fontSize(14)
          .margin({ left: 5 })
      }
      .width('90%')
      .margin(10)
      
      // 按钮区域
      Row() {
        Button('取消')
          .layoutWeight(1)
          .height(40)
          .backgroundColor('#e0e0e0')
          .fontColor('#333')
          .onClick(() => {
            router.back();
          })
        
        Button('保存')
          .layoutWeight(1)
          .height(40)
          .backgroundColor('#0A59F7')
          .fontColor(Color.White)
          .margin({ left: 10 })
          .onClick(() => {
            this.saveTodo();
          })
      }
      .width('90%')
      .margin(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
  
  private saveTodo(): void {
    if (!this.title.trim()) {
      promptAction.showToast({
        message: '请输入待办内容',
        duration: 2000
      });
      return;
    }
    
    // 这里应该将数据传递回主页面
    // 实际开发中可以使用AppStorage或EventBus等方式
    router.back();
  }
}

结语

鸿蒙应用开发作为一项前景广阔的技能，正受到越来越多开发者的关注。通过本文的学习，你已经掌握了HarmonyOS应用开发的基础知识，能够使用ArkTS语言开发简单的应用。

学习鸿蒙开发的关键在于实践。从简单的待办事项应用开始，逐步尝试更复杂的项目，不断积累经验。遇到问题时，善用官方文档和技术社区资源，多与其他开发者交流。

随着鸿蒙生态的不断发展，掌握鸿蒙应用开发技能将为你的职业发展带来新的机遇。希望本文能为你的鸿蒙开发之旅提供一个坚实的起点，助你在万物互联的时代抓住先机！

相关推荐
安卓开发者2 小时前
鸿蒙NEXT安全单元访问开发指南：构建可信应用的安全基石
安全·华为·harmonyos
一只栖枝3 小时前
HCIE -云计算方向容易考过吗？该怎么准备考试？
华为·云计算·华为认证·hcie·备考·考证
小Mei数码说4 小时前
华为Fit4手表：个性化表盘，让生活更有温度
华为·生活
ChinaDragonDreamer9 小时前
HarmonyOS：固定样式弹出框
harmonyos·鸿蒙
Devil枫15 小时前
HarmonyOS 广告服务 ArkTS 实现指南：从激励广告到多形式适配
华为·harmonyos
猫林老师19 小时前
HarmonyOS 5 性能优化全攻略：从启动加速到内存管理
华为·性能优化·harmonyos
GIS小小研究僧19 小时前
华为电脑 银河麒麟系统 使用CrossOver安装微软Office2016
华为·电脑·银河麒麟
猫林老师20 小时前
HarmonyOS 5 手势系统与高级交互动效开发实战
华为·交互·harmonyos
chensi_0721 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
热门推荐
01UV安装并设置国内源02GitHub 镜像站点03OpenSpeedy简介04UV 工具安装与国内镜像源配置指南05在国行 macOS 下用 DeepSeek 补齐 Xcode 26 的 AI 能力：问题、原因与 mitmproxy 解决方案（含可用脚本与安装教程）06Spec-Kit 使用指南07阿里最新开源Wan2.2-Animate-14B 本地部署教程：统一双模态框架，MoE架构赋能电影级角色动画与替换08VsCode远程Copilot无法使用Claude Agent问题09KGG转MP3工具|非KGM文件|解密音频10Linux下V2Ray安装配置指南