当前位置: 首页 > news >正文

【鸿蒙(HarmonyOS)】UI开发的两种范式:ArkTS、JS(以登录界面开发为例进行对比)

文章目录

  • 一、引言
    • 1、开发环境
    • 2、整体架构图
  • 二、认识ArkUI
    • 1、基本概念
    • 2、开发范式(附:案例)
      • (1)ArkTS
      • (2)JS
  • 三、附件

一、引言

1、开发环境

之后关于HarmonyOS技术的分享,将会持续使用到以下版本

  • HarmonyOS:3.1/4.0
  • SDK:API 9 Release
  • Node.js:v14.20.1
  • DevEco Studio: 3.1.0

2、整体架构图

在这里插入图片描述

二、认识ArkUI

HarmonyOS应用的UI开发依赖于方舟开发框架(简称ArkUI)
根据官方介绍,ArkUI提供了UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。

1、基本概念

(官方已经给出了非常详细的介绍,我这里就照搬,主要为后面的实操进行铺垫)

  • UI:即用户界面。开发者可以将应用的用户界面设计为多个功能页面,每个页面进行单独的文件管理,并通过页面路由API完成页面间的调度管理如跳转、回退等操作,以实现应用内的功能解耦。
  • 组件:UI构建与显示的最小单位,如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。

2、开发范式(附:案例)

ArkUI为开发者提供了两种范式:基于TypeScript声明式范式(ArkTS)、兼容JS的类Web开发范式(JS)

在这里插入图片描述

(1)ArkTS

ArkTS我也仅仅学习了四个月,相比较我在使用JS开发UI界面上而言,有所偏弱。
对比较于Android:ArkUI将界面设计和具体操作放到的一个文件中(当然ArkUI有组件自定义,这个就另当别论),这个方式比较新颖。在内存的占用上会相对减低很多,性能和维护上也相对提升很多。

在这里插入图片描述

(2)JS

HTML、CSS、JS这一套技术,相信很多IT人都已经非常熟悉,这也是我能快速入手HarmonyOS的重要因素。个人也是比较推荐使用这套技术进行简单应用,如果要使用到手机硬件功能的话,推荐使用ArkTS。ArkTS在操作编写上比JS要方便很多。

在这里插入图片描述

三、附件

  • ArkTS代码
