HarmonyOS4+NEXT—第一章 初识HarmonyOS4

sowhat88
835 阅读7分钟

鸿蒙开发系列合集

1、HarmonyOS4+NEXT—第一章 初识HarmonyOS4
2、HarmonyOS4+NEXT—第二章 安装真机模拟器
3、HarmonyOS4+NEXT—第三章 ArkUI基础与容器组件

1.1 开发环境

        HarmonyOS官网地址：developer.huawei.com/consumer/cn…

        工具下载流程：官网 —> 开发 —> DevEco Studio

image.png

image.png

        点击进去需要先登录华为帐号，然后显示下载界面，可根据自己的系统下载对应的版本。

image.png

1.2 使用编辑器

    1、选择模板

        在创建项目的时候，需要先选择模板，刚开始可以选择一个空的模板，也就是Empty Ability。

image.png

    2、项目配置

image.png

        (1)Project name：是开发者可以自行设置的项目名称，这里根据自己选择修改为自己项目名称。

        (2)Bundle name：包名称，默认情况下应用ID也会使用该名称，应用发布时对应的ID需要保持一致。

        (3)Save location：工程保存路径，建议用户自行设置相应位置。

        (4)Compile SDK：编译的API版本。

        (5)Module name：模块名称

        (6)Device type：该工程模板支持的设备类型。

    3、编辑器界面

        完成项目创建后，会在左侧展示整个项目结构，右侧是代码编辑区域。

image.png

            这里它还给我们提供了一个预览区，在编辑器最右侧的导航中，点击"Previewer"，它会在右侧区域展示可视化的预览窗口。

image.png

    4、配置编辑器中文版

        这个编辑器默认是英文版，如果觉得中文版比较熟悉，可以通过配置进行设置。

        首先在导航选择"File"下的"settings"：

image.png

        在"settings"的目录里选择"Plugins"插件，然后在顶部选择"Installed"，这里它基本上已经帮我们安装好中文插件了，只需要搜索"chinese"就会显示出来，然后勾选它点OK。

image.png

        最后重启编辑器即可生效。

image.png

    5、热编译功能

        热编译功能的意思是修改了源代码可以自动刷新应用，马上看到效果。这个功能是默认自带的，如果不想要热编译功能也非常容易，在预览区的头部有一个"LivePreview"按钮，它是用来控制是否热编译。

image.png

        现在是只要保存代码就会刷新预览界面，如果取消该功能，则需要手动点击"LivePreview"按钮旁边的"Reload"按钮才能刷新界面。

image.png

    6、控制台

        一般前端开发者是离不开浏览器控制台的，它能够给我们输出一些有用的信息。在这个编辑器里也同样有控制台，它只是改了名叫做"日志"，在编辑器下方可以点击"日志"按钮即可看到它输出的信息，例如console.log('Hello World')

image.png

    7、审查页面元素

        在前端开发中，如果想查看页面元素，莫过于在浏览器打开控制台来得直观，它可以看到整个页面的布局脉络以及每个元素的属性和样式等等。

image.png

        而在DevEco Studio编辑器同样具备这个功能，它在预览区的导航里有一个"Inspector"按钮，点击它就可以看到类似于浏览器控制台的审查元素界面了。

image.png

image.png

        编辑器的审查元素功能，比浏览器的控制台更加强大。首先你选中了某一个元素之后，它会在代码区域把对应元素的代码圈起来；其次在右下方会显示这个元素的属性值，一旦修改了它，不仅预览界面会实时改变，还会实时生成对应的代码。

        举个例子，假如在审查元素下方修改了它的opacity透明度的值，然后预览区发生了变化，最友好的是它给我们生成好了代码，要是我们对UI组件的代码或者属性不熟悉，用这种方式开发也是非常高效的。

image.png

    8、查阅API文档

        鸿蒙的界面用的是ArkUI组件库，我们查阅每个组件的用法和属性是必不可少的。这里编辑器提供了一个非常友好的工具：把鼠标悬停在组件元素上，它会弹出一个框，里面有一个"查阅API参考"的链接，点开它就会智能的定位到这个组件的api文档，它跟官网的api是一致的。

