《鸿蒙应用开发》学伴

写代码

💬

输入需求

所有 AI 功能均通过 DeepSeek 大模型驱动，API Key 已内置，可直接使用。

💻

生成结果

AI 正在思考中...
✨
代码将在这里显示
🧠

鸿蒙开发知识图谱

💡 点击任意卡片查看详细知识体系与代码示例，或使用下方输入框自定义探索

💻 核心概念 ›

  • • Ability开发
  • • UIAbility
  • • ExtensionAbility
  • • Stage模型
  • • FA模型

📝 ArkTS ›

  • • ArkTS语言
  • • TypeScript基础
  • • 分支
  • • 循环
  • • class

📱 ArkUI ›

  • • ArkUI框架
  • • 声明式UI
  • • 组件化开发
  • • Column垂直布局
  • • Row水平布局

🛣 路由组件导航 ›

  • • 页面路由
  • • Router模块
  • • Navigation组件
  • • 路由栈管理
  • • NavPathStack

💾 存储与数据库 ›

  • • LocalStorage
  • • AppStorage
  • • PersistentStorage
  • • Preferences
  • • KV-Store

📡 网络访问 ›

  • • HTTP网络请求
  • • 数据请求
  • • RESTful API
  • • JSON解析
  • • 文件上传

☁ 端云一体化 ›

  • • AppGallery Connect
  • • AGC
  • • 云函数
  • • 云数据库
  • • 云存储

📋 元服务 ›

  • • 元服务
  • • 原子化服务
  • • 免安装服务
  • • 万能卡片
  • • 服务卡片Form

🤖 鸿蒙AI ›

  • • 鸿蒙调用Deep Seek
  • • 鸿蒙调用千问
  • • 鸿蒙调用文心
  • • 文字转声音
  • • 语音识别
✍

自定义知识图谱探索

💡

使用说明

本工具所有 AI 功能均通过 DeepSeek 大模型驱动。API Key 已内置配置，所有功能可直接使用。

DeepSeek ArkTS HarmonyOS

📩 如有建议或问题，欢迎通过 hedinghua@wtc.edu.cn 交流。

💡

使用方法 & 案例实施者

快速开始

本工具是《鸿蒙应用开发》学伴，提供 AI 驱动的代码生成、知识图谱、代码解释、错误诊断、API 速查和组件指南等功能。所有 AI 功能均基于 DeepSeek 大模型，API Key 已自动配置，打开即用。

功能模块说明

  • • 写代码：描述你想实现的功能，AI 自动生成鸿蒙 ArkTS 代码
  • • 知识图谱：浏览鸿蒙开发核心知识体系，或输入主题让 AI 生成知识图谱
  • • 代码解释器：粘贴 ArkTS 代码，AI 逐行添加注释并解释原理
  • • 诊断报错：粘贴编译错误或运行时异常，AI 分析原因并给出修复方案
  • • API 速查：快速查阅鸿蒙常用 API 的详细用法和代码示例
  • • 组件指南：查看 36 个常用 ArkUI 组件的语法示例

配置说明

DeepSeek API Key 已内置，无需手动配置。所有 AI 功能可直接调用，开箱即用。

快捷键与技巧

  • • 生成的代码支持一键复制和下载为 .ets 文件
  • • 知识图谱页面支持点击 API 标签快速生成对应主题
  • • 按 ESC 键可关闭知识详情弹窗
  • • 建议将本工具部署在本地或内网环境使用
提示：首次使用建议先浏览"知识图谱"和"组件指南"，熟悉鸿蒙开发基础概念后再尝试 AI 代码生成。

版本: v1.1.0 | 更新日期: 2025-3-19

👨‍💻

何定华

人工智能学院教授 | 鸿蒙应用开发爱好者

何定华，人工智能学院教授，热爱鸿蒙生态，专注于鸿蒙项目开发。致力于在教学中使用真实案例和把AI技术应用于教学案例。何定华是《HarmonyOS应用开发者高级认证证书》和《鸿蒙应用开发培训讲师》、《Web前端高级证书》等证书获得者。

AI+教育 软件开发 鸿蒙爱好者 教学研究

📧 hedinghua@wtc.edu.cn。13720187939

👩‍💻

杨艳

人工智能学院副教授 | 工业软件专业负责人

杨艳，人工智能学院副教授，工业软件专业负责人。热爱鸿蒙生态。擅长于教学研究，在把AI技术应用于真实教学案例方面有独到的理解。杨艳是《HarmonyOS应用开发者高级认证证书》等证书获得者。

专业负责人 人工智能 教学研究 鸿蒙爱好者

📧 yangyan@wtc.edu.cn

📋

粘贴代码

📖

注释与解释

正在分析代码...
📋
粘贴代码后点击解释
🚑

报错信息

💊

诊断结果

正在分析错误...
🚑
粘贴报错信息后点击诊断
📚

鸿蒙 API 列表

📜

API 详细解释

正在查询 API 文档...
📚
单击左侧 API 查看详细解释
🧩

