鸿蒙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...

相关推荐
李昊哲小课1 分钟前
deepin 安装 chrome 浏览器
java·大数据·前端·chrome·python
ew452187 分钟前
【VUE】el-table表格内输入框或者其他控件规则校验实现
前端·javascript·vue.js
Lsx-codeShare8 分钟前
Uniapp 安装安卓、IOS模拟器并调试
android·前端·javascript·ios·微信小程序·小程序·uni-app
longlongago~~12 分钟前
DRM(数字权限管理技术)防截屏录屏----视频转hls流加密、web解密播放
前端·windows·node.js·音视频
爱上语文17 分钟前
Ajax入门程序
前端·javascript·css·ajax·html
北国13721 分钟前
python端拉流检测后再推流到流媒体服务器实现前端拉流查看(多摄像头切换)
服务器·前端·python·opencv·流媒体服务器
木子七24 分钟前
vue3-组件通信
前端·vue
乐闻x26 分钟前
Vue 是如何实现数据双向绑定的?
前端·vue.js
乐闻x27 分钟前
Vue 3 实现高性能拖拽指令的最佳实践
前端·javascript·vue.js
陈逸轩*^_^*39 分钟前
硅谷甄选前端项目环境配置笔记
前端·笔记