第1篇：认识ArkTS——搭建鸿蒙开发环境

第1篇认识ArkTS——搭建鸿蒙开发环境本课目标成功搭建开发环境运行第一个鸿蒙应用**作者**中文编程倡导者—— 李金雨预计课时2课时90分钟难度等级⭐入门一、开篇引入1.1 欢迎来到编程世界你好很高兴你能打开这本教程。在接下来的学习中你将学会如何制作属于自己的手机应用——不是玩游戏而是创造游戏不是刷视频而是制作视频应用想象一下这些场景 你做了一个班级通讯录应用同学们都能在手机上查看 你开发了一个猜数字小游戏和朋友们一起玩 你制作了一个单词本应用帮助背单词这些你都能通过ArkTS实现1.2 本课我们要做什么今天这节课我们要完成三件大事了解什么是鸿蒙系统和ArkTS语言安装开发工具就像画家需要画笔我们需要编程工具运行你的第一个应用——在屏幕上显示你好鸿蒙1.3 预期成果完成本课后你的电脑屏幕上会显示这样的画面┌─────────────────────────┐ │ │ │ │ │ 你好鸿蒙 │ │ │ │ 你的名字 │ │ │ │ │ └─────────────────────────┘很期待吧让我们开始吧二、概念讲解2.1 什么是鸿蒙系统生活例子不同品牌的手机你家里有不同品牌的电器吗比如华为手机小米电视苹果平板每个品牌都有自己的操作系统就像每个国家有自己的语言一样。鸿蒙系统HarmonyOS是我们中国华为公司开发的操作系统就像安卓Android和苹果iOS一样是手机、平板等设备的大脑。鸿蒙的特别之处鸿蒙有个很厉害的特点——一套系统多种设备都能用设备鸿蒙能做什么 手机运行各种应用⌚ 手表显示时间、计步、测心率 电视播放视频、玩游戏 汽车导航、听音乐 家电智能控制这意味着你学会一次就能给各种设备做应用2.2 什么是ArkTS生活例子和外国人交流假设你想和一个外国朋友说话但你们语言不通怎么办你可以学他的语言英语、日语等或者找一个翻译ArkTS就像是程序员和鸿蒙系统之间的翻译官。我们用ArkTS写指令ArkTS帮我们把指令翻译成鸿蒙系统能听懂的话然后鸿蒙系统就能按照我们的想法运行了。ArkTS从哪来ArkTS是从一种叫TypeScript的语言发展来的而TypeScript又是从JavaScript发展来的。你可以这样理解JavaScript爷爷 ↓ TypeScript爸爸 ↓ ArkTS儿子专门为鸿蒙设计的为什么要学ArkTS原因1简单易学ArkTS用的是声明式编程意思就是你告诉它要什么结果它就帮你实现就像你去餐厅点菜你说我要一份炒饭厨师就会做好给你你不用管怎么炒原因2效果立即可见你写一行代码马上就能看到界面变化就像画画画一笔马上能看到效果原因3一份代码多处使用写一次应用手机、平板、电视都能运行省时省力原因4国产技术学习国产技术支持我们自己的科技生态未来找工作也更有优势2.3 ArkTS长什么样让我们看看ArkTS代码的样子EntryComponentstruct 我的页面{build(){Column(){Text(你好鸿蒙).fontSize(30).fontColor(#FF0000)Button(点我).onClick((){console.log(按钮被点击了)})}.width(100%).height(100%)}}看不懂没关系我们解释一下代码意思Entry标记这是应用的入口从这里开始运行Component标记这是一个组件界面的一部分struct 我的页面定义一个叫我的页面的组件build()组装界面的方法Column()垂直排列的容器像一列火车车厢Text()显示文字的组件Button()按钮组件.fontSize(30)设置字体大小为30.onClick()当按钮被点击时做什么注意在这个教程里我们会用中文来命名比如我的页面、用户名、计算按钮等。这样更容易理解三、动手实践3.1 安装开发工具 DevEco Studio什么是DevEco Studio就像写作文需要纸和笔做应用也需要工具。DevEco Studio就是华为给我们提供的编程工作台。它集成了所有你需要的东西✏️ 代码编辑器写代码的地方 代码检查帮你发现错误 模拟器在电脑上模拟手机运行 调试工具找错误、修错误安装步骤第一步下载安装包打开浏览器访问华为开发者官网https://developer.harmonyos.com/点击开发 → “开发工具”找到 DevEco Studio点击下载选择适合你电脑系统的版本Windows选Windows版Mac选Mac版第二步安装软件Windows电脑双击下载的安装包.exe文件点击下一步选择安装位置建议用默认位置勾选创建桌面快捷方式点击安装等待安装完成点击完成Mac电脑双击下载的.dmg文件把DevEco Studio拖到应用程序文件夹从应用程序中打开它第三步首次启动设置打开DevEco Studio选择Do not import settings不导入设置选择主题推荐选Light浅色主题对眼睛好安装必要的SDK软件工具包点击Next勾选HarmonyOS SDK点击Next等待下载安装这可能需要一些时间耐心等待小贴士安装过程中如果提示需要重启电脑就重启一下。3.2 创建第一个项目现在让我们创建你的第一个ArkTS项目第一步新建项目打开DevEco Studio点击 “Create Project”创建项目在弹出的窗口中选择 “Empty Ability”空应用点击 “Next”第二步配置项目你会看到一个配置页面填写以下信息项目填写内容说明Project name我的第一个应用项目的名字Bundle namecom.example.myfirstapp应用的唯一标识类似身份证号Save location选择一个文件夹项目保存在哪里Compile SDK选择最新的版本用最新的功能ModelStage开发模式Enable Super Visual不勾选不用低代码模式LanguageArkTS编程语言填好后点击 “Finish”。第三步等待项目创建DevEco Studio会自动创建项目文件这个过程可能需要几分钟。你会看到底部有个进度条在走。创建完成后你会看到类似这样的项目结构我的第一个应用/ ├── entry/ ← 主要代码在这里 │ └── src/ │ └── main/ │ └── ets/ │ └── pages/ │ └── Index.ets ← 主页面代码 ├── resources/ ← 图片、文字等资源 └── ...3.3 认识项目结构让我们了解一下项目里的重要文件1. Index.ets —— 主页面代码这是最重要的文件你的应用界面就是在这里写的。打开entry/src/main/ets/pages/Index.ets你会看到默认生成的代码// 完整可运行代码复制到 Index.ets 即可运行EntryComponentstruct Index{Statemessage:stringHello Worldbuild(){Row(){Column(){Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width(100%)}.height(100%)}}2. 资源文件夹在entry/src/main/resources里存放着图片放在rawfile或media文件夹文字放在element/string.json颜色定义放在element/color.json3.4 运行你的第一个应用现在让我们运行这个应用看看效果方法一使用预览器推荐初学者在DevEco Studio右上角找到并点击 “Previewer”预览器标签等待几秒钟你会看到右侧出现一个手机画面显示 “Hello World”方法二使用模拟器点击顶部工具栏的 “Tools” → “Device Manager”设备管理器点击 “Create Emulator”创建模拟器选择一个手机型号点击 “Next”下载系统镜像第一次需要点击 “Finish”在设备列表中点击启动按钮▶️等待模拟器启动像真手机开机一样回到代码界面点击顶部工具栏的绿色运行按钮▶️选择你的模拟器点击 “OK”等待应用安装并启动方法三使用真机如果你有鸿蒙手机用数据线把手机连接到电脑手机会提示允许USB调试吗“点击确定”在DevEco Studio中点击运行按钮选择你的手机设备应用会安装到你的手机上3.5 修改你的应用现在让我们修改代码让它显示你好鸿蒙和你的名字。练习1修改文字内容打开Index.ets文件找到这行代码Statemessage:stringHello World改成State欢迎语:string你好鸿蒙找到Text(this.message)改成Text(this.欢迎语)保存文件按 CtrlS 或 CmdS看预览器文字变了完整代码// 完整可运行代码复制到 Index.ets 即可运行EntryComponentstruct Index{State欢迎语:string你好鸿蒙build(){Row(){Column(){Text(this.欢迎语).fontSize(50).fontWeight(FontWeight.Bold)}.width(100%)}.height(100%)}}练习2修改文字颜色和大小在Text(this.欢迎语)下面添加Text(this.欢迎语).fontSize(50)// 字体大小.fontWeight(FontWeight.Bold)// 字体粗细.fontColor(#FF0000)// 字体颜色红色颜色代码说明#FF0000 红色#00FF00 绿色#0000FF 蓝色#000000 黑色#FFFFFF 白色#FFA500 橙色#800080 紫色练习3添加背景颜色在Column()下面添加Column(){// ... Text组件}.width(100%).backgroundColor(#FFF8DC)// 浅黄色背景练习4添加你的名字在欢迎语下面再添加一个TextColumn(){Text(this.欢迎语).fontSize(50).fontWeight(FontWeight.Bold).fontColor(#FF0000)Text(我是张三)// 改成你的名字.fontSize(30).fontColor(#0000FF).margin({top:20})// 上边距20}3.6 完整代码示例这是你第一个应用的完整代码// 完整可运行代码复制到 Index.ets 即可运行EntryComponentstruct Index{State欢迎语:string你好鸿蒙build(){Row(){Column({space:20}){// space: 子组件之间的间距Text(this.欢迎语).fontSize(50).fontWeight(FontWeight.Bold).fontColor(#FF0000)Text(我是编程小达人).fontSize(30).fontColor(#0000FF)Text(这是我第一个鸿蒙应用).fontSize(20).fontColor(#666666)}.width(100%).height(100%).backgroundColor(#FFF8DC).justifyContent(FlexAlign.Center)// 内容垂直居中}.height(100%)}}运行效果┌─────────────────────────┐ │ │ │ │ │ 你好鸿蒙 │ ← 红色大字 │ │ │ 我是编程小达人 │ ← 蓝色中字 │ │ │ 这是我第一个鸿蒙应用 │ ← 灰色小字 │ │ │ │ └─────────────────────────┘ 浅黄色背景四、知识总结4.1 今天我们学了什么鸿蒙系统华为开发的操作系统可以用在手机、电视、手表等各种设备上ArkTS一种编程语言是我们和鸿蒙系统对话的方式DevEco Studio开发工具用来写代码、运行应用项目结构Index.ets主页面代码resources存放图片、文字等资源基础代码结构EntryComponentstruct 页面名字{build(){Column(){Text(文字内容)}}}4.2 关键代码速查表功能代码显示文字Text(内容)设置字体大小.fontSize(30)设置字体颜色.fontColor(#FF0000)设置背景颜色.backgroundColor(#FFF8DC)设置宽度.width(100%)设置高度.height(100%)垂直排列Column()水平排列Row()内容居中.justifyContent(FlexAlign.Center)4.3 常见错误提醒错误现象可能原因解决方法代码报错红色拼写错误检查单词拼写特别是中文标点预览器空白代码有语法错误看底部Problems面板根据提示修改文字不显示忘记写this.状态变量要用this.变量名颜色没变化颜色代码格式不对确保是#开头6位十六进制数应用运行不了模拟器没启动先启动模拟器再运行应用五、课后作业5.1 巩固练习必做练习1个性化你的欢迎页面修改你的应用让它显示标题“我的鸿蒙之旅”你的名字和年龄你最喜欢的颜色作为背景三行文字使用三种不同的颜色练习2尝试不同的布局把Column改成Row看看效果有什么不同练习3调整间距使用.margin()和.padding()调整文字之间的距离。示例Text(你好).margin({top:10,bottom:10})// 上下外边距10.padding(20)// 四边内边距205.2 创意编程选做创意1制作个人名片做一个展示你自己的页面包含你的名字大字你的班级你的爱好一句你喜欢的话创意2节日贺卡做一个电子贺卡比如春节贺卡红色背景写上新年快乐生日贺卡彩色背景写上生日快乐教师节贺卡写上对老师的祝福5.3 探索发现打开resources/base/element/string.json看看里面有什么试着修改里面的文字然后在代码中引用它用$r(app.string.xxx)在网上搜索ArkTS 组件看看还有哪些组件可以用5.4 下篇预习下一篇我们将学习数据与类型了解如何在程序中存储信息。预习问题想一想程序怎么记住你的名字程序怎么知道你是15岁而不是十五岁程序怎么判断今天是晴天是真是假附录学习资源官方资源鸿蒙开发者官网https://developer.harmonyos.com/ArkTS开发文档https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-get-started-0000001438067044-V3颜色代码参考颜色代码颜色代码红色#FF0000橙色#FFA500黄色#FFFF00绿色#00FF00青色#00FFFF蓝色#0000FF紫色#800080粉色#FFC0CB黑色#000000白色#FFFFFF灰色#808080棕色#A52A2A小技巧在网上搜索颜色选择器可以找到更多颜色代码恭喜你完成了第1篇的学习你已经迈出了编程之旅的第一步。记住编程就像学骑自行车一开始可能会摔跤但只要坚持练习你一定能骑得又快又稳下节课见