@Entry
@Component
struct Index {@State textName: string = "账号/电话号码"@State textPass: string = "密码"@State btnLogin: string = "登录"build() {Row() {Column() {// personImage($r('app.media.person')).width(100).height(100).margin({top:50, bottom:50})// dataTextArea({ placeholder : this.textName}).margin(15)TextArea({ placeholder : this.textPass}).margin(15)// btnButton(this.btnLogin, { type: ButtonType.Normal, stateEffect: true }).borderRadius(18).backgroundColor(0x317aff).width(90).height(40).margin({top:50})}}}
}
  • JS代码

index.hml

<div class="container"><!--  title  --><div class="login-title"><image class="person" src="../../common/person.png"></image></div><!--  data  --><div class="input-data"><input type="text" required="" id="userName" placeholder="账号\电话号码"/></div><div class="input-data"><input type="text" required="" id="userPass" placeholder="密码"/></div><!--  btn  --><div class="login-btn"><button>{{ $t('strings.btn_dl') }}</button></div>
</div>
  • index.css
.container {display: flex;flex-direction: column;align-items: center;left: 0px;top: 0px;width: 100%;height: 100%;background: linear-gradient(-135deg, #50c8c2, #4158d0);
}.person {text-align: center;background: linear-gradient(-135deg, #ff2481ef, #ffe03092);width: 230px;height: 230px;margin: 100px;border-radius: 230px;
}@media screen and (orientation: landscape) {.title {font-size: 60px;}
}@media screen and (device-type: tablet) and (orientation: landscape) {.title {font-size: 100px;}
}.input-data{padding: 40px;
}.login-btn button{margin-top: 80px;padding: 30px;
}

相关文章:

【鸿蒙(HarmonyOS)】UI开发的两种范式:ArkTS、JS(以登录界面开发为例进行对比)

文章目录 一、引言1、开发环境2、整体架构图 二、认识ArkUI1、基本概念2、开发范式&#xff08;附&#xff1a;案例&#xff09;&#xff08;1&#xff09;ArkTS&#xff08;2&#xff09;JS 三、附件 一、引言 1、开发环境 之后关于HarmonyOS技术的分享&#xff0c;将会持续使…...

Flink中的批和流

批处理的特点是有界、持久、大量&#xff0c;非常适合需要访问全部记录才能完成的计算工作&#xff0c;一般用于离线统计。 流处理的特点是无界、实时, 无需针对整个数据集执行操作&#xff0c;而是对通过系统传输的每个数据项执行操作&#xff0c;一般用于实时统计。 而在Flin…...

【LeetCode-中等题】150. 逆波兰表达式求值

文章目录 题目方法一&#xff1a;栈 题目 方法一&#xff1a;栈 class Solution {public int evalRPN(String[] tokens) {Deque<Integer> deque new LinkedList<>();String rpn "-*/";//符号集 用来判断扫描的是否为运算符int sum 0;for(int i 0 ; i…...

搭建ELK+Filebead+zookeeper+kafka实验

部署 Zookeeper 集群 准备 3 台服务器做 Zookeeper 集群 192.168.10.17 192.168.10.21 192.168.10.22 1.安装前准备 关闭防火墙 systemctl stop firewalld systemctl disable firewalld setenforce 0 安装 JDK yum install -y java-1.8.0-openjdk java-1.8.0-openjdk-…...

java专题练习(抢红包)

package 专题练习;import java.util.Random;public class grab_red_packet {/* 需求:直播抽奖,分别由{2,588,888,1000,10000}五个奖金,请用代码模拟抽奖,奖项出现顺序要随机且不重复打印效果:588元的奖金被抽出*///思路://1. 先用数组把奖金定义好//2. 用random方法给出随机数索…...

AVR 单片机 调试环境 JTAG MKII

注意 驱动 的厂家: 如果驱动备改变为其他厂家的驱动 就与 AVR Studio7不兼容 保证驱动选择正确是 能够使用硬件调试的关键 如果驱动不对&#xff0c;使用 USB驱动修改工具 修改 比如 UsbDriverTool.exe...

C++ - AVL树实现(下篇)- 调试小技巧

前言 本博客是 AVL树的下篇&#xff0c;上篇请看&#xff1a;C - AVL 树 介绍 和 实现 &#xff08;上篇&#xff09;_chihiro1122的博客-CSDN博客 上篇当中写插入操作&#xff0c;和其中涉及的 旋转等等细节&#xff0c;还有AVL树的大体框架。 调试小技巧 条件断点 在大项目…...

Mybatis懒加载

懒加载是什么&#xff1f; 按需加载所需内容&#xff0c;当调用到关联的数据时才与数据库交互否则不交互&#xff0c;能大大提高数据库性能&#xff0c;并不是所有场景下使用懒加载都能提高效率。 Mybatis懒加载&#xff1a;resultMap里面的association、collection有延迟加载功…...

DSOX3012A是德科技keysight DSOX3012A示波器

181/2461/8938是德科技DSOX3012A(安捷伦)示波器 是德科技DSOX3012A(安捷伦)是InfiniiVision 3000 X系列中的双通道型号。这款可升级示波器采用突破性技术设计&#xff0c;提供卓越的性能和功能。其独特的5仪器合一设计为相同的预算提供了更大的范围。 是德科技DSOX3012A示波器…...

基于网络表示学习的 新闻推荐算法研究与系统实现

摘要 第1章绪论 新闻推荐通常是利用用户的阅读行为和习惯、阅读选择和爱好等信息,为 用户推荐新闻内容。新闻推荐能够减少用户在数量庞大数据信息中获取信息的 时间消耗,从而能够缓解“信息过载[7]”的难题。以文本为内容的新闻,和商品、 电影、短视频等推荐系统相比,新闻推…...

<Altium Designer> 将.DSN文件导入并转换成SchDoc文件

目录 01 使用向导方式导入.DSN 02 消除Unique Identifiers Errors 03 文章总结 大家好&#xff0c;这里是程序员杰克。一名平平无奇的嵌入式软件工程师。 本文主要是总结和分享将OrCAD Capture画的原理图文件(.DSN)导入到Altium Designer&#xff0c;转换成对应的原理图文件…...

视频定格合璧,批量剪辑轻松插入图片

大家好&#xff01;想要将视频与图片完美融合吗&#xff1f;现在&#xff0c;我们为您推出一款强大的批量剪辑工具&#xff0c;让您能够轻松在图片中插入视频&#xff0c;让您的创作更加精彩动人&#xff01; 首先&#xff0c;第一步我们要进入媒体梦工厂主页面&#xff0c;并…...

【Tensorflow 2.12 电影推荐项目搭建】

Tensorflow 2.12 电影推荐项目搭建 学习笔记工具、环境创建项目项目配置安装相关python包召回模型实现排序模型实现实现电影推荐导入模块设置要推荐的用户召回推荐排序推荐推荐结果结尾学习笔记 Tensorflow 2.12 电影推荐项目搭建记录~ Tensorflow是谷歌开源的机器学习框架,可…...

python+opencv特征匹配算法

pythonopencv特征匹配算法 1.安装 pip install opencv-python pip install numpy2.算法明细 import cv2 import numpy as np# 读取两张图像 img1 cv2.imread(image1.jpg,0) # queryImage img2 cv2.imread(image2.jpg,0) # trainImage# 初始化SIFT对象 sift cv2.xfeatur…...

android Compose 实现 webView

在Compose中&#xff0c;目前还没有原生的WebView组件。但是&#xff0c;您可以使用Android Jetpack组件中的AndroidView来将传统的WebView集成到Compose中。下面是一个示例代码&#xff1a; Composable fun WebViewScreen(url: String) {AndroidView(factory { context ->…...

算法基础-数学知识-欧拉函数、快速幂、扩展欧几里德、中国剩余定理

算法基础-数学知识-欧拉函数、快速幂、扩展欧几里德、中国剩余定理 欧拉函数AcWing 874. 筛法求欧拉函数 快速幂AcWing 875. 快速幂AcWing 876. 快速幂求逆元 扩展欧几里德&#xff08;裴蜀定理&#xff09;AcWing 877. 扩展欧几里得算法AcWing 878. 线性同余方程 中国剩余定理…...

ElasticSearch系列-索引原理与数据读写流程详解

索引原理 倒排索引 倒排索引&#xff08;Inverted Index&#xff09;也叫反向索引&#xff0c;有反向索引必有正向索引。通俗地来讲&#xff0c;正向索引是通过key找value&#xff0c;反向索引则是通过value找key。ES底层在检索时底层使用的就是倒排索引。 索引模型 现有索…...

【码银送书第七期】七本考研书籍

八九月的朋友圈刮起了一股晒通知书潮&#xff0c;频频有大佬晒出“研究生入学通知书”&#xff0c;看着让人既羡慕又焦虑。果然应了那句老话——比你优秀的人&#xff0c;还比你努力。 心里痒痒&#xff0c;想考研的技术人儿~别再犹豫了。小编咨询了一大波上岸的大佬&#xff…...

docker容器的设置本地时间(/etc/localtime)和本地时区(/etc/timezone)

本地时区的修改 一般情况下&#xff0c;我们启动docker容器时指定了环境变量&#xff1a; -e TZ:Asia/Ho_Chi_Minh &#xff0c;容器内的时区就会变成东八区&#xff0c;某些软件则会读取该环境变量作为其使用的时区&#xff0c;该环境变量相当于"残缺版"的命令&…...

侯捷老师C++课程:内存管理

内存管理 第一讲&#xff1a;primitives c应用程序 c内存的基本工具 测试程序&#xff1a; #include <iostream> using namespace std; #include <complex> #include <ext/pool_allocator.h>int main() {// 三种使用方法void* p1 malloc(512); // 512 b…...

A股风格因子看板 (2023.09 第05期)

该因子看板跟踪A股风格因子&#xff0c;该因子主要解释沪深两市的市场收益、刻画市场风格趋势的系列风格因子&#xff0c;用以分析市场风格切换、组合风格暴露等。 今日为该因子跟踪第05期&#xff0c;指数组合数据截止日2023-08-31&#xff0c;要点如下 近1年A股风格因子检验统…...

修炼离线:(二)sqoop插入hbase 脚本(增量)

一&#xff1a;mysql创建表&#xff0c;插入数据。 二&#xff1a;hbase创建表。 habse shell create aa(表名),cf(列族)三&#xff1a;mysql_hbase脚本。 #!/bin/shmysqlHost$1 mysqlUserName$2 mysqlUserPass$3 mysqlDbName$4 myqlTbName$5 hbaseTbName$6 hbaseTbRowkey$7…...

跨平台编程开发工具Xojo 2023 Release mac中文版功能介绍

Xojo mac是一款跨平台的软件开发工具&#xff0c;它允许开发人员使用一种编程语言来创建应用程序&#xff0c;然后可以在多个操作系统上运行。Xojo 2023是Xojo开发工具的最新版本&#xff0c;它提供了许多功能和改进&#xff0c;以帮助开发人员更轻松地构建高质量的应用程序。 …...

OpenCV Series : Target Box Outline Border

角点 P1 [0] (255, 000, 000) P2 [1] (000, 255, 000) P3 [2] (000, 000, 255) P4 [3] (000, 000, 000)垂直矩形框 rect cv2.minAreaRect(cnt)targetColor roi_colortargetThickness 1targetColor (255, 255, 255)if lineVerbose:if …...

【AD】【规则设置】设置四层板

设置四层板 一般 4层板&#xff0c;都会把 地 和 VCC放在内层。1、使用快捷键D-K 进入层叠管理器&#xff0c;添加负片层添加完后&#xff0c;修改层名&#xff0c;方便辨识修改格式&#xff1a;属性层号 2、进入相应layer 设置网络设置GND层设置VCC层特点&#xff1a;在层内可…...

Linux安装JDK1.8并配置环境变量

Linux安装JDK并配置环境变量Linux安装JDK并配置环境变量Linux安装JDK并配置环境变量 一、查询已有JAVA环境版本信息 java -version 二、下载Oracle JDK安装包 https://www.oracle.com/java/technologies/downloads/archive/ 三、安装 配置JDK 以下方式适用于安装各版本JDK&…...

面向面试知识--MySQL数据库与索引

面向面试知识–MySQL数据库与索引 优化难点与面试点 什么是MySQL索引&#xff1f; 索引的MySQL官方定义&#xff1a;索引是帮助MySQL快速获取数据的数据结构。 动力节点原文&#xff1a; MysQL官方对于索引的定义:索引是帮助MySQL高效获取数据的数据结构。 MysQL在存储数据之…...

portainer + portainer/agent

参考链接 https://docs.portainer.io/ portainer 免费版 portainer-ce 免费版 portainer-ee 企业版 portainer-agent docker本机代理 agent 下载地址 https://download.csdn.net/download/a309450028a/87451332 portainer 下载地址 https://download.csdn…...

C# 截取字符串

在 C# 中&#xff0c;可以使用 Substring 方法来截取字符串的一部分。该方法有两个参数&#xff1a;起始索引和要截取的字符数。 以下是使用 Substring 方法截取字符串的示例&#xff1a; string str "Hello World"; string result str.Substring(6); // 从索引为…...

FOXBORO FBM233 P0926GX控制脉冲模块

FOXBORO FBM233 P0926GX 是一种控制脉冲模块&#xff0c;通常用于工业自动化和控制系统中。这个模块的主要功能是生成和控制脉冲信号&#xff0c;以用于执行特定的操作或控制过程。以下是可能适用于 FOXBORO FBM233 P0926GX 控制脉冲模块的一些常见特点&#xff1a; 脉冲生成&a…...

上海公司法人落户条件/廊坊网站seo

Java优先级 Java提供一个线程调度器来监视和控制Runnable状态的线程。线程的调度策略采用抢占式&#xff0c;优先级高的线程比优先级低的线程优先执行。在优先级相同的情况下&#xff0c;按照“先到先服务”的原则。 每个Java程序都有一个默认的主线程&#xff0c;就是通过JV…...

怎样给网站做 站内搜索/搜索引擎seo如何优化

好例子网址...

nas做网站服务器/今天发生的重大新闻

写在前面 官方文档地址 ES 的查询语言称为 DSL 即 Domain Specific Language 领域专用语言。 本文查询将以下列索引结构为例子展开。 PUT /dying_gq_bookstore {"mappings": {"properties": {"book_id": {"type": "long"…...

自己的网站统计输入词/微商软文范例大全100

悠悠导航地图app是一款非常好用的手机导航软件&#xff0c;这里有着专业全面的导航内容&#xff0c;让你出行可以更方便&#xff0c;悠悠导航地图app有着专业精准的导航功能&#xff0c;还能为你提供周边相关吃喝玩乐服务平台&#xff0c;非常安全便捷&#xff0c;赶快来用吧&a…...

如何在网站上做免费代理/网址服务器查询

Map与List、Set接口不同&#xff0c;它是由一系列键值对组成的集合&#xff0c;提供了key到Value的映射。同时它也没有继承Collection。在Map中它保证了key与value之间的一一对应关系。也就是说一个key对应一个value&#xff0c;所以它不能存在相同的key值&#xff0c;当然valu…...

青海微网站建设/正规推广平台

我认为它被称为状态栏&#xff1f;带有功率计&#xff0c;时钟等的那个 . 花了我很多时间来“隐藏”它&#xff0c;但它所做的一切都是隐藏图标&#xff0c;它仍然占据了房地产 . 因此&#xff0c;当wkwebview向上滚动时&#xff0c;它会在状态栏下滚动并且看起来很糟糕 .我要么…...