在搭建完鸿蒙开发环境后，可以编写一些简单的页面程序来快速上手，开启鸿蒙开发之旅。这里主要对openharmony与DAYU200开发板的新手使用进行讲解。

开发环境

DevEco Studio版本：DevEco Studio 3.1 Release

HarmonyOS SDK版本：3.1.0（API version 9）

DAYU200.4.0.10.16

项目介绍

功能描述：

我们基于OpenHarmony开发一个专门的应用端来帮助脑卒中患者更好地管理上肢康复过程。旨在为脑卒中患者提供全面的康复辅助和健康管理。

主要功能：

康复计划管理：应用端允许用户创建个性化的康复计划，根据医生的建议和康复进度进行调整。用户可以轻松追踪自己的康复目标，记录进展并定时提醒康复运动。

康复训练评估：应用通过系统采集患者康复运动数据，对肢体进行误差评估，形成康复等级和康复报告。这些数据将被可视化呈现，以便用户和医生更好地了解康复情况。

平台交流和资源分享：卒中管家建立了一个平台，患者可以在这里获取配套资源课程进行康复，能和其他患者、医师进行交流，并获得他人的支持和鼓励。

数据安全和隐私：应用将用户的健康数据存储在安全的云端服务器上，确保数据的隐私和保密性。用户完全掌握自己的数据，并可以选择与医生共享以获得更好的医疗建议。

主要开发内容

01登录

启动器后首先是登录界面，能够实现账号登陆、账号注册及其他登录方式。主要由文本、文本框、按钮组成。

Text("欢迎登陆")   .fontSize(60).fontWeight(FontWeight.Bold)   .fontColor('\#85caf9').position({x:110,y:-240})  TextInput({ placeholder: "请输入账号" })   .width(440).height(40)   .backgroundColor('\#fffff')   . placeholderColor(Color.Grey)   .position({x:20,y:-80 })  TextInput({ placeholder: "请输入密钥" })   .width(440).height(40)   . placeholderColor(Color.Grey)   .backgroundColor('\#fffff')   .type(InputType.Password)   .position({x:20,y:-30 })  //按钮  Button("登录")   .width(440).height(50)   .position({x:20,y:20 })   .fontWeight(FontWeight.Bold).fontSize(25)   .backgroundColor('\#85caf9')   .onClick(() =\> {   router.pushUrl({   url: 'pages/tabbar'   })   })  Button("注册")   .width(400).height(40)   .position({x:40,y:80 })   .fontWeight(FontWeight.Normal)   .fontColor('\#4264b2').fontSize(20)   .backgroundColor('\#fffff')   .onClick(() =\> {   router.pushUrl({   url: 'pages/zhuce'   })   })

