【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(三)

课程地址: 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发

(本篇笔记对应课程第 4 - 6节)

P5《04.快速入门》

本节来实现一个 HelloWorld 效果:

在这里插入图片描述

1、打开编辑器,选择新建项目,选择空白模板即可:

在这里插入图片描述

2、填写项目相关信息:

Project name :项目名称
Bundle name :一般是域名倒序 + 项目名,比如域名是 heima.com,则Bundle name就是 com.heima.myapplication。 特别需要注意的是,Bundle name 一定要保证唯一性,因为它是你的应用打包上架后的唯一标识。
Save location :项目保存地址,可以自行选择。

在这里插入图片描述

看一下编辑器界面,最上方一行是编辑器菜单栏,左侧是项目目录,右侧区域为文件代码展示与编辑,最下方是编译打包信息,基本功能布局与vscode相似。
看一下左侧的项目目录结构:

在这里插入图片描述

我们主要关注带蓝色小方块的 entry 目录,其中有src目录:

在这里插入图片描述

项目中的配置文件可以参考官网-指南-应用配置文件:

在这里插入图片描述

entry/src/main/resources目录下的具体结构如下:resources 下包括 base、en_US、zh_CN、rawfile:

在这里插入图片描述

entry/src/main/ets目录下的pages下存放的是对应页面的代码:

在这里插入图片描述

观察 entry/src/main/ets/pages/index.ets 文件代码:

在这里插入图片描述

手机页面的预览器,这样就不需要发布程序到手机端看了,直接在这里预览:

在这里插入图片描述

在这里插入图片描述

尝试改变Text的字体颜色:

在这里插入图片描述

给Text组件添加click事件:

在这里插入图片描述

实践:

本节相对比较简单,照着老师的步骤新建一个项目并打开入口文件,简单修改Text的字体颜色与添加click事件,很简单就可以实现啦~没有遇到其它可记录的问题。

在这里插入图片描述

@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).fontColor('red').onClick(()=>{this.message = 'Hello ArkTS'})}.width('100%')}.height('100%')}
}

P6《05.ArkUI组件-Image组件》

在这里插入图片描述

接下来我们要一步步实现以下UI图:

在这里插入图片描述

1、Image 图片显示组件

