一、仓颉语言与鸿蒙应用开发概述

1.1 仓颉语言简介

仓颉（Cangjie）是华为自研的面向鸿蒙生态的编程语言，于2024年6月发布预览版，2025年7月正式开源。，旨在解决跨设备开发的复杂性、提升代码安全性与性能。其核心特点包括：

• 强类型系统：编译期类型检查，减少运行时错误；
• 声明式语法：与鸿蒙 ArkUI 框架深度融合，简化 UI 开发；
• 跨设备适配：天然支持鸿蒙多终端（手机、平板、车机等）；
• 内存安全：内置垃圾回收与边界检查，避免内存泄漏。

1.2 鸿蒙应用开发基础

鸿蒙应用基于分布式能力与组件化架构，主流开发模型为Stage 模型（替代传统 FA 模型），核心概念包括：

• Ability：应用的基本单元，分为 Page Ability（页面）和 Service Ability（服务）；
• ArkUI：UI 开发框架，支持声明式编程，与仓颉无缝协作；
• 分布式任务调度：跨设备数据共享与任务分发；
• HAP（Harmony Ability Package）：应用打包格式，包含代码与资源。

1.3 仓颉与鸿蒙的协同优势

仓颉并非独立于鸿蒙框架，而是深度嵌入其开发链路：

• 语法层面：直接支持 ArkUI 组件声明（如Text、Button）；
• 框架层面：原生调用鸿蒙 API（如数据存储、网络请求）；
• 工具层面：DevEco Studio 提供仓颉语法高亮、调试与编译支持。

二、开发环境搭建

2.1 DevEco Studio 安装

DevEco Studio 是鸿蒙官方 IDE，需安装 3.1 及以上版本（支持仓颉）：

1. 下载地址：华为开发者联盟；
2. 安装时勾选 “HarmonyOS SDK” 与 “Cangjie Language Support”；
3. 首次启动后，在 “Settings> SDK Manager” 中确认 “Cangjie” 模块已安装。

2.2 仓颉环境配置

1. 检查 SDK 路径：File > Project Structure > SDK Location，确保 “Cangjie SDK” 路径正确；
2. 配置环境变量（Windows）：

   bash

   # 新增系统变量
   CANGJIE_HOME = D:\DevEcoStudio\SDK\cangjie\1.0.0
   # 追加Path
   %CANGJIE_HOME%\bin
   

3. 验证：终端输入cangjie --version，输出版本号即配置成功。

2.3 第一个仓颉 - 鸿蒙项目创建

1. 打开 DevEco Studio，点击 “Create Project”；
2. 选择 “Application> Empty Ability > Cangjie”，点击 “Next”；
3. 配置项目信息：
   • Project Name：CangjieHarmonyDemo；
   • Package Name：com.example.cangjiedemo；
   • Save Location：自定义路径；
   • Compatible API Version：9 及以上；
4. 点击 “Finish”，项目结构如下：

   plaintext

   CangjieHarmonyDemo/
   ├─ entry/                 # 主模块
   │  ├─ src/main/cangjie/   # 仓颉代码
   │  │  ├─ main_page.cj     # 主页面
   │  │  └─ app.ability.cj   # 应用入口
   │  └─ src/main/resources/ # 资源文件（图片、布局等）
   └─ build.gradle           # 项目配置
   

三、鸿蒙应用基础架构（仓颉实现）

3.1 Stage 模型核心概念

Stage 模型以 “Stage” 为应用容器，通过 “Ability” 管理组件，仓颉实现如下：

cangjie

// app.ability.cj（应用入口）
import ability from '@ohos.app.ability.Ability'
import window from '@ohos.window'

export default class EntryAbility extends ability.Ability {
  // 应用启动时调用
  onCreate(want, launchParam) {
    console.log("EntryAbility onCreate")
  }

  // 进入前台时调用
  onForeground() {
    console.log("EntryAbility onForeground")
  }

