OpenHarmony - 基于ArkUI框架實現日歷應用
前言
對于剛剛接觸OpenHarmony應用開發的開發者，最快的入門方式就是開發一個簡單的應用，下面記錄了一個日歷應用的開發過程，通過日歷應用的開發，來熟悉基本圖形的繪制，ArkUI的組件的使用，UI組件生命周期，加深對OpenHarmony應用開發的理解。
效果展示
開發環境
- 開發工具：DevEco Studio 3.1 Release
- 開發環境：OpenHarmony API 9
- 開發語言：eTS
關于eTS
eTS語言：基于TypeScript（簡稱TS）拓展的出來的，是OpenHarmony應用開發語言，使用ArkUI框架提供的組件進行界面開發。
什么是TypeScript：
TypeScript 是微軟開發的一個開源的編程語言，是面向對象強類型化的，在 JavaScript 的基礎上引入了靜態類型、類、接口的概念。
TypeScript 和 JavaScript 的區別：
- TypeScript 是 JavaScript 的超集，在JavaScript的基礎上拓展了語法，包含了 JavaScript 的所有元素
- 在TypeScript 中的數據要求有明確的類型，而JavaScript中沒有
- TypeScript在編譯時可以發現錯誤，JavaScript只有在運行時報錯
布局容器組件
- Column ：沿垂直方向布局的容器，可以包含多個子組件
- Row：沿水平方向布局容器，可以包含多個子組件
- Stack：堆疊容器，子組件按照順序依次入棧，后一個子組件覆蓋前一個子組件，可以包含多個子組件
- Flex：彈性布局，元素在容器內水平居中，垂直等間隔分散，可以包含多個子組件
- Scroll：可滑動的容器組件，當子組件的布局尺寸超過父組件的視口時，內容可以滑動，內部只支持單個子組件，可支持垂直或者水平滑動
- Tabs：一種可以通過頁簽進行內容視圖切換的容器組件，每個頁簽對應一個內容視圖，只能包含子組件TabContent
- List：列表包含一系列相同寬度的列表項。適合連續、多行呈現同類數據，例如圖片和文本，只能包含ListItem子組件
- Swiper：滑動容器，提供左右切換子組件顯示的能力，可以包含多個子組件
- Grid：網格容器，由“行”和“列”分割的單元格所組成，通過指定“項目”所在的單元格做出各種各樣的布局，只能包含GridItem子組件
繪制組件
- Circle：圓形繪制組件
- Ellipse：橢圓繪制組件
- Line：直線繪制組件
- Polyline：折線繪制組件
- Polygon：多邊形繪制組件
- Path：路徑繪制組件
- Rect：矩形繪制組件
- Shape：繪制組件的父組件，父組件中會描述所有繪制組件均支持的通用屬性。
自定義組件
自定義組件生命周期函數
- aboutToAppear：在組件的 build 函數之前執行，可以做數據的初始化操作。
- aboutToDisappear：在組件銷毀之前執行，不允許改變狀態變量，會導致應用程序行為不穩定，可以做資源的釋放操作。
- onPageShow：僅@Entry修飾的自定義組件生效，應用進入前臺臺，頁面顯示時觸發。
- onPageHide：僅@Entry修飾的自定義組件生效，應用進入后臺，頁面消失時觸發。
自定義組件常用屬性
- @State ：變量需要本地初始化，初始化的值可以被構造參數覆蓋；
- @Prop：必須通過構造函數參數初始化，屬于單向數據綁定，使用其父組件提供的@State變量進行初始化
- @Link：必須通過構造函數參數進行初始化，屬于雙向數據綁定，子組件對@Link變量的更改將同步修改父組件的@State變量；
實現過程
日歷一頁顯示42天，包括上個月、當前月、下個月的天數，上個月和下個月的日期顯示灰色，點擊日期顯示選中效果。
支持選擇年份、月份，指定一個日期，獲取當前月的天數，根據該月1號在一周中的第幾天，獲取上個月顯示的天數，以及下個月顯示的天數。
獲取上一個月的天數，根據指定月份的1號在一周的第幾天，上月最大天數，計算出上個月天數，以object的形式添加到數組，以便區分，代碼如下：
const prevMonthDays = [];
//獲取上個月最大天數
let prevLastDay = new Date(year, month-1, 0).getDate();
//獲取某月1號所在一周的第幾天
let startWeek = new Date(year, month, 1).getDay();
// 上個月的最大天數減去當前月1號所在一周的第幾天
for (let i = prevLastDay - startWeek + 1; i <= prevLastDay; i++) {
prevMonthDays.push({
date: new Date(year, month - 1, i),
status: 'prev'
});
}獲取下一個月的天數，根據當前月份的1號在一周的第幾天，當前月份的最大天數，計算出下個月天數，以object的形式添加到數組，以便區分，代碼如下：
const nextMonthDays = [];
//獲取下個月最大天數
let curLastDay = new Date(year, month, 0).getDate();
//獲取當前月份1號在一周的第幾天
let startWeek = new Date(year, month, 1).getDay();
//一頁的天數減去當前月份的天數和上個月的天數
for (let i = 1; i <= 42 - startWeek - curLastDay + 1; i++) {
nextMonthDays.push({
date: new Date(year, month + 1, i),
status: 'next'
});
}獲取當前月的天數，以object的形式添加到數組，以便區分，代碼如下：
let curLastDay = new Date(year, month, 0).getDate();
for (let i = 1; i <= curLastDay; i++) {
curMonthDays.push({
date: new Date(year, month, i),
status: 'current'
});
}屏幕適配
屏幕適配需要用到媒體查詢的接口，可以根據設備參數，例如：屏幕分辨率、橫豎屏切換來修改應用的樣式。
首先導入媒體查詢模塊：
import mediaquery from '@ohos.mediaquery'然后通過matchMediaSync接口設置媒體查詢條件，并保存返回的條件監聽句柄，例如：監聽設備類型，橫豎屏狀態。
//監聽橫豎屏狀態
private listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');
//監聽當前設備類型
private deviceListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('screen and (device-type: default)');定義觸發回調函數，當匹配到媒體查詢條件時會觸發此回調函數。
onOrientationChange = (mediaQueryResult) => {
if (mediaQueryResult.matches) {
this.calendarWidth = "70%"
this.titleBarLeft = 80
} else {
this.calendarWidth = "100%"
this.titleBarLeft = 20
}
}
onDeviceTypeChange = (mediaQueryResult) => {
if(mediaQueryResult.matches){
this.titleBarLeftTop = 10
this.weekHeight = 30
this.pikerDialogHeight = 200
console.log("onDeviceTypeChange device-type: default")
}else{
this.titleBarLeftTop = 40
this.weekHeight = 50
this.pikerDialogHeight = 280
}
}通過條件監聽句柄去注冊回調函數，在 aboutToAppear 組件初始化的時候執行注冊，退出時銷毀監聽。
//組件初始化
aboutToAppear() {
this.listener.on('change', this.onOrientationChange);
}//組件銷毀
aboutToDisappear(){
this.listener.off('change', this.onOrientationChange);
}數據懶加載
當列表加載的數據過大時，直接采用循環渲染方式，導致頁面啟動時間過長，可以使用LazyForEach組件進行數據的懶加載進行優化，按需加載數據并創建相應組件。
定義一個類并實現IDataSource接口：
export class YearData implements IDataSource{
private list: number[] = []
private listener: DataChangeListener
constructor(list: number[]) {
this.list = list
}
totalCount(): number {
return this.list.length
}
getData(index: number): any {
return this.list[index]
}
getDataIndex(data:any){
return this.list.indexOf(data)
}
registerDataChangeListener(listener: DataChangeListener): void {
this.listener = listener
}
unregisterDataChangeListener() {
}
}在頁面中導入并使用。
import { YearData } from '../datasource/YearData'
private data: YearData = new YearData([])LazyForEach(this.data, (item: string) => {
ListItem() {
Row() {
Text(item).fontSize(20).margin({ left: 10 })
}
}
.onClick(() => {
this.data.pushData('item value: ' + this.data.totalCount())
})
}, item => item)
}總結
日歷應用實現在一頁42個格子上顯示上個月、當前月、下個月的日期，通過日歷應用的開發了解到了ArkUI組件的一些用法，生命周期和數據的加載過程，對之后的應用開發有很大的幫助。
