鸿蒙开发HarmonyOS NEXT(一)

最近总听见大家讨论鸿蒙,前端转型的好方向?先入门学习下

目前官方版本和文档持续更新中

一、开发环境

提示:要占用的空间比较多,建议安装在剩余空间多的盘

1、下载:官网最新工具 - 下载中心 - 华为开发者联盟 (huawei.com)下载安装即可

2、安装node和sdk(补充:我下载的是2024/6/21发布的5.0.3版本,应该是默认配好了,无需步骤2)

安装好后,新建第一个程序试试看(跟微信开发者工具一样,会默认创建项目结构)

二、ArkTs入门

可参考官网案例初识ArkTS语言 | 华为开发者联盟 (huawei.com)

就是ts变化而来的,写了个小案例检验了一下,ts语法基本都是可用的

三、ArkUI组件

ArkUI(方舟UI框架)-应用框架 | 华为开发者联盟 (huawei.com)

随用随查,非常方便

写个小案例,【通过输入或者点击按钮改变图片大小】


@Entry //装饰器-入口,可以直接作为页面显示
@Component //装饰器-组件
struct Index { //自定义组件@State normalWidth: number = 250; //变量-监控build() {// UI描述,内部声明式UI结构Row() {Column(){Image($r('app.media.head')).width(this.normalWidth).interpolation(ImageInterpolation.High)Flex({ direction: FlexDirection.Row }) {Text('调节大小:').width(100).textAlign(TextAlign.Start).padding(10)TextInput({text:String(this.normalWidth)}).width(180).type(InputType.Number).onChange((value) => {this.normalWidth = parseInt(value)})}.height(70).width('90%').padding(10)Flex({ direction: FlexDirection.Row }) {Button('变大', { type: ButtonType.Normal, stateEffect: true }).borderRadius(4).backgroundColor(0x317aff).width(90).height(40).margin(10).onClick(()=>{if(this.normalWidth < 300){this.normalWidth += 10}})Button('变小', { type: ButtonType.Normal, stateEffect: true }).borderRadius(4).backgroundColor(0xF55A42).width(90).height(40).margin(10).onClick(()=>{if(this.normalWidth >= 100){this.normalWidth -= 10}})}.height(70).width('90%').padding(10)Slider({min:0,max:400,step:10,value:this.normalWidth,style:SliderStyle.OutSet,direction:Axis.Horizontal,reverse:false,}).width('90%').blockColor('#36d').showTips(true).onChange(value=>{this.normalWidth = value})}.width('100%')}.height('100%').width('100%')}
}

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

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

相关文章

RTL8305NB从电口模式切换为光口模式

对于RTL8305NB&#xff0c;要从电口模式切换为光口模式&#xff0c;主要操作涉及到PHY page的切换和特定寄存器的配置。以下是详细的操作步骤&#xff1a; PHY Page切换&#xff1a; 首先&#xff0c;需要访问PHY地址8的寄存器31。这个寄存器用于Page的切换。向PHY地址8的寄存…

从删库到还原

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 从删库到还原 魔法一魔法二魔法三魔法四查看是否开启binlog&#xff0c;且format为row执行以下命…

WAV怎么转mp3?将wav转成MP3的几种方法介绍

WAV怎么转mp3&#xff1f;很多情况下&#xff0c;我们可能需要将高质量的 WAV 文件转换为更小、更兼容的 MP3 文件。例如&#xff0c;你可能想要为你的音乐收藏腾出更多存储空间&#xff0c;或者需要将音频文件上传到联网平台&#xff0c;而这些平台通常对文件大小有严格限制。…

2. ansible常用模块

ansible常用模块 一、ansible常用模块1、ansible命令用法2、常用模块 一、ansible常用模块 1、ansible命令用法 # ansible 被管理机 -m 模块 -a 模块参数2、常用模块 shell模块 作用: 统一执行shell命令 [rootzabbix_server ~]# ansible db -m shell -a uptime[rootzabbix_…

会声会影2024免费版下载无需激活码序列号

亲爱的影像爱好者们&#xff0c;今天我要和大家分享的是一款让我彻底着迷的软件——会声会影2024&#xff01;自从用了它&#xff0c;我的视频编辑技能简直突飞猛进&#xff0c;每次上传作品到小红书都能收获满满的赞&#x1f44d;。接下来&#xff0c;就让我带你一起探索这个神…

window系统忘记密码解决方案

原理 通过命令修改粘滞键的作用打开cmd命令&#xff0c;通过cmd命令修改用户密码。 1.进入系统自动恢复页面 各品牌进入恢复页面各不一样&#xff0c;一般按住shift重启电脑即可&#xff0c;笔者的惠普电脑是开机按住F11键。页面如下&#xff1a; 之后选择 - > 疑难解答…

阿里云nginx更新证书后依旧显示旧证书

尝试的解决办法 重启nginx服务删除服务器上的旧证书清除浏览器缓存检查是否使用CDN服务 最后的解决办法 云服务器开启了WAF服务&#xff0c;在WAF服务中配置证书

