一、引言
1、開發(fā)環(huán)境
之后關(guān)于HarmonyOS技術(shù)的分享，將會持續(xù)使用到以下版本
- HarmonyOS：3.1/4.0
- SDK：API 9 Release
- Node.js：v14.20.1
- DevEco Studio： 3.1.0
2、整體架構(gòu)圖
二、認識ArkUI
HarmonyOS應(yīng)用的UI開發(fā)依賴于方舟開發(fā)框架（簡稱ArkUI）。
根據(jù)官方介紹，ArkUI提供了UI語法、豐富的UI功能（組件、布局、動畫以及交互事件），以及實時界面預(yù)覽工具等，可以支持開發(fā)者進行可視化界面開發(fā)。
1、基本概念
（官方已經(jīng)給出了非常詳細的介紹，我這里就照搬，主要為后面的實操進行鋪墊）
- UI：即用戶界面。開發(fā)者可以將應(yīng)用的用戶界面設(shè)計為多個功能頁面，每個頁面進行單獨的文件管理，并通過頁面路由API完成頁面間的調(diào)度管理如跳轉(zhuǎn)、回退等操作，以實現(xiàn)應(yīng)用內(nèi)的功能解耦。
- 組件：UI構(gòu)建與顯示的最小單位，如列表、網(wǎng)格、按鈕、單選框、進度條、文本等。開發(fā)者通過多種組件的組合，構(gòu)建出滿足自身應(yīng)用訴求的完整界面。
2、開發(fā)范式（附：案例）
ArkUI為開發(fā)者提供了兩種范式：基于TypeScript聲明式范式（ArkTS）、兼容JS的類Web開發(fā)范式（JS）
（1）ArkTS
ArkTS我也僅僅學(xué)習(xí)了四個月，相比較我在使用JS開發(fā)UI界面上而言，有所偏弱。
對比較于Android：ArkUI將界面設(shè)計和具體操作放到的一個文件中（當(dāng)然ArkUI有組件自定義，這個就另當(dāng)別論），這個方式比較新穎。在內(nèi)存的占用上會相對減低很多，性能和維護上也相對提升很多。
（2）JS
HTML、CSS、JS這一套技術(shù)，相信很多IT人都已經(jīng)非常熟悉，這也是我能快速入手HarmonyOS的重要因素。個人也是比較推薦使用這套技術(shù)進行簡單應(yīng)用，如果要使用到手機硬件功能的話，推薦使用ArkTS。ArkTS在操作編寫上比JS要方便很多。
文章來源：http://www.zghlxwxcb.cn/news/detail-715345.html
三、附件
- ArkTS代碼
@Entry
@Component
struct Index {
@State textName: string = "賬號/電話號碼"
@State textPass: string = "密碼"
@State btnLogin: string = "登錄"
build() {
Row() {
Column() {
// person
Image($r('app.media.person')).width(100).height(100).margin({top:50, bottom:50})
// data
TextArea({ placeholder : this.textName}).margin(15)
TextArea({ placeholder : this.textPass}).margin(15)
// btn
Button(this.btnLogin, { type: ButtonType.Normal, stateEffect: true })
.borderRadius(18)
.backgroundColor(0x317aff)
.width(90)
.height(40)
.margin({top:50})
}
}
}
}
- JS代碼
index.hml文章來源地址http://www.zghlxwxcb.cn/news/detail-715345.html
<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;
}
到了這里，關(guān)于【鴻蒙（HarmonyOS）】UI開發(fā)的兩種范式：ArkTS、JS（以登錄界面開發(fā)為例進行對比）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
