鸿蒙Harmony应用开发,一起来写一个“遥遥领先”的开眼App

前言

最近不知道怎么鸿蒙Harmony突然就很火,到处都是鸿蒙开发相关的文章,培训机构的也是各种推鸿蒙应用,不知道是真的🔥了,还是在贩卖焦虑!不过看热度不错,那也就来了解了解咱们的遥遥领先😊,花了大概一周的闲暇时间从了解到参照自己以前开眼App的api写了一款鸿蒙版本的开眼App!!!

先把项目的地址贴上去:WinWang/HarmoneyOpenEye: 华为鸿蒙Harmony开眼App(项目整体基于Api9+ArkTs+ArkUI) (github.com)

开发准备

1、开发工具

这一块推荐大家直接看官方社区文档,跟着文档走,下载开发工具DevEco-Studio并按照提示配置好对应的环境,初次体验可以尝试官方给的Sample创建一个demo工程体验下项目的配置和页面UI等

2、安装设备

遥遥领先是买不起了,大家直接类似Android开发一样创建对应的模拟器就好了;我用同事的真机安装测试发现Mate 30系列其实安装起来体验很糟糕,看官方论坛说是针对麒麟990和以前的cpu兼容性还没处理好,具体表现是点击界面线程阻塞无响应。

3、开发鸿蒙相关网站

以下网站是我在开发中使用较多的网站

1、UI使用参考
开发说明-容器组件-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参考-HarmonyOS应用开发

2、相关开源库查询使用参考
DevEco Marketplace (harmonyos.com)

3、相关问题查询-官方论坛
文档中心 | 华为开发者联盟 (huawei.com)

项目功能简介

项目开发细节就不做过多的介绍了,项目整体基于Api9+Stage模式+ArkTs+ArkUI,主要列举下项目相关功能

1、常用组件的抽取;

2、网络请求的基础封装(基于axios和http分别写了一份)

3、封装项目页面多状态(加载中,成功,失败,空数据)

4、视频播放以及视频列表播放功能

5、列表页面刷新加载、滚动监听示例等

需要注意一点的是项目里面因为引用了axios框架,需要用ohpm(类似npm吧😭)安装axios,如果不能运行配置下环境变量即可 ohpm install @ohos/axios

项目贴图


总结

针对鸿蒙开发,相对来说如果有过Flutter或者Android Compose开发经验,使用ArkUI开发UI会无差别上手开撸;ArkTs对前端大佬来说又很熟悉和友好,不过总的来说都还行,新推出的UI都往声明式UI方向走,开发语言当作ts来对待就好,我的理解是多了些装饰器等等,当然在开发的时候也遇到一些槽点吧,我罗列大致如下:

1、自定义组件里面放BuilderParams的时候,如果超过两个不能使用闭包,这针对需要外部传参两个BuilderParams的情况写法就不太友好

2、自定义组件里面Link和Props不能设置默认值,使用这个组件外部必须使用State声明同步传递参数

3、@Extend和@Style这种抽取样式居然不能在组件外抽取公共的样式,只能在创建组件的Component里面创建,这样就没有办法设置公共的按钮、文字这些的样式了

4、沉浸式状态栏看了官方的Api和社区,我目前没找到很好的解决办法

5、最大的可能就是真机运行的支持了

可能我说的这些问题也有好的解决方法,希望知道的大佬不吝赐教!!!

##### 最后也把自己一些其他项目学习的链接贴下,只能说现在都在往大前端方向走了,真的卷不动了 Flutter版本 开眼App链接(getx+retrofit+dio+jsonserialize+自定义控件demo):github.com/WinWang/ope...

Flutter版本 的音乐播放App链接(getx+retrofit+dio):github.com/WinWang/mus...

ReactNative版本 的开眼App链接(ReactNative-0.72):github.com/WinWang/RNO...

React版本 的开眼App链接(React18+React-Vant+Mobx+axios):github.com/WinWang/rea...

Vue2版本 WanAndroid链接(Vue2+vuex+vant+axios):github.com/WinWang/Vue...

Vue3版本 WanAndroid链接(vue3+typeScript+pinia+vant+vite):github.com/WinWang/Vue...

Android组件化项目 ReadingGallery链接(jetpack+kotlin+koin+couroutine):github.com/WinWang/Rea...

Android组件化项目初始化工具 ApplicationInit链接(gradle-plugin+注解APT+ASM):github.com/WinWang/App...

相关推荐
郭老二4 小时前
【前端】vue3:编译步骤
前端
不在逃避q4 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁5 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9855 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易5 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师6 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174466 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈6 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen7 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒7 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端