Web 开发者快速入门 HarmonyOS （一）
前言本文面向拥有 Web 开发履历、熟悉 HTML 和 CSS 的职员。通过 HTML/CSS 和 HarmonyOS/ArkUI 代码之间的对比，能让你更快速的上手 HarmonyOS 的应用开发。
原文：https://jm-wxr.github.io/blog/harmonyos/getstarted/web-developer.html（个人网站，不定期更新哦）
编程语言
ArkTS 是 HarmonyOS 优选的主力应用开发语言。ArkTS 围绕应用开发在TypeScript（简称 TS）生态底子上做了进一步扩展，保持了 TS 的根本风格，同时通过规范定义强化开发期静态检查和分析，提升程序实验稳定性和性能。
如果你有 JavaScript 的底子，要了解 TypeScript 和 JavaScript 语言的区别，请参阅为 JavaScript 程序员准备的 TypeScript。
如果你有 TypeScript 的底子，要了解 ArkTS 语言和 TypeScript 语言的区别，请参阅从 TypeScript 到 ArkTS 的适配规则。
UI 框架
HarmonyOS 采用的 UI 框架是方舟开发框架（ArkUI 框架），方舟开发框架为开发者提供了两种开发范式，分别是基于 ArkTS 的声明式开发范式（简称“声明式开发范式”）和兼容 JS 的类 Web 开发范式（简称“类 Web 开发范式”）。本文只考虑声明式开发范式这一种开发范式。
留意：
[*] 以下示例均假设将全部的 HTML 元素的 CSS 盒子模子都设置为border-box，以便与 ArkUI 保持一致
* {
box-sizing: border-box;
}
[*] 在下面 ArkUI 的示例中默认将单位省略。ArkUI 采用 vp 为基准数据单位，在实际宽度为 1440 物理像素的屏幕上，1vp 约等于 3px。
根本结构操作
设置文本样式、文本对齐方式
https://i-blog.csdnimg.cn/blog_migrate/da7fb1684d2b9daef6e28c0ea6889bde.png
对于 css 使用font和color设置笔墨样式、大小等，Text 组件（ArkUI 中构建 UI 的最小单位称为组件）的文本通用属性可以到达同样的效果。
对于 css 使用text-align来对齐文本，Text 组件的textAlign属性可以到达同样的效果。
<p class="blue-text">蓝色文字</p>
<style>
.blue-text {
font: 900 24px Tahoma;
color: blue;
text-align: center;
}
</style>
Text("蓝色文字")
.fontSize(24)
.fontColor(Color.Blue)
// 当前仅支持’HarmonyOS Sans’字体
.fontFamily("Tahoma")
.fontWeight(FontWeight.Bolder)
.textAlign(TextAlign.Center);
设置尺寸大小和背景颜色
https://i-blog.csdnimg.cn/blog_migrate/7ef441a5697a09e24aea95bf39751dff.png
使用width和height属性来设置组件的固定宽高。如果要束缚组件的宽高，请使用constraintSize属性来实现。
使用backgroundColor 属性来设置背景颜色。
在CSS和ArkUI的Flex结构（弹性结构）中，子元素或子组件默认锚定在左上角。
<div class="red-box">这是个红色盒子</div>
<style>
.red-box {
width: 300px;
height: 180px;
background-color: red;
}
</style>
Flex() {
Text('这是个红色盒子')
}
.width(300)
.height(180)
.backgroundColor(Color.Red)
设置线性渐变
https://i-blog.csdnimg.cn/blog_migrate/f11de5ccb0f7b592908819cfe52bbb07.png
对于渐变颜色，可以使用linearGradient 属性，其中angle为渐变角度（默认值为180，垂直向下），colors为数组，每个数组项表示某百分比位置处的渐变色颜色。详细设置见颜色渐变
对于CSS的row方向的Flex结构，在ArkUI可以用Row结构（线性结构）来代替，子组件默认侧轴居中。
<div class="red-box">这是个渐变盒子</div>
<style>
.red-box {
width: 300px;
height: 180px;
display: flex;
flex-direction: row;
align-items: center;
background: linear-gradient(180deg, red, yellow 80%);
}
</style>
Row() {
Text('这是个渐变盒子')
}
.width(300)
.height(180)
.linearGradient({ angle: 180, colors: [,] })
设置对齐方式
https://i-blog.csdnimg.cn/blog_migrate/f40c0c7d9ae3c6814cbfd748669002f7.png
在 ArkUI 中，通过给 Flex 容器（弹性结构容器）传入参数justifyContent和alignItems来实现子组件的对齐格式。对于 Row 和 Column 容器（线性结构容器），设置其属性justifyContent和alignItems来实现。更多结构见结构概述
<div class="red-box">这是个红色盒子</div>
<style>
.red-box {
width: 300px;
height: 180px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
</style>
Flex({
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
Text('这是个红色盒子')
}
.width(300)
.height(180)
.backgroundColor(Color.Red)
组件位置和大小
绝对位置
https://i-blog.csdnimg.cn/blog_migrate/cb86b52398ec61dc31f0ccc4387bcbd5.png
默认情况下，组件相对于其父组件进行定位。
将组件作为结构组件(这里以Stack为例)的子组件，来设置其绝对位置，在position属性中指定x和y的坐标确定位置。
<div class="blue-box">
<div class="red-box">这是个红色盒子</div>
</div>
<style>
.blue-box {
position: relative;
background-color: #0000ff;
width: 320px;
height: 240px;
font: 900 24px Roboto;
}
.red-box {
position: absolute;
top: 24px;
left: 24px;
background-color: red;
padding: 16px;
color: #ffffff;
}
</style>
Stack() {
Row() {
Text('这是一个红色盒子')
.fontColor('#ffffff')
.fontSize(24)
.fontWeight(900)
.fontFamily('Roboto')
}
.position({x: 24, y : 24})
.backgroundColor(Color.Red)
.padding(16)
}
.backgroundColor('#0000ff')
.width(320)
.height(240)
旋转
https://i-blog.csdnimg.cn/blog_migrate/db5d56a9aba176e1e7c85023ac9135cf.png
在组件的rotate属性中指定angle的值来设置其旋转角度（顺时针）。详细设置见RotateOptions
<div class="blue-box">
<div class="red-box">这是个红色盒子</div>
</div>
<style>
.blue-box {
background-color: #0000ff;
width: 320px;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
}
.red-box {
background-color: red;
padding: 16px;
color: #ffffff;
transform: rotate(15deg);
}
</style>
Flex({
alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center
}) {
Row() {
Text('这是一个红色盒子')
.fontColor('#ffffff')
}
.backgroundColor(Color.Red)
.padding(16)
.rotate({angle: 15})
}
.backgroundColor('#0000ff')
.width(320)
.height(240)
缩放
https://i-blog.csdnimg.cn/blog_migrate/f48e9216c901f9688d8ede81363ac52a.png
在组件的scale属性中指定x和y的值来设置相应轴的缩放比例。详细设置见ScaleOptions
<div class="blue-box">
<div class="red-box">这是个红色盒子</div>
</div>
<style>
.blue-box {
/* ... */
}
.red-box {
/* ... */
transform: scale(1.5);
}
</style>
Flex({
// ...
}) {
Row() {
Text('这是一个红色盒子')
}
// ...
.scale({x: 1.5, y: 1.5})
}
// ...
平移
https://i-blog.csdnimg.cn/blog_migrate/2259185ab52984cc766e4f5fab6a9dae.png
在组件的translate属性中指定x和y的值来设置相应轴的平移间隔。详细设置见TranslateOptions
<div class="blue-box">
<div class="red-box">这是个红色盒子</div>
</div>
<style>
.blue-box {
/* ... */
}
.red-box {
/* ... */
transform: translate(20px, 20px);
}
</style>
Flex({
// ...
}) {
Row() {
Text('这是一个红色盒子')
}
// ...
.translate({x: 20, y: 20})
}
// ...
组件边框形状
圆角
https://i-blog.csdnimg.cn/blog_migrate/3243e50c8c2555926465bef53a5db83b.png
要设置组件的圆角，可以使用borderRadius属性，传入一个值，来指定每个角的圆角半径。如果你想单独设置每个角，请查阅BorderRadiuses
<div class="blue-box">
<div class="red-box">这是个红色盒子</div>
</div>
<style>
.blue-box {
/* ... */
}
.red-box {
/* ... */
border-radius: 12px;
}
</style>
Flex({
// ...
}) {
Row() {
Text('这是一个红色盒子')
}
// ...
.borderRadius(12)
}
// ...
边框阴影
https://i-blog.csdnimg.cn/blog_migrate/e2996f36a3e41cb4f241d048b5d4b3c5.png
组件的shadow属性可以设置边框的阴影，阴影的每个属性都是单独设置，其offsetX、offsetY、radius、color分别表示X轴偏移量、Y轴偏移量、阴影半径、阴影颜色，由于前三个属性的单位为px，你大概须要用vp2px进行单位转换。详细设置见ShadowOptions
除了设置每一个阴影属性，还可以只设置阴影样式。具体设置见ShadowStyle
<div class="gray-box">
<div class="red-box">这是个红色盒子</div>
</div>
<style>
.gray-box {
background-color: gray;
/* ... */
}
.red-box {
/* ... */
box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.8);
}
</style>
Flex({
// ...
}) {
Row() {
Text('这是一个红色盒子')
}
// ...
.shadow({
offsetX: vp2px(4),
offsetY: vp2px(6),
radius: vp2px(20),
color: 'rgba(0, 0, 0, 0.8)',
})
// .shadow(ShadowStyle.OUTER_DEFAULT_LG)
}
.backgroundColor(Color.Grey)
// ...
圆形和椭圆形（胶囊形）
https://i-blog.csdnimg.cn/blog_migrate/fa56a997d644397dd818473f227cbfa9.png
对于CSS，将矩形的border-radius设置为50%就可以得到一个圆形或椭圆形。
但在ArkUI中，你无法直接将borderRadius 设置为50%，只能输入具体的数值。对于正方形，将其设置为高度（宽度）的一半，你会得到一个圆。对于长方形，将其设置为高度（宽度）的一半，你会得到一个胶囊形。
留意：最大值不会凌驾宽或高的一半
<div class="gray-box">
<div class="red-box">这是个红色盒子</div>
</div>
<style>
.gray-box {
background-color: gray;
/* ... */
}
.red-box {
/* ... */
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
Flex({
// ...
}) {
Row() {
Text('这是一个红色盒子')
}
// ...
.width(100)
.height(100)
.borderRadius(50)
}
.backgroundColor(Color.Grey)
// ...
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]