梅科爾工作室HOS-鴻蒙入門應用開發實戰分享

作者：梅科爾黃佳琪 2024-02-19 15:59:52

系統 OpenHarmony

在搭建完鴻蒙開發環境后，可以編寫一些簡單的頁面程序來快速上手，開啟鴻蒙開發之旅。這里主要對openharmony與DAYU200開發板的新手使用進行講解。

想了解更多關于開源的內容，請訪問：

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