image.png

1.3 代码结构

image.png

    1、struct

        所有代码都被封装到struct结构体当中，这个结构体在ArkTs中称之为自定义组件，可复用的UI单元。这个组件的内部可以定义一些元素、样式和功能逻辑，它跟前端的Vue中的组件是类似的，可以给其它模块引用。

    2、装饰器

        (1)@Component

            标记自定义组件。这个装饰器配合struct共同使用，必不可少。

        (2)@Entry

            标记当前组件是入口组件。因为组件有两种，一种是页面组件，可以给页面直接访问的；另一种是普通组件，只能提供给其它内部调用，但页面不能直接访问它。

        (3)@State

            标记该变量是状态变量，值变化时会触发UI刷新。这个比较容易理解，其实就相当于Vue3的ref或者reactive响应式变量，也相当于React中声明了useState的变量。这种变量一旦发生改变，页面视图也随之更新，类似于双向绑定。

    3、build

        build函数跟React的render函数非常类似，它的作用是渲染页面元素。

    4、内置组件（ArkUI）：

        (1)容器组件：用来完成页面布局的组件，例如Row行组件、Column列组件

        (2)基础组件：自带样式和功能的页面元素，例如Text文本组件。

    5、属性方法

        (1)属性

            ArkUI组件的属性是可以修改的，不过它跟常用的UI组件有所不同，常用UI组件修改属性是通过传参的方式去控制，而ArkUI是通过调用方法来控制。

Row() {
  Column() {
    Text('Hello World').fontSize(50).fontWeight(FontWeight.Bold)
  }
  .width('100%')
}
.height('100%')

            在这段代码里，Text组件设置字体大小为50和加粗，所在的Column列组件设置宽度为100%，外层的Row组件设置高度为100%。

        (2)方法

            ArkUI组件的方法跟常用的UI组件也不一样，常用UI组件绑定方法常见的是用@来绑定，例如@click="handleClick";而ArkUI组件的方法也是通过调用方法的形式，例如Text().onClick(() => {})

1.4 了解ArkTS

    1、传统网页开发

        前端开发一个网页，最起码要掌握html、css、js这3种语言，html控制页面元素，css控制布局样式，js控制页面逻辑和数据状态。

image.png

    2、ArkTS的使用

        用ArkTS来开发网页，就不需要html、css和js了。首先ArkTS语言是基于TypeScript，而TypeScript又是基于JavaScript，因此ArkTS具备了js的能力。

        对于HTML和CSS，ArkTS一样能控制，它在TS上又扩展了声明式UI和状态管理。

image.png

        在这里ArkTS就简单使用一个Button()组件，它就已经自带样式，然后通过调用方法可以改变背景色和绑定事件，已经把html、css、js完美的整合在一起。

    3、ArkTS的优势

image.png

        (1)开发效率高、体验好

            使用了ArkTS之后，代码量明显比传统开发要少了很多，而且能够快速上手，学习成本较低。

        (2)性能优越

            ArkTS尽管是用声明式UI做前端，而在它的底层有一个方舟编辑器，这个编辑器会把我们写的TS语言编译成字节码，最终转换成机器码去运行。而且它还会把这个字节码转机器码的动作，从运行期提前到编译期，大大的提高运行效率，这个就是它的AOT技术。

            除此之外，它还有UI后端引擎，提供了一种统一的页面渲染的指令。在渲染的时候只需要调用这些指令即可。这些指令就会统一提交到渲染总线，最后传递给操作系统底层的高效渲染引擎，这个引擎会对这种页面渲染的UI、指令进行再次的优化，从而提高页面渲染的效率。

        (3)多系统适配/接入能力

            鸿蒙系统底层为ArkTS提供了不同系统的跨平台的适配层和桥接层，因此用ArkTS开发的应用还具备这种多系统适配和接入的能力。

avatar
文章
阅读
粉丝