更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com1.开发前的准备工欲善其事，必先利其器。首先要准备好相关的开发环境。（可能大部分开发者都已经准备好了开发环境，这里只做一个概览）1.DevEcoStudio下载安装DevEcoStudio软件下载地址DevEcoStudio官方安装指南地址2.预览eTS相关组件指导文档OpenharmonyTS-baseddeclarativedevelopmentparadigm指导文档地址2.新建工程1.基本步骤打开DevEcoStudio，按照“File>New>NewProject...”步骤新建工程下图。选择适当的项目选项并单击“下一步”。2、完成项目命名、开发语言选择（我们可以选择eTS）、API版本等项目相关配置。3、正式开发1、检查项目目录结构，预览运行结果。我们写UI界面的主文件是“···>入口>src>main>ets>default>pages>···.ets”。如果要添加页面，如下图。将鼠标移动到“页面”，右击，点击“>新建>eTS页面”，为新界面命名。使用预览器预览结果界面。如果结果如下图正常，则证明环境没有问题。2.代码分析上面的工程创建后，页面只显示“HelloWorld”文字。接下来我们要做的就是根据openharmony的基于TS扩展的声明式开发范式指导文档设计相关的UI界面。从下图不难看出，我们之前使用的是指导文档中的Flex容器组件和Text组件，所以我们可以根据指导文档提供的组件进行更多的开发。3.代码编写在看懂开发文档的基础上继续添加更多的组件。由于是介绍，本文仅对个别组件进行详细说明。(1).文本组件参考：文本组件文档接口：Text(content?:string)从接口参数我们可以看出，Text组件只有一个字符串参数为文本内容，也就是我们上面看到的“Helloworld”短信。以下关键字如.width().height()是相关的属性。我们可以举出如下例子：Text('HelloWorlddddddddddddddddddd')//设置文本对齐方式.textAlign(TextAlign.Center)//设置文本的最大行数，这是设置超长文本的基本条件displaymethod.maxLines(1)//设置文本过长时的显示方式（None/Clip/Ellipsis）.textOverflow({overflow:TextOverflow.Ellipsis})//设置文本行height.lineHeight('100')//设置文字装饰线样式和Color，代码样式为：underline,red.decoration({type:TextDecorationType.Underline,color:Color.Red})//这条线距下边框的距离，term:文本的偏移量baseline.baselineOffset('10')//设置文本的大小写，不管原来的内容，统一为这里配置的样式textCase(TextCase.UpperCase)//设置文本size.fontSize(20)//Fontweight.fontWeight(FontWeight.Bold)以上代码，运行结果如下：(2).按钮组件参考：按钮组件文档接口一：Button(options?:{type?:ButtonType,stateEffect?:boolean})接口二：Button(label?:string,options?:{type?:ButtonType,stateEffect?:boolean})首先，我们使用接口1测试主要属性：//第一种---无文字圆形按钮//类型：按钮形状类型（按钮样式）Button({type:ButtonType.Circle}).width('50').height('50')//按钮圆角.borderRadius(10)//设置按钮背景色，默认blue.backgroundColor('#000')//buttonborder.border({width:1})//buttonbordercolor.borderColor('#0AFF00')//distanceLeftdistance.margin({left:100})//clickevent.onClick((event:ClickEvent)=>{AlertDialog.show({title:'clickevent',message:'clicked'})})上面的效果按钮如下：接下来我们使用界面2来测试两个界面的不同使用方法：//第二种---带文字的方形按钮//按钮文字可以直接写在界面中，也可以嵌入在Button中的Text组件集使用//1，直接写在界面中，界面2中的“label”属性Button('button1',{type:ButtonType.Normal}).width(90).height(40)//为了让这个按钮和上面的按钮不一样，它的topmargin可以设置.margin({top:20})//2,嵌套Text组件Button({type:ButtonType.Normal}){//可以自己设置文字样式Text('Button2').fontSize(16).fontColor('#FFF')}.width(90).height(40).margin({top:20})以上代码，显示效果如下：4.本次分享思路总结本次分享指导想学习ArkUI_eTS的朋友入门，这也是我在学习过程中总结的一些关键知识。可能还有很多知识点没有列出来，但是我觉得只要掌握了阅读文档的技巧，相信大家可以快速成为ArkUI开发者。在没有找到openharmony的TS-basedextension-baseddeclarativedevelopmentparadigm指导文档的时候，我对ArkUI也是一头雾水。最后希望大家能够掌握阅读指导文档的技巧。附上本次分享的全部代码：@Entry@ComponentstructIndex{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('HelloWorlddddddddddddddddd')//Setthetextalignment.textAlign(TextAlign.Center)//设置文本的最大行数，这是设置超长文本显示方式的基本条件。maxLines(1)//设置显示方式时文本过长（None/Clip/Ellipsis）.textOverflow({overflow:TextOverflow.Ellipsis})//设置文本行高.lineHeight('100')//设置文本装饰线样式和颜色，这段代码样式为:underline,red.decoration({type:TextDecorationType.Underline,color:Color.Red})//这条线距离下边框的距离，term：文字的偏移量baseline.baselineOffset('10')//设置文字大小写，不管原来的内容都会统一配置这个地方的样式.textCase(TextCase.UpperCase)//设置文字大小.fontSize(20)//Fontweight.fontWeight(FontWeight.Bold)//第一种---无文字圆形按钮//类型：按钮形状类型（按钮样式）Button({type:ButtonType.Circle}).width('50').height('50')//按钮圆角.borderRadius(10)//设置按钮背景色，默认蓝色.backgroundColor('#000')//buttonborder.border({width:1})//buttonbordercolor.borderColor('#0AFF00')//到左边的距离.margin({left:100})//Clickevent.onClick((event:ClickEvent)=>{AlertDialog.show({title:'clickevent',message:'clicked'})})//第二种---带文字的方形按钮//Button界面中可以直接写text，Text组件也可以嵌套在Button中//1，直接写在界面中，界面2中的“label”属性Button('Button1',{type:ButtonType.Normal}).width(90).height(40)//为了区别这个按钮和上面的按钮，可以设置它的topmargin.margin({top:20})//2.NestedText组件Button({type:ButtonType.Normal}){//可以自己设置文字样式Text('Button2').fontSize(16).fontColor('#FFF')}.width(90).height(40).margin({top:20})}.width('100%').height('100%')}}更多内容请访问：鸿蒙科技社区，与华为官方共建https://harmonyos.51cto.com