Checkbox()  Text("已阅读并同意使用服务协议和隐私保护指引")   .fontSize(16).fontColor('\#4264b2')更换其他方式进行登录或找回密钥。Text("-----其他登陆方式-----")   .fontSize(15).width(170).height(100)   .position({x:155,y:230 })   .fontColor('\#4264b2')  Column() {   Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {   Text('手机号登录')   .fontColor('\#4264b2')   Divider().vertical("true").margin(20).height(15)   Text('找回密钥')   .fontColor('\#4264b2')   Divider().vertical("true").margin(20).height(15)   Text('其他方式登录')   .fontColor('\#4264b2')

02修改地址

这部分代码是在前端应用中创建一个Select,用于实现修改地址的功能。

Select([{value:'郑州',icon: "/common/yuan.png"},   {value:'北京',icon: "/common/2.png"},   {value:'杭州',icon: "/common/3.png"},   {value:'上海',icon: "/common/4.png"}])   .selected(30).value('城市')   .font({size: 20, weight:400, family: 'serif', style: FontStyle.Normal })   .selectedOptionFont({size: 20, weight: 500, family: 'serif', style: FontStyle.Normal })   .optionFont({size: 20, weight: 400, family: 'serif', style: FontStyle.Normal })   .onSelect((index:number)=\>{   console.info("Select:" + index)   }).position({ x: 0, y: 15 })

03自定康复方案

这段代码的目的是丰富数据，当点击按钮时，弹出一个文本选择对话框，用户可以从中选择日期，进行时间记录，便于后期清晰展示数据。选择的结果会通过回调函数进行处理。

DatePicker({   start: new Date('1970-1-1'),   end: **new** Date('2100-1-1'),   selected: **this**.selectedDate,   })   .lunar(this.isLunar)   .onChange((value: DatePickerResult) =\> {   this.selectedDate.setFullYear(value.year, value.month, value.day)   console.info('select current date is: ' + JSON.stringify(value))   })  }

然后设置修改康复训练进度，进行康复进度记录，手动输入数据，患者可以在滑动中体验交互趣味

Text('总进度').fontSize(20).fontColor('\#666666').fontWeight(FontWeight.Bold).margin({left :-180}) Row() { Slider({ value: **this**.inSetValue, step: 10, style: SliderStyle.InSet }) .blockColor('\#fffff').trackColor('\#fffff') .selectedColor('\#d6edf6').showSteps(**true**) .onChange((value: number, mode: SliderChangeMode) =\> { **this**.inSetValue = value; console.info('value:' + value + 'mode:' + mode.toString()); })

04康复训练与评估

首先患者可以选择适合的训练课程、预览课程大纲后开始训练。训练完毕后会反馈标准康复动作和患者动作的实时对比，最后根据训练运动数据对比生成相应的等级和评估报告，患者也可以在主页查看历史评估报告。

Video({   src: **this**.videoSrc,   previewUri: **this**.previewUri,   currentProgressRate: **this**.curRate,   controller: **this**.controller  })

这段代码主要实现了一个设备校准界面，主要用于动作识别，更精准获取患者动作数据。内容包括显示动作识别标题、提示信息，以及一个包含视频动画和控制按钮的界面。用户可以通过按钮控制动画的播放、结束。图像动画通过VedioCreateCom组件实现，根据按钮的点击事件改变动画状态和参数。

Text('动作识别').fontWeight(FontWeight.Bold).fontSize(30).margin({top : 100,left: 30})  Text('请面向屏幕根据视频依次做动作').fontSize(20).margin({top :10,left: 30})  Column({space:30}) {   Video({   src: **this**.videoSrc,   previewUri: **this**.previewUri,   currentProgressRate: **this**.curRate,   controller: **this**.controller   })   .width(400)  .height(200)   .autoPlay(**this**.isAutoPlay)   .controls(**this**.showControls)   .onStart(() =\> {   console.info('onStart')   })   .onFinish(() =\> {   console.info('onFinish')   })   Row({space:100}) {   Button('开始').backgroundColor('\#b4dbed')   .onClick(() =\> {   **this**.controller.start() // 开始播放   }).margin(5)   //.backgroundColor('\#b4dbed')   Button('结束').backgroundColor('\#b4dbed')   .onClick(() =\> {   **this**.controller.stop() // 结束播放   }).margin(5)   }.margin({ top: -20})  }

新手开发注意事项

01配置DAYU200环境

1.创建项目工程

图1 创建项目

搭载好HarmonyOS的开发环境后，创建一个项目，注意检查API和DAYU200开发板是否更新。这里选用的为FA模型。

2.下面就是修改相应的配置环境

图2 修改环境

修改完毕后点击右上角蓝色文字“Sync Now”。出现弹窗后点击“Yes”即修改环境成功。

3. 连接开发板

图3 连接开发板

将DAYU200开发板连接至电脑，右上角会显示开发板编码，即连接成功。

4.建立Hap(s)包

图4 建立Hap(s)包

在上方操作栏找到“Build”建立Hap(s)包。另外不要忘记签名哦。

5. 签名

图5 建立Hap(s)包

点击右上角头像，出现签名方式。

做完以上操作就可以正常烧录至DAYU200开发板了。

02横屏与竖屏的切换

1.修改手机预览器尺寸

预览器尺寸

图6 预览器尺寸

开发中使用的是默认大小的手机预览器，我们可以点击上方按钮更改预览器的尺寸。Default是竖屏的尺寸，需要调整横屏选择“Tablet”。

调整预览器尺寸

图7 调整预览器尺寸

第一个红框Profile ID可以进行自行命名，第二个红框为长和宽的数值。DPI为整体缩放，一般情况不需要调整。

2.修改代码

竖屏切换横屏

图8 竖屏切换横屏

在左侧点击config.json，找到“unspecified”,更改为“landscape”。

完成以上操作便可以实现竖屏和横屏的切换。在调整预览器尺寸的时候，要及时烧录到设备上进行查看，不断调整到最合适的比例。

03跳转页面

新建页面

图9 新建页面

首先先新建一个页面，此时我们有两个页面。

页面命名

命名为“denglu”

图10 页面命名

跳转代码

图11 跳转代码

在原来的页面输入画框内的两部分代码，即可完成简单页面跳转。注意，pages后为跳转页面名字。

跳转示范

图12 跳转示范

学会基础跳转便可以实现多个页面交互了。比如点击按钮-跳转页面。

项目效果展示

效果展示，基于openharmony开发的上肢外骨骼-部分页面

图13 项目效果展示

04视频播放

参考官方说明文档：https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-media-components-video-0000001333641101

视频文件夹

图14 视频文件夹

首先将需要的视频放在rawfile下面。

需要注意的是，在预览中不显示视频，烧录至设备中才会播放视频。

图15 视频烧录演示

视频名称

和导入图片方法，复制需要的视频至rawfile即可。

图16 视频名称

视频装饰器

导入官方代码后，需要修改videoSrc、previewUri格式名，也就是视频素材的名字。

图17 视频装饰器

视频src

原始代码，不需要改。其中.width和.heigh用来改变视频在屏幕上的大小。

图18 视频scr

视频播放按钮前置

图19 视频播放按钮前置

视频播放按钮

视频播放控制按钮代码。

图20 视频播放按钮

视频播放速度

图21 视频播放速度

展望

随着5G、物联网等技术的快速发展，分布式操作系统市场前景广阔。作为一款新兴操作系统，HarmonyOS有望成为未来科技领域的重要力量。鸿蒙开发技术也为开发者带来了前所未有的机遇和挑战。

在这个充满创新的时代，作为开发者，我们应愈战愈勇，探索世界的无限可能。

最后

为了帮助大家更深入有效的学习到鸿蒙开发知识点，我特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源， 内容包含了：【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

欢迎大家关注头条【鸿蒙码牛天堂】，回复【666】，获取以上最新鸿蒙学习资料以及视频学习教程。

如果我的文章对你有所帮助，还请帮忙点赞、好评、转发一下，你的支持会激励我输出更高质量的文章，非常感谢！