  // 创建UI窗口
  onWindowStageCreate(windowStage: window.WindowStage) {
    console.log("EntryAbility onWindowStageCreate")
    // 加载主页面
    windowStage.loadContent('main_page', (err, data) => {
      if (err) {
        console.error("加载页面失败：" + err.message)
        return
      }
    })
  }
}

3.2 页面与组件结构

鸿蒙页面通过 ArkUI 组件构建，仓颉使用声明式语法描述 UI：

cangjie

// main_page.cj（主页面）
import { Column, Text, Button } from '@ohos.arkui'

@Entry  // 标记为页面入口
@Component  // 标记为组件
struct MainPage {
  // 页面构建
  build() {
    Column() {  // 垂直布局容器
      Text('Hello, 鸿蒙 + 仓颉!')  // 文本组件
        .fontSize(30)
        .margin(20)
      
      Button('点击我')  // 按钮组件
        .onClick(() => {  // 点击事件
          console.log("按钮被点击")
        })
    }
    .width('100%')  // 宽度占满屏幕
    .height('100%') // 高度占满屏幕
    .justifyContent(FlexAlign.Center)  // 垂直居中
  }
}

四、核心功能开发实战（代码示例）

4.1 基础 UI 组件开发

4.1.1 文本与图片组件

cangjie

import { Column, Text, Image } from '@ohos.arkui'

@Component
struct MediaComponent {
  build() {
    Column() {
      // 文本组件：支持样式与换行
      Text('鸿蒙应用开发指南')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .color('#36D')
        .margin(10)
      
      // 图片组件：加载本地资源
      Image($r('app.media.logo'))  // 资源路径：resources/media/logo.png
        .width(200)
        .height(200)
        .objectFit(ImageFit.Contain)  // 保持比例
        .borderRadius(10)  // 圆角
    }
  }
}

4.1.2 列表组件（List）

cangjie

import { Column, List, ListItem, Text } from '@ohos.arkui'

@Component
struct ListComponent {
  // 列表数据
  private data: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4']

  build() {
    Column() {
      List() {
        // 遍历数据生成列表项
        ForEach(this.data, (item) => {
          ListItem() {
            Text(item)
              .fontSize(18)
              .padding(15)
              .width('100%')
          }
          .borderBottom({ width: 1, color: '#EEE' })  // 下划线
        }, (item) => item)  // 唯一标识
      }
      .width('90%')
      .height(300)
    }
  }
}

4.2 状态管理与数据绑定

鸿蒙通过装饰器管理组件状态，仓颉支持以下核心装饰器：

装饰器	作用	示例
@State	组件内部状态，变化触发 UI 更新	@State count: number = 0
@Link	父子组件双向绑定	@Link count: number
@Prop	父子组件单向绑定	@Prop count: number

示例：计数器（状态管理）

cangjie

import { Column, Text, Button, Row } from '@ohos.arkui'

@Component
struct Counter {
  @State count: number = 0  // 内部状态

  build() {
    Column() {
      Text(`当前计数：${this.count}`)
        .fontSize(24)
        .margin(20)
      
      Row() {  // 水平布局
        Button('+')
          .onClick(() => this.count++)  // 递增
          .width(60)
          .height(60)
        
        Button('-')
          .onClick(() => this.count--)  // 递减
          .width(60)
          .height(60)
          .marginLeft(20)
      }
    }
  }
}

4.3 事件处理机制

鸿蒙支持多种事件（点击、滑动、输入等），仓颉通过onXxx方法绑定：

示例：输入框与事件传递

cangjie

import { Column, TextInput, Text, Button } from '@ohos.arkui'

@Component
struct EventDemo {
  @State inputText: string = ''  // 输入文本

  // 自定义事件处理函数
  private handleSubmit() {
    console.log("输入内容：" + this.inputText)
  }

  build() {
    Column() {
      TextInput({ placeholder: '请输入文本' })  // 输入框
        .width('80%')
        .height(50)
        .border({ width: 1 })
        .onChange((value) => {  // 输入变化事件
          this.inputText = value
        })
      
      Button('提交')
        .onClick(this.handleSubmit.bind(this))  // 绑定点击事件
        .margin(20)
    }
  }
}

