HarmonyOS开发那些事 原创

逸叶澜倾
发布于 2025-3-28 14:30
5375浏览
1收藏

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

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

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

@Styles就是个样式复读机(通用样式) 看这段:

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

// 用起来巨简单
Button("登录").通用样式名()
Button("注册").通用样式名()
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

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

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

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

Text("鸿蒙好").炫酷文字(24)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

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

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

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

  1. onCreate - 出生证明
onCreate() {
  加载数据库()
  初始化配置()
} // 跟开店前进货一个道理
  • 1.
  • 2.
  • 3.
  • 4.
  1. onWindowStageCreate - 装修店面
onWindowStageCreate() {
  加载页面('主页') 
  挂载事件监听()
} // 摆货架装潢
  • 1.
  • 2.
  • 3.
  • 4.
  1. onForeground/Background - 开门/打烊
onForeground() {
  开定位()
  开启推送()
} // 亮灯迎客

onBackground() {
  关摄像头()
  清缓存()
} // 关灯省电
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  1. onDestroy - 拆迁通知
onDestroy() {
  保存数据()
  释放资源()
} // 打扫卫生,等待下一次开门
  • 1.
  • 2.
  • 3.
  • 4.

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

onNewWant() {
  更新商品()
  换广告()
}
  • 1.
  • 2.
  • 3.
  • 4.

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

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

Deep Linking - 直通车

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

App Linking - 带安检的直通车

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

状态管理像记小本本:

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

  @action
  加购(商品) {
    this.商品列表.push(商品)
  } // 数据变UI自动刷新 魔法!
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

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

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

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

八个实战案例:

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

比如动态加载:

onScrollToBottom() {
  追加新数据() // 滑到底自动加载
}
  • 1.
  • 2.
  • 3.

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

用户设置老丢失?用Preferences存配置:

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

// 取配置
onPageShow() {
  const size = await PreferencesUtil.getFontSize()
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

全局上下文管理:

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

  static 取实例() {
    if(!实例) 实例 = new 全局仓库()
    return 实例
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

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

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

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

七、资源管理与应用分身

  1. 资源分类

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

{
  "layered-image": {
    "背景图": "$media:bg",
    "前景图": "$media:fg"
  }
} // 图标秒变3D
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  1. 应用分身
{
  "multiAppMode": {
    "type": "appClone",
    "最大分身数": 2 
  }
} // 一个App裂变成俩
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

八、配置文件:App的DNA

app.json5是身份证:

{
  "bundleName": "com.xxx.app",
  "version": "2.0",
  "icon": "$media:图标"
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

module.json5是模块说明书:

{
  "abilities": [{
    "name": "MainAbility",
    "label": "主功能"
  }]
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

九、条件渲染与性能优化

if-else玩动态UI:

if(已登录) {
  显示用户面板()
} else {
  显示登录按钮()
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

LazyForEach防卡顿:

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

十、踩坑指南

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

最后说点人话

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
收藏 1
回复
举报
1


回复
    相关推荐