前言:
今天带着无比激动的心情准备开启一个全新的学习专栏----华为鸿蒙应用开发,如标题所示,作为国内“第一”款“自研”的操作系统,且不论它目前完不完善,主动拥抱它就完了,另外一个层面也是迫于自己公司组里的“压力”,这周碰到好几个同事都在问:“你们APP兼容鸿蒙么?据说它比Android流畅N倍?”,然后我沉默之后只送出“灿烂”的笑脸,目前一无所知!!!所以有必要打破窘境。
其实吧,去年推出的时候就有想学的打算,但是呢,才当推出嘛,不着急,就跟当年的Android推出了Kotlin出来时我还特意买了一套很全的教程,买完之后就给放那冷藏了,导致现在还在学习它:
![](https://i-blog.csdnimg.cn/blog_migrate/3ceca8a88a1d99733762b89c4f84f735.png)
因为不得不学,如今很多Android项目都采用Koltin来编写了到时你都看不懂那还称之为合格的Android程序员么?同样的,对于鸿蒙,随着未来的不断完善再加上“国人”的大量拥抱肯定也会要面临Android的程序员得要会鸿蒙应用的开发。。苦逼的Android猿猴们。。
另外要开始学它的还有一个原因,就是华为前阵子6月2日发布了鸿蒙2:
![](https://i-blog.csdnimg.cn/blog_migrate/f9a28d836b034e66382d0b9989cacc4a.png)
直接真实在华为机子上跑了呀。。能不慌么?然后现在百度搜鸿蒙2的相关新闻提示已升级的用户量:
![](https://i-blog.csdnimg.cn/blog_migrate/005707d0ccd247e65d834fec47ff8b6d.png)
我朋友圈中就有人已经升级到鸿蒙了【国人情怀】:
![](https://i-blog.csdnimg.cn/blog_migrate/8d31fa01708e75ac0703a17edf1791f3.png)
看着跟安卓木有差别的样子,反正目前应该是兼容Android的应用。
总之,不管何种理由,今年肯定要主动拥抱鸿蒙,多多了解有益无害。
鸿蒙了解:
在正式使用鸿蒙进行开发之前,先对它有一个简单的了解,官网https://www.harmonyos.com/cn/home【国人的系统,以后学习不存在看官网需要FQ打不开的问题啦,刺激!】, 首先映入眼帘的是:
![](https://i-blog.csdnimg.cn/blog_migrate/0a69179fe36c2071853c597f682d81ef.png)
一切合一,啥意思呢?上https://sale.vmall.com/harmonyos_connect.html上可以看一段官方的视频简介,其中最后一张截图就道出了鸿蒙系统的定位:
![](https://i-blog.csdnimg.cn/blog_migrate/cf969540e4b241a7546c1c20e09e79be.png)
是不是定位吊炸天,但是!!!想想一些现在安卓手机主流厂商的,貌似都有此思想,嗯,这里简单了解一下。
对于开发者来说,当然只对开发的东东感兴趣,所以看一下官网的最底部有一个开发相关的东东:
![](https://i-blog.csdnimg.cn/blog_migrate/5f1d2a0032334fe52f7e3e6a9546ad83.png)
三种类型,其中对于我而言感兴趣的只有“应用开发”,设备开发和设备合作伙伴应该是针对硬件厂商的。然后此时再往右边一点看看,看到了“开发者论坛”:
![](https://i-blog.csdnimg.cn/blog_migrate/6265ca12e08a20fa995b32b50f4f479c.png)
哟西,这个很亲切,点进去瞅瞅,发现基本上都是发的手机升到鸿蒙之后的各种问题,贴一下:
![](https://i-blog.csdnimg.cn/blog_migrate/8d80f94d0d8ae69e115f07465f8e1e1c.png)
一个全新的系统,各种问题是很正常的【android当年不一样的么,还有像当年刚用小米1代时也是各种发热各种卡各种死机,经过岁月的沉淀这些问题都会得到解决的】,反正我木有华为机子,也暂时不想升鸿蒙,看看热闹~~
应用开发:
案例在线体验:
这里重点是来看一下应用开发相关的介绍,点击进入:
![](https://i-blog.csdnimg.cn/blog_migrate/2563d7c4ed3f1364d3b62505344036e1.png)
嗯,很全的样子,然后往下翻阅时看到个好玩的东东:
![](https://i-blog.csdnimg.cn/blog_migrate/b2c82b2f8d8f53c9d9bd01f23d6ee017.png)
“一次开发,多设备部署”,这思想貌似对于如今比较热门的Flutter、RN的跨平台框架的思想很类似,点击去体验一下:
![](https://i-blog.csdnimg.cn/blog_migrate/c7e3c89a27a56b000a895584e1f14ec5.gif)
要想跨平台,JS首当其冲~~另外还举了一个案例,也可以看一下:
![](https://i-blog.csdnimg.cn/blog_migrate/ec49760d82c40ea93f39c88406bb73b3.gif)
亲子教育应用,貌似挺神奇的样子,等于就是多台设备之间的互动,采用蓝牙么?可以查看一下它的原理图:
![](https://i-blog.csdnimg.cn/blog_migrate/71bdac4897d3a722cdcb6fbcfe8c74cd.png)
牛逼的样子!!!这块在未来的学习中看能不能领略到这个分布式的魅力。
教学视频:
然后我往下看,又看到一个对于纯小白比较有用的东东:
![](https://i-blog.csdnimg.cn/blog_migrate/b5c32796f25ffea1b3d8de8224291177.png)
这个很不错呀,嗯,那接下来打算挑选比较好的入门教程做参考进行入门,事半功倍~~点击其中一个进去瞅瞅:
![](https://i-blog.csdnimg.cn/blog_migrate/4e8d99b20a1964daa894299f53739d67.png)
哦,还要报名一下,那就点击报名,提示需要用华为者账号登录。。
![](https://i-blog.csdnimg.cn/blog_migrate/7a8053c247f60855e691561d69d3e149.png)
好吧,登录一下,然后再点击报名,还需要进行一个实名认证:
![](https://i-blog.csdnimg.cn/blog_migrate/1df9309819892e8364e4227513b07d5f.png)
其中学会还有个证书发放,如这样。。
![](https://i-blog.csdnimg.cn/blog_migrate/7a64c9175148e5eecfc6b52522c24add.png)
认证通过之后,此时就可以查看课程了:
![](https://i-blog.csdnimg.cn/blog_migrate/d3676f07ffca11eee5c1c751e92a8e8f.png)
这个是快速学习的一大法定,官方工程师的教程应该也是最权威的,也是接下来个人学习之路的一个向导。
HUAWEI DevEco Studio了解:
要开发肯定是少不了IDE的,这里简单了解一下,为啥?因为我在他们一教学视频对IDE的介绍时是这么说的:
![](https://i-blog.csdnimg.cn/blog_migrate/9a65f503ce6976a85371eef2294aeab9.png)
那做Android开发的对于IDE这块的过渡几乎不费啥力气,也就不过多的介绍了,随着之后的不断深入对于它的一些使用方式就自然熟了,另外再补一张关于工具的特点说明:
![](https://i-blog.csdnimg.cn/blog_migrate/0161b962a86bb0d25dada48707753d5d.png)
环境搭建:
接下来则正式进入开发环境的搭建,如所有新技术的学习一样,最终运行一个Hello World级别的DEMO工程出来,来直观感受一下跟Android开发有啥不同。
1、IDE下载:
![](https://i-blog.csdnimg.cn/blog_migrate/66f94c9f35595047f4cfafe799e408b0.png)
点击则跳到具体的下载入口:
![](https://i-blog.csdnimg.cn/blog_migrate/021156369838c3876dd793799228d209.png)
接下来下载安装就不过多说明了。装完之后:
![](https://i-blog.csdnimg.cn/blog_migrate/8720ed28992f3c4d0dd0c4dbf5d278c7.png)
看到这图标是不是有种似曾相识的感觉,看看它:
![](https://i-blog.csdnimg.cn/blog_migrate/271ab7f58a64fcf4d74fdddb38989666.png)
我去!!!瞬间感觉作为一名Android程序员的学习压力倍增呀,是不是得要有前端的基础才能搞得定鸿蒙开发呀~~有种不详的预感,不管怎么样,撸起袖子加油干就对了!!!
接下来打开它:
![](https://i-blog.csdnimg.cn/blog_migrate/8e04d65fd6fbdc174d4ea1177b003a0c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dee8f26056a0f4b3185e3c5c60bbf8f0.png)
安装sdk,
![](https://i-blog.csdnimg.cn/blog_migrate/a276f8c7849600d0c6f04ca7a22a473a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bc6742982bdb4c8fb4f63cfce194c6f8.png)
下载完成,到本地磁盘瞅一下目录,跟Android SDK有啥不一样:
![](https://i-blog.csdnimg.cn/blog_migrate/0869dbb3e0a8616d5a9b83d059aff3ff.png)
安装SDK完毕之后就可以看到主界面了:
![](https://i-blog.csdnimg.cn/blog_migrate/105ae8248fa18b1268958feeab28d4dd.png)
目前SDK有两个版本:
![](https://i-blog.csdnimg.cn/blog_migrate/d687caf41e09a39c71f2cb99947e0bc7.png)
2、创建HelloWorld工程:
接下来则来创建一个DEMO工程:
![](https://i-blog.csdnimg.cn/blog_migrate/ee717d9cd4b52aa7758fb4f1f8fcd2dd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e3ca25b401d698856b09c1465682f9b2.png)
接下来分别来创建。
Java版本:
1、创建工程:
对于Android开发者来说比较平滑的进行过渡是使用Java语言,所以这里改变一下默认行为,先创建Java版本的工程,具体过程可以参考官方文档https://developer.harmonyos.com/cn/docs/documentation/doc-guides/hello_world-0000001054516888,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/b4532aa0126dda6d3927b3fb44feafb8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/da3669614e2759f6a4e75b0ef69b2d08.png)
具体每个选项的含义可以参考官网https://developer.harmonyos.com/cn/docs/documentation/doc-guides/create_new_project-0000001053342414,这里对不太熟悉的贴出来说明一下:
Project Type:工程的类型,标识该工程是一个原子化服务(Atomic Service)或传统方式的需要安装的应用。
说明
如果是创建的原子化服务,则:
原子化服务是免安装的,config.json中自动添加installationFree字段,取值为“true”。
如果entry模块的installationFree字段为true,则其相关的所有hap模块的installationFree字段都默认为true;如果entry模块的installationFree字段为false,则其相关的所有hap模块可以配置为true或false。
编译构建App时,每个hap包大小不能超过10MB。
Show in Service Center:是否在服务中心露出。如果Project Type为Service,则会同步创建一个2*2的服务卡片模板,同时还会创建入口卡片;如果Project Type为Application,则只会创建一个2*2的服务卡片模板。
2、工程目录简览:
接下来大致瞅一下工程结构,具体可以参考https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-fundamentals-0000000000041611:
![](https://i-blog.csdnimg.cn/blog_migrate/039b5d233f6b1fcc15bf800c4f64553a.png)
其中发现貌似跟Android app差不多的身影:
![](https://i-blog.csdnimg.cn/blog_migrate/bc5e5352135f45960c28b2ede2c3e49e.png)
分别打开瞅一下大概的样子:
![](https://i-blog.csdnimg.cn/blog_migrate/693f60bc0d0b598cec1ab816b3938c67.png)
嗯,对应Android中的Application嘛,再来看一下MainAbility:
![](https://i-blog.csdnimg.cn/blog_migrate/5a5cc45a7165f499843a07eaf5707778.png)
这思想简直就跟Android一模一样,貌似只是把Activity换成了Ability对吧,其实吧这只是表像,其工程结构跟Android已经发生了翻天覆地的变化了,要不然人家怎么可能申请专利是一个“全新”的系统呢,不信可以上官网看一下应用结构,其中应用的整体结构盗一下官网的如下:
![](https://i-blog.csdnimg.cn/blog_migrate/04fece818f3af1767d217e16fcfa8db7.png)
其中根据官网的解释:“HarmonyOS的用户应用程序包以APP Pack(Application Package)形式发布,它是由一个或多个HAP(HarmonyOS Ability Package)以及描述每个HAP属性的pack.info组成。HAP是Ability的部署包,HarmonyOS应用代码围绕Ability组件展开。”,简单理解一下:
“HarmonyOS的用户应用程序包以APP Pack(Application Package)形式发布”,从图中也能知道:
![](https://i-blog.csdnimg.cn/blog_migrate/b325e8d95c9ddcdfba8f7e0d54d14b56.png)
"它是由一个或多个HAP(HarmonyOS Ability Package)以及描述每个HAP属性的pack.info组成",看图理解:
![](https://i-blog.csdnimg.cn/blog_migrate/f795125c0074450442f5ec3e7edfaaf8.png)
而“它是由一个或多个HAP(HarmonyOS Ability Package)”怎么理解呢?这里需要再看一下HAP的组成才能理解它,如官网所说,“一个HAP是由代码、资源、第三方库及应用配置文件组成的模块包,可分为entry和feature两种模块类型”,哦,这回大概理解了,所以看图说话:
![](https://i-blog.csdnimg.cn/blog_migrate/6df7e042143f7ce57d30a7e4ed129c85.png)
而关于这俩的区别,再贴一下官网的解释:
- entry:应用的主模块。一个APP中,对于同一设备类型必须有且只有一个entry类型的HAP,可独立安装运行。
- 应用的动态特性模块。一个APP可以包含一个或多个feature类型的HAP,也可以不含。只有包含Ability的HAP才能够独立运行。
这里其实可以理解成Android中的app和module,app只能有一个,而module可以有多个。
最后再来理解一下工程中的几个元素,也是来自官网的解释:
Ability
Ability是应用所具备的能力的抽象,一个应用可以包含一个或多个Ability。Ability分为两种类型:FA(Feature Ability)和PA(Particle Ability)。FA/PA是应用的基本组成单元,能够实现特定的业务功能。FA有UI界面,而PA无UI界面。
![](https://i-blog.csdnimg.cn/blog_migrate/5dfb59af59cbb31b15108e0a7092445d.png)
库文件
库文件是应用依赖的第三方代码(例如so、jar、bin、har等二进制文件),存放在libs目录。
配置文件
配置文件 (config.json) 是应用的Ability信息,用于声明应用的Ability,以及应用所需权限等信息,详见应用配置文件。
![](https://i-blog.csdnimg.cn/blog_migrate/e7ae0580aa9790a4bc92b29f2fd4e446.png)
这里有木有发现,一些配置都是用的json格式的,而非xml,像Android的Manifest.xml也木有了。
以上先大概的对整个工程结构有一个认识,目前虽说有点陌生,但随着不断的学习,自然而然就会变得亲切了。
3、使用模拟器运行应用:
接下来则来进行一个项目的运行,看看模拟器长啥样:
![](https://i-blog.csdnimg.cn/blog_migrate/bb3711e959839a862a7a139c53798948.png)
点击之后,则弹出这样的弹窗:
![](https://i-blog.csdnimg.cn/blog_migrate/9d9e4605df824c4964db329aab123ad2.png)
其中要求需要登录,那是因为需要实名进行认证,点击“Login”:
![](https://i-blog.csdnimg.cn/blog_migrate/44557e34a4d700c2d4bd0a3dae353d65.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c27bb4788e7153229cfe47dd5bda2677.png)
发现模拟器还是提示需要Login,啥情况呢?其实这点需要特别注意了,华为模拟器使用是需要“实名认证”的,具体这块的认证可以参考官方说明https://developer.huawei.com/consumer/cn/doc/start/itrna-0000001076878172,由于我的账号木有实名,所以目前模拟器即使授权登录了也还是看不到模拟器,所以接下来进行一下实名认证:
![](https://i-blog.csdnimg.cn/blog_migrate/3f3f579e56fbbbd8658a18cc54997658.png)
![](https://i-blog.csdnimg.cn/blog_migrate/538d99e16a67fefd2208922c4831d4fd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cfffc24e2c27db39a14e0141d303a92c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e22e33bd2d753e98a0b18cef992ebba1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b7a4f65494e2f2d18cc8a6f30e580aa2.png)
这一块就不占用过多篇幅来介绍了,按着向导一步步操作就成了,成功认证之后:
![](https://i-blog.csdnimg.cn/blog_migrate/0eefb4ff72108294777b2df46bcb08d3.png)
注意:此时需要等一段时间,貌似是几分钟,由于我是中途有事出去了,反正回来时再看此时模拟器就出来了,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/7cea931b4b9d8dd2ca28c8b5d64c770e.png)
其中关于模拟器多了解一点,如官网所示https://developer.harmonyos.com/cn/docs/documentation/doc-guides/run_simulator-0000001053303709,模拟器其实是分为两大类:
![](https://i-blog.csdnimg.cn/blog_migrate/6a86abe3b7e9f61edbde882c3c10cb94.png)
既然是“远程”的模拟器,很显然是不需要下载到本地的,咱们来开启一下试一下效果就知道了,目前只看phone,如今也只有P40可进行模拟,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ffc487e92a98c4fa16fce91fae73f59c.png)
点击开启,注意体验一下“远程”的感觉:
![](https://i-blog.csdnimg.cn/blog_migrate/571d6dc4dcaa8aa8e67b89f792b44dbf.gif)
看到木有,在启动时有一个“Connecting”,很显然是需要连网进行远程启动的,如不信,把网断了再来启动一次,则会报网络异常:
![](https://i-blog.csdnimg.cn/blog_migrate/4e8e82a2afae996247cba904bedc92e9.png)
此时对于“远程模拟器”的概念就比较清楚了吧,这跟Android的模拟器还是有很大的不同,我觉得挺好的,不占空间,本身我mac本的空间也不大,另外启动速度也还不错,这一点体验来说在我印象中加分【不过由于不是下载到本地感觉运行起来有一点卡卡的,不过影响不大】!!!接下来到无比鸡冻的时刻了,运行,走一把!!!
![](https://i-blog.csdnimg.cn/blog_migrate/dfc4301d489f3bc03526b4b157f15e8b.png)
牛逼!!!
4、修改布局:
接下来咱们试着简单改一下布局,看一下效果:
![](https://i-blog.csdnimg.cn/blog_migrate/14e075847691e402e0aec0edcfa9d569.png)
预想中看是否有前端那种实时预览的功能,发现木有找到。。【不过android studio这块也不怎么支持,期待未来这块体验能进行超越~~】所以此时需要重新再运行一次才行:
![](https://i-blog.csdnimg.cn/blog_migrate/8949670f7ce8da9b1d7dd2fc924a5221.png)
JS版本:
如创建项目向导中看到,默认其实选的不是java版本的,而是js【这块是android程序员比较薄弱的,前端知识肯定是需要补的】,所以这里再以js创建向导再来看一下整个的DEMO过程。
1、创建工程:
![](https://i-blog.csdnimg.cn/blog_migrate/8d11494cd34f3fd3bb2c201aadafdacf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7083d74b619c87ead93fd69d51539a25.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bf68e8e067e1c11432304380f061af1d.png)
2、工程目录简览:
下面简单的瞅一下整个js工程的目录结构:
![](https://i-blog.csdnimg.cn/blog_migrate/8ab2013f7a6db95508028b0eac1cd62b.png)
展开js:
![](https://i-blog.csdnimg.cn/blog_migrate/40cc19eeff518642e2ddcc8e451e53c3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1591c55defd91be7b0a402fad1e48447.png)
接下来再来看一下config.json,它是应用的配置文件,打开里面有一些关键元素简单了解一下:
![](https://i-blog.csdnimg.cn/blog_migrate/bcaae7217ab42c1a1d645e9d9be4ab03.png)
另外它也是用来标识应用的唯一性的,类似于android的applicationId。
![](https://i-blog.csdnimg.cn/blog_migrate/764d9a043b40cb6679832dbddd89808e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9fc28dabf57e776a00e79d117f8c9d65.png)
![](https://i-blog.csdnimg.cn/blog_migrate/245816a39612e0103698662930f36023.png)
![](https://i-blog.csdnimg.cn/blog_migrate/208ae12120b17ccf1a3f8fbca084bff0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ad3e09e295651c77bd5a66cba4a73c4b.png)
3、使用模拟器运行应用:
接下来运行看一下:
![](https://i-blog.csdnimg.cn/blog_migrate/b2bc0d8aeca11de0b8aa559794e05ba3.png)
4、修改布局:
接下来咱们给页面中增加一个button,关于细节不用管,先来尝试修改一下让其修改生效:
![](https://i-blog.csdnimg.cn/blog_migrate/1b785045a0cf1b383aad4cc402ab113b.png)
发现在编写html元素时,智能提示太弱了,这块体验有待加强!!!接下来在css中定义一下button的样式:
![](https://i-blog.csdnimg.cn/blog_migrate/b881809634b9967da6cbaadfc460bfb7.png)
然后这里要想开启实时预览,可以切换一下视图,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/424d3d6ab708b565bbbee215e18ce5c5.png)
另外实时预览相比Android Studio体验还是差了一些,主要是不够实时,不过这块未来肯定会加强,期待!!!另外给按钮增加一个点击事件:
![](https://i-blog.csdnimg.cn/blog_migrate/7171a4550eebf2aba3f0c6c1f36ac3d6.png)
然后这里点击则改变一下文本的颜色,先来定义相关颜色:
![](https://i-blog.csdnimg.cn/blog_migrate/60bd37fd10c2226ceffd889775bb0d65.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0330b1e68350ab86fbc71d9ebca05814.png)
此时再来定义事件响应:
![](https://i-blog.csdnimg.cn/blog_migrate/83fe480043c737249c3a2ec8ec47fd0c.png)
运行看一下效果:
![](https://i-blog.csdnimg.cn/blog_migrate/3609107abbdbd5445b7b8964ba20faf9.gif)
总结:
至此,对于鸿蒙应用的开发有了一个初步的认识,环境配置也已经搭建好了,总的来说体验还可以,当然肯定会有些小瑕疵,这也是任何新系统从0到成熟的必经之路,之后则会从基础慢慢的来研究它,不管未来鸿蒙如何发展,做为国人对于国人目前唯一一个移动端的系统哪有不拥抱的道理,跟着鸿蒙一起加油!!!