4.4 数据存储（Preferences）

鸿蒙提供 Preferences 轻量存储，用于保存键值对数据：

cangjie

import { Column, Text, Button } from '@ohos.arkui'
import preferences from '@ohos.data.preferences'

@Component
struct StorageDemo {
  @State savedText: string = '未读取到数据'
  private pref: preferences.Preferences = null

  // 初始化存储
  async initStorage() {
    try {
      // 获取存储实例（包名+文件名）
      this.pref = await preferences.getPreferences(this.context, 'user_data')
      // 读取数据
      const value = await this.pref.get('user_text', '默认值')
      this.savedText = `存储数据：${value}`
    } catch (err) {
      console.error("存储初始化失败：" + err.message)
    }
  }

  // 保存数据
  async saveData() {
    if (!this.pref) return
    try {
      await this.pref.put('user_text', 'Hello Storage!')
      await this.pref.flush()  // 持久化
      this.savedText = '数据已保存'
    } catch (err) {
      console.error("保存失败：" + err.message)
    }
  }

  // 页面加载时初始化
  aboutToAppear() {
    this.initStorage()
  }

  build() {
    Column() {
      Text(this.savedText)
        .fontSize(18)
        .margin(20)
      
      Button('保存数据')
        .onClick(() => this.saveData())
    }
  }
}

4.5 网络请求与数据展示

通过@ohos.net.http模块实现网络请求（需在module.json5中声明网络权限）：

cangjie

// module.json5 权限配置
{
  "module": {
    "requestPermissions": [
      { "name": "ohos.permission.INTERNET" }
    ]
  }
}

cangjie

import { Column, List, ListItem, Text, LoadingProgress } from '@ohos.arkui'
import http from '@ohos.net.http'

@Component
struct NetworkDemo {
  @State dataList: string[] = []
  @State isLoading: boolean = false

  // 发起网络请求
  async fetchData() {
    this.isLoading = true
    let request = http.createHttp()
    try {
      // 请求GitHub公开API
      let response = await request.request(
        'https://api.github.com/repos/harmonyos/docs/contents',
        { method: http.RequestMethod.GET }
      )
      
      if (response.result) {
        const data = JSON.parse(response.result.toString())
        // 提取数据中的名称
        this.dataList = data.map(item => item.name)
      }
    } catch (err) {
      console.error("请求失败：" + err.message)
    } finally {
      this.isLoading = false
      request.destroy()  // 销毁请求
    }
  }

  aboutToAppear() {
    this.fetchData()
  }

  build() {
    Column() {
      if (this.isLoading) {
        LoadingProgress()  // 加载动画
          .size({ width: 50, height: 50 })
          .color('#36D')
      } else {
        List() {
          ForEach(this.dataList, (item) => {
            ListItem() { Text(item).padding(15) }
          }, (item) => item)
        }
      }
    }
  }
}

4.6 页面路由与参数传递

使用@ohos.router实现页面跳转，支持参数传递：

页面 A（跳转发起方）

cangjie

import { Column, Button } from '@ohos.arkui'
import router from '@ohos.router'

@Component
struct PageA {
  build() {
    Column() {
      Button('跳转到PageB')
        .onClick(() => {
          // 携带参数跳转
          router.pushUrl({
            url: 'pages/PageB',  // 页面路径
            params: { name: '鸿蒙', version: '4.0' }
          })
        })
    }
  }
}

页面 B（接收方）

cangjie

import { Column, Text, Button } from '@ohos.arkui'
import router from '@ohos.router'

@Component
struct PageB {
  @State receivedParams: string = ''

  aboutToAppear() {
    // 获取参数
    const params = router.getParams() as { name: string, version: string }
    this.receivedParams = `接收参数：名称=${params.name}，版本=${params.version}`
  }

  build() {
    Column() {
      Text(this.receivedParams)
        .margin(20)
      
      Button('返回PageA')
        .onClick(() => router.back())  // 返回上一页
    }
  }
}