常用组件指南（36个）

Text 文本

Text('Hello HarmonyOS')
  .fontSize(20)
  .fontColor('#fff')
  .fontWeight(FontWeight.Bold)
  .maxLines(2)
  .textOverflow({overflow:TextOverflow.Ellipsis})

Button 按钮

Button('点击', {type:ButtonType.Capsule})
  .width('90%').height(40)
  .fontSize(16)
  .backgroundColor(0x317aff)
  .onClick(() => {
    console.log('clicked')
  })

TextInput 输入框

TextInput({placeholder:'请输入'})
  .width('90%').height(40)
  .type(InputType.Normal)
  .onChange((value) => {
    this.inputValue = value
  })

Image 图片

Image($r('app.media.icon'))
  .width(100).height(100)
  .borderRadius(10)
  .objectFit(ImageFit.Cover)
  .alt($r('app.media.loading'))

Column 垂直布局

Column({space:10}) {
  Text('A').fontSize(16)
  Text('B').fontSize(16)
}
.width('100%')
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Center)

Row 水平布局

Row({space:10}) {
  Text('A').fontSize(16)
  Text('B').fontSize(16)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)

Stack 堆叠布局

Stack({alignContent:Alignment.Center}){
  Image($r('app.media.bg'))
    .width('100%').height(200)
  Text('封面标题')
    .fontSize(24).fontColor('#fff')
    .fontWeight(FontWeight.Bold)
}

Flex 弹性布局

Flex({wrap:FlexWrap.Wrap,
  justifyContent:FlexAlign.SpaceAround}){
  ForEach(this.tags,(tag)=>{
    Text(tag)
      .padding({l:12,r:12,t:6,b:6})
      .backgroundColor('#333')
      .borderRadius(16)
      .margin(6)
  })
}

Grid 网格布局

Grid() {
  ForEach(this.items,(item)=>{
    GridItem() {
      Image(item.img).width('100%')
    }
  })
}
.columnsTemplate('1fr 1fr 1fr')
.rowsGap(10).columnsGap(10)

Scroll 滚动容器

Scroll() {
  Column() {
    ForEach(this.data,(item)=>{
      Text(item).height(60)
    })
  }
  .width('100%')
}
.scrollBar(BarState.Auto)
.scrollable(ScrollDirection.Vertical)

List + ForEach 列表

List() {
  ForEach(this.items,(item)=>{
    ListItem() {
      Row() {
        Text(item.name).layoutWeight(1)
        Text(item.time).fontColor('#999')
      }.width('100%').padding(16)
    }
  })
}
.divider({strokeWidth:1,color:'#222'})
.scrollBar(BarState.Auto)

Swiper 轮播图

Swiper() {
  Image($r('app.media.banner1'))
  Image($r('app.media.banner2'))
  Image($r('app.media.banner3'))
}
.width('100%').height(180)
.autoPlay(true).interval(3000)
.indicator(true).loop(true)

Tabs 标签页

Tabs({barPosition:BarPosition.Start}){
  TabContent() { Text('首页内容') }
    .tabBar('首页')
  TabContent() { Text('分类内容') }
    .tabBar('分类')
  TabContent() { Text('我的内容') }
    .tabBar('我的')
}
.width('100%').height('100%')

Badge 徽标

Badge({
  count:99,
  maxCount:99,
  position:BadgePosition.RightTop,
  style:{badgeSize:18,fontSize:12}
}) {
  Image($r('app.media.msg'))
    .width(36).height(36)
}

Divider 分割线

Column() {
  Text('上方内容')
  Divider()
    .strokeWidth(1)
    .color('#333')
    .margin({top:12,bottom:12})
  Text('下方内容')
}

Toggle 开关

Toggle({type:ToggleType.Switch,
  isOn:this.isEnabled})
  .selectedColor('#00d4ff')
  .onChange((isOn)=>{
    this.isEnabled = isOn
    console.log('开关状态:'+isOn)
  })

Radio 单选框

Row({space:20}) {
  Radio({value:'opt1',group:'grp'})
    .checked(this.choice==='A')
    .onChange(()=>this.choice='A')
  Text('选项A')
  Radio({value:'opt2',group:'grp'})
    .checked(this.choice==='B')
    .onChange(()=>this.choice='B')
  Text('选项B')
}

Checkbox 复选框

Row() {
  Checkbox()
    .select(this.isChecked)
    .selectedColor('#00d4ff')
    .onChange((val)=>{
      this.isChecked = val
    })
  Text('同意协议').fontSize(14)
}

Slider 滑块

Slider({
  value:this.volume,
  min:0,max:100,step:1
})
  .width('90%')
  .showTips(true)
  .blockColor('#00d4ff')
  .trackColor('#222')
  .onChange((val)=>{
    this.volume = val
  })

Progress 进度条

Progress({
  value:this.current,
  total:this.total,
  type:ProgressType.Linear
})
  .width('90%').height(8)
  .color('#00d4ff')
  .backgroundColor('#222')

