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

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐9 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟9 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站