写点什么

我们又来啦 又又上架了一个鸿蒙项目 - 萤火故事屋

作者:万少
  • 2025-06-12
    广东
  • 本文字数:4366 字

    阅读完需:约 14 分钟

我们又来啦 又又上架了一个鸿蒙项目-萤火故事屋

萤火故事屋介绍

萤火故事屋青蓝逐码孵化的一款针对儿童类的鸿蒙元服务,打造全龄段语言娱乐空间,涵盖童话、脑筋急转弯、绕口令、猜谜语四大模块。童话配套生动剧情,脑筋急转弯、谜语设阶梯模式,绕口令丰富多彩。即刻开启思维与语言的趣味之旅!



萤火故事屋从 4 月 1 号立项,开发时间一个月,预计 5 月 1 号上架。



但是一开始萤火故事屋的名字是叫做 故事大王,因为故事大王这个名字起初在鸿蒙应用商店中没有出现过,所以我们负责立项的小伙伴打算叫这个名字。后面华为那边因为这个名字太有特点,需要我们提供这个名字的商标,才能允许上架。但是当初我们备案也是拿故事大王去备案、AGC 上的资料也全部都是故事大王,所以等于需要重新走一遍备案的流程,这个上架失败的事情,其实主要原因在于我,因为我昨晚把控流程的负责人,当初其实是感觉到这个名字有问题,但是后面因为某些原因没有细究。



这个也充分说明懂技术和做产品其实是两码事。需要把握的事项更多,其中,还需要注意的是,萤火故事屋里面引用的一些故事是否会侵权。假如,我在这里面引用了 大头儿子和小头爸爸的一些故事,会不会侵权呢 🙂,这个问题留给聪明的评论区的网友





总而言之吧,最后我们重新调整资料,萤火故事屋就顺利上线了。





核心开发人员

萤火故事屋的核心开发人员也很年轻呀,都是 25 届毕业的小伙伴。其中 1 个已经有几个鸿蒙项目的开发经验来,也是在工作之余抽空来主导项目的开发,另外一个 25 届的小伙伴要稍弱些,但是大部分的基础代码也是他完成了。


开发的小故事

开始组团打怪了

教小伙伴用用 git

执行力也很强

初步有成果

教一下开发规范

重命名时候的讨论

成就感最足的时候吧

🏗️ 架构设计

模块化架构

  • entry 模块: 主入口模块,包含核心功能

  • home 模块: 首页相关功能

  • my 模块: 个人中心模块

  • collect 模块: 收藏功能模块

  • AppScope: 全局应用范围配置

目录结构设计

entry/src/main/ets/├── component/     # 通用组件├── views/        # 视图组件├── pages/        # 页面├── utils/        # 工具类├── Data/         # 数据管理├── constants/    # 常量定义└── storywidget/  # 小组件
复制代码

🚀 核心技术亮点

1. 现代化 UI 组件体系

AtomicServiceNavigation 导航系统

// Index.etsimport {  AtomicServiceNavigation,  AtomicServiceTabs,  TabBarOptions,  TabBarPosition,} from "@kit.ArkUI";
复制代码


  • 使用 AtomicServiceNavigation 实现现代化导航

  • 支持路由栈管理 NavPathStack

  • 集成 AtomicServiceTabs 底部标签导航

自定义 Builder 模式

