前言

关于刚刚接触OpenHarmony运行开发的开发者，最快的入门方式就是开发一个方便的运行，上方记载了一个日历运行的开发环节，经过日历运行的开发，来相熟基本图形的绘制，ArkUI的组件的经常使用，UI组件生命周期，加深对OpenHarmony运行开发的了解。

成果展现

开发环境

关于eTS

eTS言语：基于TypeScript（简称TS）拓展的进去的，是OpenHarmony运行开发言语，经常使用ArkUI框架提供的组件启动界面开发。

什么是TypeScript：TypeScript是微软开发的一个开源的编程言语，是面向对象强类型化的，在Script的基础上引入了静态类型、类、接口的概念。

TypeScript和JavaScript的区别：

规划容器组件

绘制组件

自定义组件

自定义组件生命周期函数

自定义组件罕用属性

成功环节

日历一页显示42天，包括上个月、以后月、下个月的天数，上个月和下个月的日期显示灰色，点击日期显示选中成果。支持选用年份、月份，指定一个日期，失掉以后月的天数，依据该月1号在一周中的第几天，失掉上个月显示的天数，以及下个月显示的天数。

失掉上一个月的天数，依据指定月份的1号在一周的第几天，上月最大天数，计算出上个月天数，以object的方式减少到数组，以便辨别，代码如下：

constprevMonthDays=[];//失掉上个月最大天数letprevLastDay=newDate(year,month-1,0).getDate();//失掉某月1号所在一周的第几天letstartWeek=newDate(year,month,1).getDay();//上个月的最大天数减去以后月1号所在一周的第几天for(leti=prevLastDay-startWeek+1;i<=prevLastDay;i++){prevMonthDays.push({date:newDate(year,month-1,i),status:'prev'});}

失掉下一个月的天数，依据以后月份的1号在一周的第几天，以后月份的最大天数，计算出下个月天数，以object的方式减少到数组，以便辨别，代码如下：

constnextMonthDays=[];//失掉下个月最大天数letcurLastDay=newDate(year,month,0).getDate();//失掉以后月份1号在一周的第几天letstartWeek=newDate(year,month,1).getDay();//一页的天数减去以后月份的天数和上个月的天数for(leti=1;i<=42-startWeek-curLastDay+1;i++){nextMonthDays.push({date:newDate(year,month+1,i),status:'next'});}

失掉以后月的天数，以object的方式减少到数组，以便辨别，代码如下：

letcurLastDay=newDate(year,month,0).getDate();for(leti=1;i<=curLastDay;i++){curMonthDays.push({date:newDate(year,month,i),status:'current'});}

屏幕适配

屏幕适配须要用到媒体查问的接口，可以依据设施参数，例如：屏幕分辨率、横竖屏切换来修正运行的样式。

首先导入媒体查问模块：

importmediaqueryfrom'@ohos.mediaquery'

而后经过matchMediaSync接口设置媒体查问条件，并保留前往的条件监听句柄，例如：监听设施类型，横竖屏形态。

//监听横竖屏形态privatelistener:mediaquery.MediaQueryListener=mediaquery.matchMediaSync('(orientation:landscape)');//监听以后设施类型privatedeviceListener:mediaquery.MediaQueryListener=mediaquery.matchMediaSync('screenand(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=10this.weekHeight=30this.pikerDialogHeight=200console.log("onDeviceTypeChangedevice-type:default")}else{this.titleBarLeftTop=40this.weekHeight=50this.pikerDialogHeight=280}}

经过条件监听句柄去注册回调函数，在aboutToAppear组件初始化的时刻口头注册，分开时销毁监听。

//组件初始化aboutToAppear(){this.listener.on('change',this.onOrientationChange);}

//组件销毁aboutToDisappear(){this.listener.off('change',this.onOrientationChange);}

数据懒加载

当列表加载的数据过大时，间接驳回循环渲染方式，造成页面启动期间过长，可以经常使用LazyForEach组件启动数据的懒加载启动优化，按需加载数据并创立相应组件。

定义一个类并成功IDataSource接口：

exportclassYearDataimplementsIDataSource{privatelist:number[]=[]privatelistener:>import{YearData}from'../datasource/YearData'private>LazyForEach(this.data,(item:string)=>{ListItem(){Row(){Text(item).fontSize(20).margin({left:10})}}.onClick(()=>{this.data.pushData('itemvalue:'+this.data.totalCount())})},item=>item)}

总结

想了解更多关于开源的内容，请访问：

51CTO鸿蒙开发者社区

openharmony和鸿蒙的关系

OpenHarmony是鸿蒙操作系统的一个开源版本。 OpenHarmony是华为鸿蒙开源和发展的新阶段的重要产物，OpenHarmony的代码是完全开源的。 鸿蒙是华为公司开发的一款面向全场景的分布式操作系统，鸿蒙创造了一个超级虚拟终端互联的世界，将人、设备、场景有机地联系在一起，实现了极速发现、极速连接、硬件互助、资源共享，用合适的设备提供场景体验。

harmony os是什么系统

展示机型：华为P40系统版本：HarmonyOS 2.0.0.127 harmony os是鸿蒙系统。 华为鸿蒙系统（HUAWEI HarmonyOS），是华为在2019年8月9日于东莞举行华为开发者大会，正式发布的操作系统鸿蒙OS。 HarmonyOS是华为基于开源项目OpenHarmony开发的面向多种全场景智能设备的商用版本。 华为鸿蒙系统是一款全新的面向全场景的分布式操作系统，创造一个超级虚拟终端互联的世界，将人、设备、场景有机地联系在一起，将消费者在全场景生活中接触的多种智能终端实现极速发现、极速连接、硬件互助、资源共享，用合适的设备提供场景体验。 2021年6月2日晚，华为正式发布HarmonyOS 2及多款搭载HarmonyOS 2的新产品。 7月29日，华为Sound X音箱发布，是首款搭载HarmonyOS 2的智能音箱。