有三种设置图片来源的方式:
(1)来源于网络,需要申请网络访问权限(可查看文档如何配置申请此权限,下文有具体方法)
(2)PixelMap格式,如果仅用来显示图片,没必要用这种方式
(3)Resource格式,加载本地图片,有两种设置目录的方式:
a.Image( r ( ′ a p p . m e d i a . m a t e 6 0 ′ ) ,此种方式读取的是项目文件夹中 r e s o u r c e s / b a s e / m e d i a 路径下的资源,其中 a p p . m e d i a . m a t e 60 , a p p 是固定写法, m e d i a 是文件夹名字, m a t e 60 是资源文件名字,省略后缀; b . I m a g e ( r('app.media.mate60'),此种方式读取的是项目文件夹中 resources/base/media 路径下的资源,其中 app.media.mate60 , app 是固定写法,media 是文件夹名字,mate60是资源文件名字,省略后缀; b.Image( r(app.media.mate60),此种方式读取的是项目文件夹中resources/base/media路径下的资源,其中app.media.mate60,app是固定写法,media是文件夹名字,mate60是资源文件名字,省略后缀;b.Image(rawfile(‘meta60.png’)), 此种方式读取的是项目文件夹中 resources/rawfile 路径下的资源,直接写该路径下的资源文件名称,需要写后缀。

在这里插入图片描述

添加图片属性:其中 width height borderRadius 属于组件通用属性,其它组件也可以设置这些属性。interpolation 图片插值是用来处理改善图片像素锯齿的。

在这里插入图片描述

width() 可以指定数字格式,比如 250,也可以指定字符串格式,比如 ‘100%’。指定数字格式时,此时会有一个默认的单位 vp,它是虚拟像素的意思,不是真正的屏幕像素,它会自动根据设备的像素密度进行换算,它可以确保同一个元素在不同设备上的视觉大小是统一的,所以我们一般用这种数值模式。

在这里插入图片描述

老师这里用到的这个图片资源地址现在好像已经打不开啦,我使用鸿蒙官网上找来了一张图,地址如下:测试网络图片, https://www.harmonyos.com/resource/image/img_DLP_kaifataojian-1105.png

在这里插入图片描述

小疑问:前面不是说了网络图片地址需要申请权限才能请求并显示吗?现在这个网址怎么直接就可以显示图片了呢?因为现在是在预览器中显示的,如果是真的在设备端运行代码,就会需要申请权限才可以显示图片。
怎样才能在真实设备上运行代码?两种方案:
1、用真实手机去调试
2、安装模拟器

以下是安装模拟器的文档(扫码后打开的页面链接如下):

鸿蒙入门

在这里插入图片描述

模拟器安装好后,在红框处选择模拟器,并点击右侧的运行按钮,就会将代码部署到模拟器上并运行看到效果,此时可以看到图片并没有展示出来,就是因为我们没有给它配权限!

在这里插入图片描述

官网指南:

在这里插入图片描述

权限类型分为系统授权和用户授权两种,只有用户授权类型需要填写除name之外的其它参数,而查阅 internet 权限,它属于系统授权类型:

在这里插入图片描述

在这里插入图片描述

配置 internet 权限:

在这里插入图片描述

"requestPermissions": [{"name": "ohos.permission.INTERNET"}],

配置好后,重新运行,图片就可以展示出来了,说明我们的权限配置成功了!将来在app中所有需要网络权限的资源都需要配置这个权限,所以记住:module.json5文件中就是用来配置权限的。

在这里插入图片描述

使用本地图片资源:
第一种方式:使用media目录下的图片资源:

在这里插入图片描述

图片成功展示!但我们发现图片边缘好像有锯齿,之前哪个属性可以改善锯齿来着……忘了没关系,鼠标悬浮到 Image 组件上, 点击浮现出来的提示框中的 显示关联API :

在这里插入图片描述

点击后会弹出和官方文档一样的文档提示,随时查阅,酷!

在这里插入图片描述

从文档中查找到这个 图片差值 属性并配置,会发现图片边缘像素锯齿明显改善了!

在这里插入图片描述

第二种方式:使用 rawfile 目录下的图片资源:

在这里插入图片描述

总结
一、Image 图片显示组件,有三种设置图片来源的方式:
(1)来源于网络,需要申请网络访问权限(可查看文档如何配置申请此权限,下文有具体方法)
(2)PixelMap格式,如果仅用来显示图片,没必要用这种方式
(3)Resource格式,加载本地图片,有两种设置目录的方式:
a.Image( r ( ′ a p p . m e d i a . m a t e 6 0 ′ ) ,此种方式读取的是项目文件夹中 r e s o u r c e s / b a s e / m e d i a 路径下的资源,其中 a p p . m e d i a . m a t e 60 , a p p 是固定写法, m e d i a 是文件夹名字, m a t e 60 是资源文件名字,省略后缀; b . I m a g e ( r( 'app.media.mate60' ),此种方式读取的是项目文件夹中 resources/base/media 路径下的资源,其中 app.media.mate60 , app 是固定写法,media 是文件夹名字,mate60是资源文件名字,省略后缀; b.Image( r(app.media.mate60),此种方式读取的是项目文件夹中resources/base/media路径下的资源,其中app.media.mate60,app是固定写法,media是文件夹名字,mate60是资源文件名字,省略后缀;b.Image(rawfile(‘meta60.png’)), 此种方式读取的是项目文件夹中 resources/rawfile 路径下的资源,直接写该路径下的资源文件名称,需要写后缀。
二、entry/src/main/module.json5 文件是用来配置权限的。
三、模拟器可以用来模拟真实设备的运行效果,安装方式详见上文。

实践:

1、按照老师的模拟器安装文档一步步来,安装模拟器成功后,启动模拟器,开始显示的是黑屏有一行字: HomaryOS,一定要等到出现如下界面,才是模拟器成功启动了(我初次启动模拟器出现这个界面等待时间较长,一定要有耐心)。此时再去编辑器选择模拟器并运行,否则会不成功:

在这里插入图片描述

成功啦!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/3513.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot War打包部署

修改打包方式 <packaging>war</packaging>修改 Servlet 容器的 scope <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><scope>provided</scope></d…

精选30个大模型高频面试题

我精选30个大模型高频面试题&#xff0c;分享给大家 介绍一下postlayernorm和prelayernorm的区别什么是思维链&#xff08;CoT&#xff09;提示&#xff1f;你觉得什么样的任务或领域适合用思维链提示&#xff1f;你了解ReAct吗&#xff0c;它有什么优点&#xff1f;解释一下l…

Mybatis入门(入门案例,IDEA配置SQL提示,JDBC介绍,lombok介绍)

目录 一、Mybatis入门案例介绍整体步骤创建SpringBoot项目pom依赖准备测试数据新建实体类配置Mybatis数据库连接信息新建接口类,编写SQL代码单元测试 二、IDEA配置SQL提示三、JDBC是什么案例JDBC和Mybatis对比 四、数据库连接池介绍如何实现一个数据库连接池切换数据库连接池 五…

Sentinel 与 OpenFeign 断路器:Hystrix 已过时,Sentinel 强势崛起

简介 随着微服务架构的流行&#xff0c;服务之间的通信变得日益频繁。为了保证系统的稳定性和可靠性&#xff0c;在服务之间的通信中使用断路器是至关重要的。本文将介绍 OpenFeign 与 Sentinel 结合使用的方法&#xff0c;强调 Hystrix 已经过时&#xff0c;并展示 Sentinel …

Python和C++音调音符规划和算法

&#x1f3af;要点 &#x1f3af;音符表征和代码实现&#xff1a;&#x1f58a;半音位置和索引之间的转换 | &#x1f58a;全音阶音调表征 | &#x1f58a;全音阶缓存 | &#x1f58a;全音阶音高表征。&#x1f3af;音程表征和代码实现&#xff1a;&#x1f58a;音程质量 | &a…

Oracle导出导入dmp等文件类型的多表数据的常用方法、遇见的常见问题和解决办法(exp无效sql???)

使用PLSQL执行导出表数据的时候有两种方法 1、使用Oracle命令【imp--exp】【impdp--expdp】 但是如果你的本机没有安装有Oracle数据库&#xff0c;使用的instant client远程连接服务器上的Oracle数据库时候&#xff0c;你没有Oracle数据库带有的exp.exe、imp.exe等扩展文件&a…

有没有降低三维设计软件版权成本的方案?

企业是否都苦恼三维设计软件购买成本太高了&#xff1f;如投入商业使用&#xff0c;三维设计软件一般涉及正版的版权购买。但是&#xff0c;正版的版权购买费用较贵&#xff0c;且支持一台电脑使用。企业每年购买正版三维设计软件都需要很大一笔支出&#xff0c;随着企业不断发…

Android kotlin 协程异步async与await介绍与使用

一、介绍 在kotlin语言中&#xff0c;协程是一个处理耗时的操作&#xff0c;但是很多人都知道同步和异步&#xff0c;但是不知道该如何正确的使用&#xff0c;如果处理不好&#xff0c;看似异步&#xff0c;其实在runBloacking模块中使用的结果是同步的。 针对如何同步和如何异…

day04 51单片机-矩阵按键

1 矩阵按键 1.1 需求描述 本案例实现以下功能&#xff1a;按下矩阵按键SW5到SW20&#xff0c;数码管会显示对应的按键编号。 1.2 硬件设计 1.2.1 硬件原理图 1.2.2 矩阵按键原理 1.3软件设计 1&#xff09;Int_MatrixKeyboard.h 在项目的Int目录下创建Int_MatrixKeyboard…

Acer宏碁掠夺者战斧300笔记本电脑PH315-52工厂模式原装Win10系统安装包 恢复出厂开箱状态 带恢复重置

宏碁掠夺者PH315-52原厂Windows10工厂包镜像下载&#xff0c;预装oem系统 链接&#xff1a;https://pan.baidu.com/s/1grmJzz6nW1GOaImY_ymXGw?pwdi286 提取码&#xff1a;i286 原厂W10系统自带所有驱动、PredatorSense风扇键盘控制中心、Office办公软件、出厂主题壁纸、系统…

C语言简易类json格式解析

在使用MQTT时&#xff0c;获取的数据基本上都是json格式的&#xff0c;虽然C语言也可以添加第三方的解析库&#xff0c;但有些资源少的单片机用着还是挺吃力的&#xff0c;所以自己简单写了一个从json格式中获取数据的&#xff0c;说白了就是一个字符串查找。就比如下面这一段 …

Scrapy 爬虫教程:从原理到实战

Scrapy 爬虫教程&#xff1a;从原理到实战 一、Scrapy框架简介 Scrapy是一个由Python开发的高效网络爬虫框架&#xff0c;用于从网站上抓取数据并提取结构化信息。它采用异步IO处理请求&#xff0c;能够同时发送多个请求&#xff0c;极大地提高了爬虫效率。 二、Scrapy运行原…

如何使用PHP进行JSON编码和解码?

如何使用PHP进行JSON编码和解码&#xff1f; 使用PHP进行JSON编码和解码是开发过程中非常常见的任务。JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它使得人们能够很容易地阅读和编写&#xff0c;同时也使得机器能够解析和…

阐述 Git 命令 reset 和 revert

1 概述 由于某次或某几次提交的代码污染了远程分支&#xff0c;需要对远程分支代码进行恢复操作&#xff0c;此时可以通过 git 的 reset 和 revert 命令进行恢复。 HEAD 是指向当前分支的最新提交的指针 &#xff0c;每一次提交代码都会产生一个 commit id 来标识工作区的变更…

Elasticsearch单机部署(Linux)

1. 准备环境 本文中Elasticsearch版本为7.12.0&#xff0c;JDK版本为1.8.0&#xff0c;Linux环境部署。 扩展&#xff1a; &#xff08;1&#xff09;查看Elasticsearch对应的常用的jdk版本如下&#xff1a;&#xff08;详情可看官网的支持一览表&#xff09; Elasticsearch a…

贪吃蛇项目实践!(下)

NextIsFood 比较蛇指向的节点和食物指向的节点是否相同 //pSnakeNode psn 是下⼀个节点的地址 //pSnake ps 维护蛇的指针 int NextIsFood(pSnakeNode psn, pSnake ps) {return (psn->x ps->_pFood->x) && (psn->y ps->_pFood->y); }EatFood //…

机器学习 -- 分类问题

场景 探讨了一个回归任务——预测住房价格&#xff0c;用到了线性回归、决策树以及随机森林等各种算法。本次中我们将把注意力转向分类系统。我们曾经对MNIST进行了分类任务&#xff0c;这次我们重新回到这里&#xff0c;细致的再来一次。 开始 获取数据 Scikit-Learn提供了…

ELK 日志分析系统(二)

一、ELK Kibana 部署 1.1 安装Kibana软件包 #上传软件包 kibana-5.5.1-x86_64.rpm 到/opt目录 cd /opt rpm -ivh kibana-5.5.1-x86_64.rpm 1.2 设置 Kibana 的主配置文件 vim /etc/kibana/kibana.yml --2--取消注释&#xff0c;Kiabana 服务的默认监听端口为5601 server.po…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-6

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

nodejs连接oracle批量更新数据测试

条件&#xff1a;oracle数据库,数据表20w。所有测试都在本机执行&#xff0c;保持相同的网络带宽。因为机器性能和更新速度问题&#xff0c;这里只测试更新1w数据。 方式1&#xff1a;nodejs代码程序块更新 const sql "declare i number: 0;begin" " while i …