@BuildernavigationContent() {  Column() {    AtomicServiceTabs({      tabContents: [        () => {          this.tabContent1()        },        () => {          this.tabContent4()        }      ],      tabBarOptionsArray: [        new TabBarOptions($r('app.media.icon_shouye'), '首页', $r('app.color.bottom_icon'), '#ff39a7b5'),        new TabBarOptions($r('app.media.icon_wode'), '我的', $r('app.color.bottom_icon'), '#ff39a7b5'),      ],
复制代码

2. 深色模式完整解决方案

系统级深色模式支持

import { ConfigurationConstant } from "@kit.AbilityKit"@CustomDialogexport struct blackMode {  controller: CustomDialogController  @StorageLink('isOn') isOn:boolean = true  @StorageLink('isNormal') isNormal:boolean = true
setModel() { const appContext = getContext().getApplicationContext() if (this.isOn) { appContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET) } else { appContext.setColorMode(this.isNormal ? ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT : ConfigurationConstant.ColorMode.COLOR_MODE_DARK) } }
复制代码


技术特点:


  • 支持跟随系统模式

  • 手动切换亮色/暗色模式

  • 使用 @StorageLink 实现全局状态管理

  • 自定义对话框组件实现设置界面

3. 沉浸式全屏体验

智能全屏管理

import { window } from "@kit.ArkUI";import {  AREA_BOTTOM,  AREA_TOP,  ENTRY_ABILITY_CONTEXT,} from "../constants/Index";
class FullScreen { async enable() { const ctx = AppStorage.get<Context>(ENTRY_ABILITY_CONTEXT); let windowClass = await window.getLastWindow(ctx!); windowClass.setWindowLayoutFullScreen(true);
//保证安全区域 const area = windowClass.getWindowAvoidArea( window.AvoidAreaType.TYPE_SYSTEM ); AppStorage.setOrCreate(AREA_TOP, px2vp(area.topRect.height));
const area2 = windowClass.getWindowAvoidArea( window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR ); AppStorage.setOrCreate(AREA_BOTTOM, px2vp(area2.bottomRect.height)); }}
复制代码


技术亮点:


  • 自动计算安全区域避让

  • 状态栏和导航栏高度适配

  • 单例模式封装全屏管理

4. 网络请求架构

基于 Axios 的 HTTP 封装

import axios, {  AxiosError,  AxiosRequestConfig,  AxiosResponse,  InternalAxiosRequestConfig,} from "@ohos/axios";
export const instance = axios.create({ baseURL: "",});
// 添加请求拦截器instance.interceptors.request.use( (config: InternalAxiosRequestConfig) => { "Content-Type: application/x-www-form-urlencoded"; return config; }, (error: AxiosError) => { return Promise.reject(error); });
// 响应拦截器instance.interceptors.response.use( (response: AxiosResponse) => { return response.data; }, (error: AxiosError) => { return Promise.reject(error); });
class Http { request<T, R = null>(config: AxiosRequestConfig) { type IAxiosResponse = AxiosResponse<T>; return instance<T, IAxiosResponse, R>(config).then((res) => { return Promise.resolve(res as T); }); }}
复制代码


特色功能:


  • TypeScript 泛型支持

  • 请求/响应拦截器

  • 统一错误处理

  • 链式调用 API

5. 广告集成系统

原生广告组件

import { advertising } from "@kit.AdsKit";
export class NativeAdUtil { private ads: Array<advertising.Advertisement> = []; private context: common.UIAbilityContext = getContext( this ) as common.UIAbilityContext;
requestAd() { const adDisplayOptions: advertising.AdDisplayOptions = { mute: false, }; const nativeVideoAdReqParams: advertising.AdRequestParams = { adId: "g22kxp6lfs", adType: 3, adCount: 1, enableDirectReturnVideoAd: true, };
const adLoaderListener: advertising.AdLoadListener = { onAdLoadFailure: (errorCode: number, errorMsg: string) => { hilog.error( 0x0000, "testTag", "%{public}s", `Failed to request ad, message: ${errorMsg}, error code: ${errorCode}` ); }, onAdLoadSuccess: (ads: Array<advertising.Advertisement>) => { emitter.emit("NativeAdPage", { data: { ads: ads, adDisplayOptions: adDisplayOptions }, }); }, }; }}
复制代码


广告特性:


  • 支持原生广告和插屏广告

  • 事件驱动的广告加载

  • 完整的错误处理机制

  • 广告内容分级控制

6. 状态管理体系

多层级状态管理

@StorageProp(AREA_TOP)safeTop: number = 0@StorageProp(AREA_BOTTOM)safeBottom: number = 0@StorageProp('isOn') isOn: boolean = true@StorageProp('isNormal') isNormal: boolean = true@Provide("pageStack")pageStack: NavPathStack = new NavPathStack()
复制代码


状态管理策略:


  • @StorageProp: 全局持久化状态

  • @Provide/@Consume: 跨组件状态传递

  • @State: 组件内部状态

  • @Watch: 状态变化监听

7. 智能搜索系统

动态搜索提示

titleArr() {  const resProverbsAll = this.proverbsAll.map((item: ProverbsDetail) => {    return item.text  })  const resRiddlesArr = this.riddlesArr.map((item: RiddlesObj) => {    return item.question  })  const resStoryDetailsAll = this.storyDetailsAll.map((item: StoryDetailsObj) => {    return item.title  })  const resTopTabsRiddleArr = this.topTabsRiddleArr.map((item: TopTabsRiddle) => {    return item.title  })  this.TitleArr.push(...resProverbsAll, ...resRiddlesArr, ...resStoryDetailsAll, ...resTopTabsRiddleArr)}
Title() { const res = Math.floor(Math.random() * this.TitleArr.length); this.title = this.TitleArr[res]}
复制代码


搜索特色:


  • 多数据源聚合搜索

  • 随机搜索提示轮播

  • 定时器控制搜索框动效

8. 性能优化技巧

视图可见性优化

.onVisibleAreaChange([0, 1], (isVisible) => {  if (isVisible) {    const res = setInterval(() => {      this.Title()      console.log('你是猪')    }, 3000)    this.setIntervalID = res  } else {    clearInterval(this.setIntervalID)  }})
复制代码


优化策略:


  • 基于可见性的定时器管理

  • 避免不必要的后台计算

  • 内存泄漏预防

9. 趣味交互设计

随机励志语录弹窗

@State messageList: string[] = [  '成长不是一蹴而就,每一次错误都是成长的台阶,勇于犯错,才能更快抵达成熟的彼岸。',  '学习如同登山,每一步攀登都可能艰辛,但每一次登高都会让你看到更美的风景。',  // ... 更多励志语录]
.onClick(() => { this.handlePopup = true if(this.handlePopup){ this.Message = this.messageList[Math.floor(Math.random() * this.messageList.length)] }})
复制代码


交互亮点:


  • 随机励志语录系统

  • 浮动卡片设计

  • 阴影和圆角现代化 UI

🛠️ 编程技巧总结

1. ArkTS 最佳实践

  • 严格的类型定义

  • 泛型编程应用

  • 接口定义规范

2. 组件化设计模式

  • 高内聚低耦合组件

  • 可复用 UI 组件库

  • 统一的组件接口

3. 异步编程处理

  • Promise 链式调用

  • async/await 语法

  • 错误边界处理

4. 内存管理优化

  • 定时器生命周期管理

  • 事件监听器清理

  • 组件销毁时的资源释放

5. 用户体验优化

  • 加载状态管理

  • 错误状态友好提示

  • 流畅的页面转场动效

📱 设备适配特性

  • 多设备支持: 手机和平板适配

  • 安全区域适配: 全面屏设备支持

  • 响应式布局: 不同屏幕尺寸自适应

  • 深色模式: 系统级主题切换

总结

关于青蓝逐码组织


如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯甚至你想要做出一款属于自己的应用!欢迎在评论区留言或者私信或者看我个人信息,可以加入技术交流群。



发布于: 刚刚阅读数: 2
用户头像

万少

关注

还未添加个人签名 2021-12-02 加入

还未添加个人简介

评论

发布
暂无评论
我们又来啦 又又上架了一个鸿蒙项目-萤火故事屋_鸿蒙_万少_InfoQ写作社区