了解更多开源请访问：开源基础软件社区https://ost.51cto.com1.环境开发板：DAYU200系统版本：OpenHarmony3.2.2.3SDK版本：ohos-sdk3.2.2.3开发工具：DevEcoStudio3.0.0.900(ForOpenHarmony)II.知识点和例子图三。核心代码1.Swiper容器（Swiper）是为子组件提供切换的能力，除了当前激活的索引值组件外，其他组件都是隐藏的。图片轮播、内容轮播等使用场景。简单示例(swiperSimple.ets)@Entry@ComponentstructSwiperSimple{privateswiperCtr:SwiperController=newSwiperController();build(){//Swiper(value:{controller?:SwiperController})//controller绑定到组件上定义一个controller来控制组件翻页Swiper(this.swiperCtr){Text('1').fontSize(100).fontColor(Color.White).backgroundColor(Color.Blue).width('100%').height('100%').textAlign(TextAlign.Center)Text('2').fontSize(100).fontColor(Color.White).backgroundColor(Color.Red).width('100%')。height('100%').textAlign(TextAlign.Center)Text('3').fontSize(100).fontColor(Color.White).backgroundColor(Color.Green).width('100%').height('100%').textAlign(TextAlign.Center)Text('4').fontSize(100).fontColor(Color.White).backgroundColor(Color.Orange).width('100%').height('100%').textAlign(TextAlign.Center)}.width('100%').height('100%').index(2)//当前激活状态下子组件的索引值，从0开始.autoPlay(false)//是否播放playautomatically.loop(true)//是否循环播放。vertical(true)//是否垂直滑动。indicatorStyle({size:20,//导航点的直径selectedColor:Color.White//选中的导航点的颜色})}}详见：Swiper滑动容器组件2.Stack容器(Stack)堆栈容器，即将子组件堆叠在一起，并以后进先出的方式显示在UI中。可以理解为把东西放在盒子里，盒子里的最后一个在最上面一层。使用场景如首页倒计时跳转、页面悬浮按钮等。简单示例(stackSimple.ets)@Entry@ComponentstructStackSimple{build(){Flex({direction:FlexDirection.Column}){//Stack(value:{alignContent?:Alignment})//alignContent:Alignment默认center设置子组件在容器中的对齐方式，可以默认//设置子组件在容器中的对齐方式为默认，即居中对齐Stack(){Text('第一个子组件').width('100%').height(300).fontSize(50).fontColor(Color.White).backgroundColor(Color.Grey)Text('第二个子组件').width('50%').height(100).fontSize(50).fontColor(Color.White).backgroundColor(Color.Blue)}.layoutWeight(1).border({width:2,style:BorderStyle.Solid,color:Color.Red})//设置sub的对齐方式容器中组件的顶部对齐Stack({alignContent:Alignment.Top}){Text('第一个子组件').width('100%').height(300).fontSize(50)。fontColor(Color.White).backgroundColor(Color.Grey)Text('第二个子组件').width('100%').height(100).fontSize(50).fontColor(Color.White).backgroundColor(Color.Blue)}.layoutWeight(1).border({width:2,style:BorderStyle.Solid,color:Color.Green})//设置子组件在容器中的对齐方式为底部对齐Stack({alignContent:Alignment.Bottom}){Text('第一个子组件').width('100%').height(300).fontSize(50).fontColor(Color.White).backgroundColor(Color.Gray)Text('第二个子组件').width('100%').height(100).fontSize(50).fontColor(Color.White).backgroundColor(Color.Blue)}.layoutWeight(1)。border({width:2,style:BorderStyle.Solid,color:Color.Orange})}.width('100%').height('100%').padding(14)}}详见：Stack堆叠容器组件3.图片组件（Image）和文字组件一样，图片组件也是最常用的组件。文本组件用于渲染文本，而图像组件用于渲染和显示图像。用户头像、文章封面、书籍封面等使用场景。简单示例(imageSimple.ets)@Entry@ComponentstructImageSimple{build(){Column({space:10}){//Image(value:{uri:string|PixelMap})//uri:图像uri,支持本地图片和网络图片路径Image($r('app.media.icon')).alt('加载时显示的展台图片,支持本地图片和网络路径').objectFit(ImageFit.Contain)//设置图片的缩放类型.objectRepeat(ImageRepeat.NoRepeat)//设置图片的重复样式.layoutWeight(1)Image($r('app.media.icon')).objectFit(ImageFit.Contain).objectRepeat(ImageRepeat.NoRepeat).layoutWeight(1)}.width('100%').height('100%')}}详见：图片组件。4.按钮组件（Button）按钮组件也是最常用的组件之一。按钮组件用于为用户提供明显的交互效果。数据提交、跳转页面等使用场景。简单示例(buttonSimple.ets)@Entry@ComponentstructButtonSimple{build(){Column({space:10}){//Button(options?:{type?:ButtonType,stateEffect?:boolean})//type描述按钮样式//stateEffect是否启用按钮按下时的切换效果Button({type:ButtonType.Normal}){Row(){Image($r('app.media.icon')).width(64).height(64).margin({left:12})Text('Logo').fontSize(50).fontColor(Color.White).margin({left:5,right:12})}.alignItems(VerticalAlign.Center)}.backgroundColor(Color.Blue).width('90%').height(120)//按钮(label?:options?:{type?:ButtonType,stateEffect?:boolean})//标签按钮文字内容Button('Thisisacapsulebutton',{type:ButtonType.Capsule}).fontSize(50).fontColor(Color.White).backgroundColor(Color.Red).width('90%').height(120)Button('+',{type:ButtonType.Circle}).fontSize(100).fontColor(Color.White).backgroundColor(Color.Green).width(120).height(120)}.width('100%').height('100%').margin({top:20})}}详见:Button按钮组件5.路由（Router）路由是页面间跳转的常用API。需要在页面中引入路由模块。importrouterfrom'@ohos.router'，常用router.push跳转到应用内的指定页面。简单示例(routerSimple.ets)importrouterfrom'@ohos.router';@Entry@ComponentstructRouterSimple{build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Button('跳转到主页').width(300).height(50).fontSize(25).onClick(()=>{router.push({url:'pages/index'})})}.width('100%').height('100%')}}注意：跳转页面必须是在js中配置的页面->config.json的pages。详见：路由器。6、使用缓存（Storage）实现第一次打开加载，再次打开不加载简单示例（storageSimple.ets）importdataStoragefrom'@ohos.data.storage';importfeatureAbilityfrom'@ohos.ability.featureAbility';@Entry@ComponentstructStorageSimple{@StatestorageStr:字符串='';私有存储文件名='/mystore';私人背景；build(){Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Text(`缓存值：${this.storageStr}`).fontSize(25).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).height(200)Button('Saveincache').fontSize(25).fontColor(Color.White).backgroundColor(Color.Blue).width('90%').height(120).onClick(()=>{this.context.getFilesDir((err,path)=>{console.log('getFilesDirerr:'+JSON.stringify(err));if(err.code){console.info("获取存储失败，路径："+path+this.storageStr)ret瓮;}console.info('getFilesDir成功。路径：'+JSON.stringify(path));让storage=dataStorage.getStorageSync(path+this.storageStr);storage.putSync('用户名','bxming')storage.flushSync();})})Button('获取存储').fontSize(25).fontColor(Color.White).backgroundColor(Color.Red).width('90%').height(120).margin({top:10}).onClick(()=>{this.context.getFilesDir((err,path)=>{console.log('getFilesDirerr:'+JSON.stringify(err));if(err.code){console.info("获取存储失败,path:"+path+this.storageStr)return;}console.info('getFilesDirsuccessful.path:'+JSON.stringify(path));letstorage=dataStorage.getStorageSync(path+this.storageStr);letvalue=storage.getSync('username','default')this.storageStr=value.toString();})})}.height('100%').width('100%')}aboutToAppear(){this.context=featureAbility.getContext();}}详见：Storage轻量级存储4、欢迎页面的实现使用第3节介绍的容器和组件搭建一个完整的页面。代码如下：@Entry@ComponentstructWelcome{privateswiperCtr:SwiperController=newSwiperController();build(){Swiper(this.swiperCtr){图片($r('app.media.w01')).objectFit(ImageFit.Fill)图片($r('app.media.w02')).objectFit(ImageFit.Fill)Image($r('app.media.w03')).objectFit(ImageFit.Fill)Stack({alignContent:Alignment.Bottom}){Image($r('app.media.w04')).objectFit(ImageFit.Fill)Button('GetStarted',{type:ButtonType.Normal}).width(200).fontSize(22).borderRadius(12).padding({top:16,bottom:16})。backgroundColor(0x567754).margin({bottom:60})}}.width('100%').height('100%').indicatorStyle({size:20,selectedColor:Color.Orange})}}注意：所有素材均来自图2【木什么】，用于演示示例，如有侵权，请联系我删除。欢迎页面是对应用的简要说明，如发布的新功能、需要解决的主要问题等，为了满足用户友好的特性，需要在首次打开应用时显示App首次安装或更新后的时间，其他状态不显示。需要使用storage轻量级存储进行标记，在app启动时判断标记是否为初始值（如true）。如果是初始值，则显示欢迎页面，否则不显示欢迎页面。显示欢迎页面后，点击【开始】，将初始值改为其他（如false）。五、小结通过实例，掌握了最新的系统镜像编程、SDK配置，以及一些基本的组件、容器、接口的使用。看演示效果：OpenHarmonyApp起始页和欢迎页。附录[A]大鱼系统升级到OpenHarmony3.2.2.3第一步：从每日构建下载形状组件为dayu200、构建状态为成功的镜像包。第二步：解压镜像包，将压缩包中的文件复制到事先准备好的HiHope_DAYU200文件夹下的images文件夹中（没有这个文件也可以创建）。注意：烧录工具、使用说明等需要通过git、HiHopeIOT仓库从仓库获取。第三步：给DAYU200开发板上电，通过USB连接电脑（记得安装DriverAssitant，在烧录工具和向导里面）。步骤4打开编程工具（位于编程工具和指南中）。注：最新的烧录方法参见润和软件HiHope的DAYU200最新OpenHarmony系统烧录教程。[B]使用最新的SDK打开DevEcoStudio3.0.0.900(ForOpenHarmony)创建工程后，点击运行出现AppLaunch:Thehdc_stdversionoftheSDKdoesnotmatchthehdcdversionofthedevice.说明hdc_std的版本不一致，需要将DevEcoStudio的hdc_std改成最新版本。步骤1从dailybuild下载最新的ohos-sdk。步骤2解压并复制相关文件到DevEcoStudioSDK文件夹中。注意：复制时，先关闭DevEcoStudio，复制到Toolchains->3.1.5.5。Step3启动DevEcoStudio，运行项目，查看应用是否可以直接安装到设备上。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
