HarmonyOS开发那些事 原创

嘿 兄弟们 今天咱们来唠唠HarmonyOS开发那些事 作为一个手残党码农 我尽量用大白话把这事儿整明白 准备好了吗 咱们开整！

一、UI整容黑科技：@Styles和@Extend

先说个痛点 每次写UI样式是不是疯狂Ctrl+C/V？ArkUI给了俩神器：

@Styles就是个样式复读机（通用样式） 看这段：

@Styles
function 通用样式名() {
  .width(150)
  .height(50)
  .backgroundColor("#007DFF")
}

// 用起来巨简单
Button("登录").通用样式名()
Button("注册").通用样式名()

所有按钮共用一套皮肤 改样式只需改一处 真香！

@Extend更骚 能给组件打补丁 比如给文字加彩虹特效：

@Extend(Text)
function 炫酷文字(字号: number) {
  .fontColor("#FF0000")
  .fontSize(字号)
  .textShadow({radius:2, color:Color.Blue})
}

Text("鸿蒙好").炫酷文字(24)

还能叠buff 后面写的样式会覆盖前面的 跟PS图层似的

二、应用心脏起搏器：UIAbility生命周期

UIAbility就是App的心脏 得搞明白它咋跳的 四个阶段：

1. onCreate - 出生证明

onCreate() {
  加载数据库()
  初始化配置()
} // 跟开店前进货一个道理

2. onWindowStageCreate - 装修店面

onWindowStageCreate() {
  加载页面('主页') 
  挂载事件监听()
} // 摆货架装潢

3. onForeground/Background - 开门/打烊

onForeground() {
  开定位()
  开启推送()
} // 亮灯迎客

onBackground() {
  关摄像头()
  清缓存()
} // 关灯省电

4. onDestroy - 拆迁通知

onDestroy() {
  保存数据()
  释放资源()
} // 打扫卫生，等待下一次开门

特别提醒：用singleton模式时 二次启动不走onCreate 直接进onNewWant 相当于店铺换招牌继续营业：

onNewWant() {
  更新商品()
  换广告()
}

三、App间传送门：跳转与状态管理

App不能当孤岛 得会串门 鸿蒙有俩跳转方式：

Deep Linking - 直通车

context.openLink("harmony://shop/123") 
// 指哪打哪但可能开到黑车

App Linking - 带安检的直通车

context.openLink("https://shop.com/123", {appLinkingOnly:true})
// 多了域名验证更安全

状态管理像记小本本：

class 购物车 {
  @observable
  商品列表 = []

  @action
  加购(商品) {
    this.商品列表.push(商品)
  } // 数据变UI自动刷新 魔法！
}

四、列表管理：List和ListItem的骚操作

遇到列表高度问题？scrollToIndex不灵？给List设固定高度：

List()
.height(400) // 高度焊死
.scrollToIndex(0) // 现在能滚了

八个实战案例：

1. 基础列表
2. 带图标项
3. 多行文本
4. 可交互开关
5. 自定义高度
6. 分隔线
7. 懒加载
8. 搜索过滤

比如动态加载：

onScrollToBottom() {
  追加新数据() // 滑到底自动加载
}

五、数据持久化：用户的记忆面包

用户设置老丢失？用Preferences存配置：

// 存字体大小
PreferencesUtil.saveFontSize(24) 

// 取配置
onPageShow() {
  const size = await PreferencesUtil.getFontSize()
}

全局上下文管理：

class 全局仓库 {
  private static 实例 // 单例模式
  private 数据 = new Map()

  static 取实例() {
    if(!实例) 实例 = new 全局仓库()
    return 实例
  }
}

六、WebView预览Office：内置文档查看器

不用跳浏览器 直接内嵌看Word：

Web({
  src: "https://xxx.docx" // 在线文档
  // 或本地文件
  // src: getContext().filesDir + "/xxx.docx"
})
.domStorageAccess(true) // 开存储权限

七、资源管理与应用分身

1. 资源分类：

   • base放基础资源
   • en_US放英文资源
   • 用$r(‘app.color.primary’)调用

2. 分层图标：

{
  "layered-image": {
    "背景图": "$media:bg",
    "前景图": "$media:fg"
  }
} // 图标秒变3D

3. 应用分身：

{
  "multiAppMode": {
    "type": "appClone",
    "最大分身数": 2 
  }
} // 一个App裂变成俩

八、配置文件：App的DNA

app.json5是身份证：

{
  "bundleName": "com.xxx.app",
  "version": "2.0",
  "icon": "$media:图标"
}

module.json5是模块说明书：

{
  "abilities": [{
    "name": "MainAbility",
    "label": "主功能"
  }]
}

九、条件渲染与性能优化

if-else玩动态UI：

if(已登录) {
  显示用户面板()
} else {
  显示登录按钮()
}

LazyForEach防卡顿：

LazyForEach(数据, (item)=> {
  列表项()
}).cachedCount(10) // 只缓存10个项

十、踩坑指南

1. UIAbility销毁前必须清WindowStage
2. @Extend不能全局乱用
3. AppLinking必须配SSL证书
4. 状态管理别滥用 小项目用@State就行
5. List必须设高度 否则滚不动
6. 持久化数据要异步处理

最后说点人话

HarmonyOS开发就像搭乐高 掌握这些基础积木 剩下的就是排列组合 多看看官方文档遇到问题别慌 console.log大法好和传统前端也没什么区别