五、开发流程与生命周期流程图（mermaid）

5.1 鸿蒙应用开发全流程

graph TD
    A[需求分析] --> B[架构设计]
    B --> C[环境搭建<br/>DevEco Studio + 仓颉SDK]
    C --> D[项目初始化<br/>创建Stage模型项目]
    D --> E[UI开发<br/>用仓颉实现页面组件]
    E --> F[业务逻辑开发<br/>状态管理/事件处理]
    F --> G[功能集成<br/>存储/网络/路由]
    G --> H[调试<br/>模拟器/真机测试]
    H --> I[打包HAP<br/>签名配置]
    I --> J[发布<br/>华为应用市场]

5.2 组件生命周期流程图

graph LR
    A[组件创建] --> B[aboutToAppear()<br/>初始化数据]
    B --> C[build()<br/>构建UI]
    C --> D[onPageShow()<br/>页面显示]
    D --> E{状态变化?}
    E -->|是| F[rebuild()<br/>重新渲染]
    F --> D
    E -->|否| D
    D --> G[onPageHide()<br/>页面隐藏]
    G --> H[aboutToDisappear()<br/>资源释放]
    H --> I[组件销毁]

5.3 页面跳转流程

sequenceDiagram
    participant PageA
    participant Router
    participant PageB
    
    PageA->>Router: pushUrl(参数)
    Router->>PageB: 初始化并传递参数
    PageB->>PageB: aboutToAppear()处理参数
    PageB->>Router: 渲染完成
    Router->>PageA: 隐藏PageA
    
    Note over PageB,Router: 用户操作...
    
    PageB->>Router: back()
    Router->>PageA: 显示PageA
    Router->>PageB: 销毁PageB

六、AI 辅助开发：Prompt 示例

6.1 组件开发 Prompt

需求：用仓颉实现一个带搜索功能的商品列表，支持输入关键词过滤。

plaintext

Prompt：
请用仓颉语言结合鸿蒙ArkUI框架，实现一个商品列表组件，包含以下功能：
1. 顶部搜索框，输入时实时过滤列表；
2. 列表项显示商品名称、价格和图片；
3. 初始数据为：[
  { id: 1, name: '鸿蒙手机', price: 3999, img: 'phone.png' },
  { id: 2, name: '鸿蒙平板', price: 2999, img: 'pad.png' },
  { id: 3, name: '智能手表', price: 1599, img: 'watch.png' }
]
要求代码可运行，并解释搜索过滤的核心逻辑。

AI 回复核心代码：

cangjie

import { Column, Row, TextInput, List, ListItem, Image, Text } from '@ohos.arkui'

@Component
struct ProductList {
  @State keyword: string = ''
  private products = [
    { id: 1, name: '鸿蒙手机', price: 3999, img: 'phone.png' },
    { id: 2, name: '鸿蒙平板', price: 2999, img: 'pad.png' },
    { id: 3, name: '智能手表', price: 1599, img: 'watch.png' }
  ]

  // 过滤逻辑：包含关键词则显示
  get filteredProducts() {
    return this.products.filter(p => 
      p.name.includes(this.keyword)
    )
  }

  build() {
    Column() {
      // 搜索框
      TextInput({ placeholder: '搜索商品...' })
        .onChange((val) => this.keyword = val)
        .padding(10)
        .width('90%')
        .border({ width: 1 })
      
      // 过滤后的列表
      List() {
        ForEach(this.filteredProducts, (item) => {
          ListItem() {
            Row() {
              Image($r(`app.media.${item.img}`))
                .width(80)
                .height(80)
              Column() {
                Text(item.name).fontSize(18)
                Text(`¥${item.price}`).color('#F00')
              }.marginLeft(10)
            }.padding(10)
          }
        }, (item) => item.id)
      }
    }
  }
}

6.2 错误处理 Prompt

需求：优化网络请求代码，添加超时与错误提示。

plaintext