LoadingProgress 加载

if (this.isLoading) {
  LoadingProgress()
    .width(40).height(40)
    .color('#00d4ff')
} else {
  List() { /* 列表内容 */ }
}

Select 下拉选择

Select(this.cityOptions)
  .selected(this.cityIndex)
  .value(this.city)
  .onSelect((idx,val)=>{
    this.cityIndex = idx
    this.city = val
  })
// data: cityOptions = [
//   {value:'北京'},{value:'上海'}
// ]

Search 搜索框

Search({
  placeholder:'搜索内容',
  value:this.keyword
})
  .width('90%').height(44)
  .backgroundColor('#1a1a2e')
  .onChange((val)=>{
    this.keyword = val
  })
  .onSubmit(()=>{
    this.doSearch()
  })

Rating 评分

Rating({rating:this.score,
  indicator:false})
  .stars(5)
  .stepSize(0.5)
  .starStyle({
    offUri:'/star_off.png',
    onUri:'/star_on.png'
  })
  .onChange((val)=>{
    this.score = val
  })

DatePicker 日期选择

DatePicker({
  selected:this.birthDate
})
  .lunar(false)
  .onChange((val)=>{
    this.birthDate = new Date(
      val.year,val.month,val.day
    )
  })

TimePicker 时间选择

TimePicker({
  selected:this.remindTime
})
  .useMilitaryTime(true)
  .onChange((val)=>{
    this.remindTime = new Date(
      0,0,0,val.hour,val.minute
    )
  })

Stepper 步骤导航器

Stepper({index:this.stepIdx}){
  StepperItem() {
    Text('填写信息') // 步骤1
  }.nextLabel('下一步')
  StepperItem() {
    Text('确认订单') // 步骤2
  }.prevLabel('上一步')
    .nextLabel('提交')
}

Menu 菜单

Button('更多')
  .bindMenu([
    {value:'编辑',action:()=>this.edit()},
    {value:'删除',action:()=>this.del()},
    {value:'分享',action:()=>this.share()}
  ])

@CustomDialog 自定义弹窗

@CustomDialog
struct ConfirmDialog {
  controller:CustomDialogController
  confirm?:()=>void
  build(){
    Column(){
      Text('确认删除？').margin(20)
      Row({space:20}){
        Button('取消').onClick(()=>
          this.controller.close())
        Button('确定').onClick(()=>{
          this.confirm?.()
          this.controller.close()
        })
      }
    }.padding(20)
  }
}

Blank 空白填充

Row(){
  Text('左侧').fontSize(16)
  Blank()       // 自动占据剩余空间
  Text('右侧').fontSize(16)
}
.width('100%').padding(16)
// 类似 CSS 的 flex:1 效果

Refresh 下拉刷新

Refresh({refreshing:this.isRefreshing}){
  List(){
    ForEach(this.list,(item)=>{
      ListItem(){ Text(item.title) }
    })
  }
}
.onRefreshing(()=>{
  this.loadData().then(()=>{
    this.isRefreshing = false
  })
})

TextArea 多行输入

TextArea({
  placeholder:'请输入内容',
  text:this.content
})
  .width('90%').height(120)
  .maxLength(500)
  .showCounter(true)
  .onChange((val)=>{
    this.content = val
  })

Marquee 跑马灯

Marquee({
  start: this.play,
  step: 4,
  loop: -1,
  fromStart: true,
  src: '这是一条滚动的公告通知文本'
})
  .width('90%')
  .fontSize(14)
  .fontColor('#00d4ff')
  .backgroundColor('#1a1a2e')
  .padding(8)
  .borderRadius(6)

Gauge 仪表盘

Gauge({ value: 72, min: 0, max: 100 })
  .width(160).height(160)
  .startAngle(210).endAngle(150)
  .colors([
    { color: '#e17055', ratio: 0.3 },
    { color: '#fdcb6e', ratio: 0.3 },
    { color: '#00d4ff', ratio: 0.4 }
  ])
  .strokeWidth(16)
  .trackColor('#222')
  .description('CPU 使用率')

PatternLock 图案解锁

PatternLock(this.patternLockController)
  .sideLength(280)
  .circleRadius(10)
  .regularColor('#444')
  .activeColor('#00d4ff')
  .selectedColor('#00d4ff')
  .pathStrokeWidth(4)
  .autoReset(true)
  .onPatternComplete((input) => {
    if (input === this.password) {
      this.message = '解锁成功'
      return true
    } else {
      this.message = '图案错误'
      return false
    }
  })

AlphabetIndexer 字母索引

AlphabetIndexer({
  arrayValue: this.contactList,
  selected: this.selectedIndex
})
  .width(32)
  .fontSize(12)
  .fontColor('#666')
  .selectedFontColor('#00d4ff')
  .selectedBackgroundColor('rgba(0,212,255,0.15)')
  .usingPopup(true)
  .alignStyle(IndexerAlign.Right)
  .onSelected((index) => {
    this.selectedIndex = index
    this.scrollToContact(index)
  })