ssm 宠物领养系统-计算机毕业设计源码08465

目 录 摘要 1 绪论 1.1课题背景及意义 1.2研究现状 1.3ssm框架介绍 1.3论文结构与章节安排 2 宠物领养系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 …

web开发学习(web简单入门)

前言&#xff1a; 从我刚接触博客没多久我就萌发了搭建一个个人博客网站的想法&#xff08;用来装逼&#xff09;&#xff0c;但碍于学校屁事太多迟迟没有开始&#xff0c;最近学校课已经都差不多结课了&#xff0c;距离期末还有一段时间&#xff0c;我也得以抽出时间来学习我一…

js实现blockly后台解释器,可以单步执行,可以调用c/c++函数

实现原理 解析blockly语法树,使用js管理状态,实际使用lua执行,c/c++函数调用使用lua调用c/c++函数的能力 可以单行执行 已实现if功能 TODO for循环功能 函数功能 单步执行效果图 直接执行效果图 源代码 //0 暂停 1 单步执行 2 断点 //创建枚举 var AstStatus = {PAUS…

日志记录功能

需求描述: 1,可记录页面操作模块、按钮的日志记录 2,记录详细的指定操作数据日志 3,记录的数据可能需要查询表 4,需要考虑到扩展性及个性化定制 表结构设计: CREATE TABLE YES_DEV.T_COMM_OPERATION_LOG (ID BINARY_BIGINT NOT NULL,OPERATOR VARCHAR(128),OPERATION_MO…

35、正则表达式

一、正则表达式命令 正则表达式&#xff1a;匹配的是文本内容&#xff0c;linux的文本三剑客都是针对文本内容。 ​ grep 过滤文本内容 ​ sed 针对文本内容进行增删改查 ​ awk 按行取列 文本三剑客----都是按照行进行匹配。 1.1、grep筛选&#xff1a; grep的作用就是…

私有化地图离线部署方案之查询定位服务

私有化地图离线部署整体解决方案&#xff0c;除硬件之外&#xff0c;一般主要由基础地图服务、查询定位服务、路径规划服务和高程检索服务构成。 其中&#xff0c;查询定位服务是指地理编码与逆地理编码服务。 在《私有化地图离线部署方案之基础地图服务》一文中&#xff0c;…

软考 系统架构设计师系列知识点之杂项集萃(48)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;47&#xff09; 第75题 假设系统中互斥资源R的可用数位25。T0时刻进程P1、P2、P3、P4对资源R的最大需求数、已分配资源数和尚需资源数的情况如表a所示&#xff0c;若P1和P3分别申请资源R数为1和2…

不懂电路搭建可以学嵌入式编程开发吗?

当然可以学嵌入式编程开发&#xff01;虽然电路搭建是嵌入式开发中的一部分&#xff0c;但即使你对电路搭建不太了解&#xff0c;也可以从嵌入式编程开发入手。刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0…

Vue3 子组件监听父组件传来异步数据的正确方式

最初想使用watch 配合着 computed 来监听父组件数据&#xff0c;发现没有必要反而造成代码冗余&#xff0c;如果参数一多很难维护。 正确方式&#xff1a;直接使用computed监听就好 // 子组件 <script> export default {props: {yesterDayfollow: {type: Array},transpo…

公司自己的Qt打包步骤:

公司自己的打包步骤&#xff1a; 1. 把编译完的NRECS复制到 NRECS文件下下 2. NRECS文件夹下 运行 linuxdeployqt NRECS -appimage 3. 第2步如果出现问题&#xff0c;运行下面三行 export LIB_PATH/opt/Qt5.15/5.15.2/gcc_64/lib:$LIB_PATH export PLUGIN_PATH/opt/Qt5.15/5…

【Kafka 面试题】分布式通讯之Kafka面试题汇总(基础+进阶+高阶)-01

【Kafka 面试题】分布式通讯之Kafka面试题汇总 1. Kafka 的用途有哪些&#xff1f;使用场景如何&#xff1f;1.1 用途1.2 使用场景 2. Kafka 中的 ISR、AR 又代表什么&#xff1f;ISR 的伸缩又指什么&#xff1f;2.1 ISR (In-Sync Replicas)2.2 AR (Assigned Replicas)2.3 ISR的…

湘潭大学信息与网络安全考试总结

文章目录 题型内容&#xff08;试题回忆版&#xff09;填空单选多选简答大题 我的感受 题型 填空 20分&#xff0c;一空一分 单选 有几个&#xff0c;两分一个 多选 也有几个&#xff0c;两分一个&#xff0c;不确定的题建议当单选做 简答题 6 分一个&#xff0c;有几个 大题 …

Java中线程池的创建方式有几种?

在Java中&#xff0c;线程池是一种用于管理多个线程的机制&#xff0c;旨在提高性能并简化多线程编程。Java提供了多种方式来创建和管理线程池&#xff0c;主要通过java.util.concurrent包中的ExecutorService接口和Executors类来实现。以下是几种常见的线程池创建方式&#xf…