Prompt：
以下是仓颉语言的网络请求代码，存在未处理超时和错误提示的问题。请优化代码：
1. 设置10秒超时；
2. 当网络错误（如无网）时，显示"网络异常，请检查连接"；
3. 当服务器错误（状态码≠200）时，显示"服务器错误：状态码XXX"；
4. 超时显示"请求超时，请重试"。

原代码：
async fetchData() {
  let request = http.createHttp()
  let response = await request.request('https://api.example.com/data')
  this.data = JSON.parse(response.result)
}

七、架构与组件关系图表

7.1 鸿蒙应用分层架构图

graph TB
    subgraph A1 [应用层（仓颉开发）]
        A[UI组件<br/>Text/Button/List]
        B[业务逻辑<br/>状态管理/事件]
        C[页面路由<br/>Router]
    end
    
    subgraph A2 [框架层]
        D[ArkUI框架<br/>布局/渲染]
        E[Ability框架<br/>生命周期管理]
        F[服务能力<br/>存储/网络/设备]
    end
    
    subgraph A3 [系统层]
        G[鸿蒙内核<br/>分布式调度]
        H[硬件驱动<br/>跨设备适配]
    end
    
    A --> D
    B --> E
    C --> F
    D --> G
    E --> G
    F --> H
    G --> H

7.2 仓颉组件关系图

graph TD
    Page[页面组件<br/>@Entry] -->|包含| ComponentA[自定义组件A<br/>@Component]
    Page -->|包含| ComponentB[自定义组件B<br/>@Component]
    ComponentA -->|状态传递| ComponentC[子组件C<br/>@Prop/@Link]
    ComponentB -->|调用| Service[服务能力<br/>存储/网络]
    Service -->|返回数据| ComponentB

八、开发实例效果展示（图片描述）

8.1 开发环境界面

描述：DevEco Studio 界面分为三部分：左侧为项目目录（显示main_page.cj等文件），中间为仓颉代码编辑区（高亮显示@State、Column等关键字），右侧为 UI 预览窗口（实时显示 “Hello, 鸿蒙 + 仓颉！” 文本与按钮）。底部控制台输出 “EntryAbility onCreate” 等生命周期日志。

8.2 应用运行效果

描述：鸿蒙模拟器显示计数器应用：顶部文本显示 “当前计数：0”，下方有 “+” 和 “-” 按钮。点击 “+” 后，计数实时变为 1，UI 无闪烁更新。页面底部显示网络请求的商品列表，包含图片与价格，搜索框输入 “鸿蒙” 后，仅显示 “鸿蒙手机” 和 “鸿蒙平板”。

九、进阶技巧与最佳实践

9.1 性能优化

• 组件复用：使用ForEach时确保唯一标识（避免重复渲染）；
• 状态精简：减少@State变量数量，非 UI 相关数据无需声明状态；
• 图片优化：使用ImageCache缓存网络图片，避免重复下载。

9.2 跨设备适配

• 使用相对单位（%、vp）替代固定像素；
• 通过mediaquery适配不同屏幕尺寸：

  cangjie

  @State isTablet: boolean = false
  
  aboutToAppear() {
    mediaquery.matchMediaSync('(min-width: 800vp)').onChange((data) => {
      this.isTablet = data.matches  // 平板设备判断
    })
  }
  

9.3 调试技巧

• 使用console.log输出变量，配合 DevEco Studio 的 “Logcat” 查看；
• 利用 “UI Inspector” 分析组件布局层级；
• 真机调试时，开启 “性能分析” 监测内存与 CPU 占用。

十、总结与展望

仓颉语言为鸿蒙应用开发提供了更简洁、安全的编程范式，其与 ArkUI 的深度融合大幅降低了跨设备开发门槛。随着鸿蒙生态的扩张，仓颉将支持更多场景（如车机、智能家电），成为鸿蒙开发者的核心工具。

通过本文的代码示例、流程图与最佳实践，开发者可快速掌握仓颉开发鸿蒙应用的核心能力，后续可进一步探索分布式数据管理、跨设备协同等高级特性。