梅科尔工作室HOS鸿蒙入门应用开发实战分享

2024年 2月 19日 80.9k 0

想了解更多关于开源的内容,请访问:

51CTO 鸿蒙开发者社区

https://ost.51cto.com

开发环境

DevEco Studio版本:DevEco Studio 3.1 Release

HarmonyOS SDK版本:3.1.0(API version 9)

DAYU200.4.0.10.16

前言

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

1、项目介绍

(1)功能描述

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

主要功能:

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

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

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

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

2、主要开发内容

(1)登录

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

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')

(2)修改地址

这部分代码是在前端应用中创建一个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 })

(3)自定康复方案

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

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());  
 })

(4)康复训练与评估

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

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})  
}

3、新手开发注意事项

(1)配置DAYU200环境

创建项目工程:

图1 创建项目

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

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

图2 修改环境

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

连接开发板:

图3 连接开发板

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

建立Hap(s)包:

图4 建立Hap(s)包

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

签名:

图5 建立Hap(s)包

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

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

(2)横屏与竖屏的切换

修改手机预览器尺寸。

预览器尺寸:

图6 预览器尺寸

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

调整预览器尺寸:

图7 调整预览器尺寸

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

修改代码:

竖屏切换横屏:

图8 竖屏切换横屏

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

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

(3)跳转页面

新建页面:

图9 新建页面

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

页面命名:

命名为“denglu”:

图10 页面命名

跳转代码:

图11 跳转代码

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

跳转示范:

图12 跳转示范

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

项目效果展示:

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

图13 项目效果展示

(4)视频播放

参考官方说明文档:Video-媒体组件-组件-组件参考(基于ArkTS的声明式开发范式)-手机、平板、智慧屏和智能穿戴开发-ArkTS API参考-HarmonyOS应用开发。

视频文件夹:

图14 视频文件夹

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

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

图15 视频烧录演示

视频名称:

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

图16 视频名称

视频装饰器:

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

图17 视频装饰器

视频src:

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

图18 视频scr

视频播放按钮前置:

图19 视频播放按钮前置

视频播放按钮:

视频播放控制按钮代码。

图20 视频播放按钮

视频播放速度:

图21 视频播放速度

4、展望

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

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

想了解更多关于开源的内容,请访问:

51CTO 鸿蒙开发者社区

https://ost.51cto.com

相关文章

服务器端口转发,带你了解服务器端口转发
服务器开放端口,服务器开放端口的步骤
产品推荐:7月受欢迎AI容器镜像来了,有Qwen系列大模型镜像
如何使用 WinGet 下载 Microsoft Store 应用
百度搜索:蓝易云 – 熟悉ubuntu apt-get命令详解
百度搜索:蓝易云 – 域名解析成功但ping不通解决方案

发布评论