梅科爾工作室HOS-鴻蒙入門應(yīng)用開發(fā)實(shí)戰(zhàn)分享
開發(fā)環(huán)境
DevEco Studio版本：DevEco Studio 3.1 Release
HarmonyOS SDK版本：3.1.0（API version 9）
DAYU200.4.0.10.16
前言
在搭建完鴻蒙開發(fā)環(huán)境后，可以編寫一些簡單的頁面程序來快速上手，開啟鴻蒙開發(fā)之旅。這里主要對openharmony與DAYU200開發(fā)板的新手使用進(jìn)行講解。
1、項(xiàng)目介紹
（1）功能描述
我們基于OpenHarmony開發(fā)一個專門的應(yīng)用端來幫助腦卒中患者更好地管理上肢康復(fù)過程。旨在為腦卒中患者提供全面的康復(fù)輔助和健康管理。
主要功能：
康復(fù)計劃管理：應(yīng)用端允許用戶創(chuàng)建個性化的康復(fù)計劃，根據(jù)醫(yī)生的建議和康復(fù)進(jìn)度進(jìn)行調(diào)整。用戶可以輕松追蹤自己的康復(fù)目標(biāo)，記錄進(jìn)展并定時提醒康復(fù)運(yùn)動。
康復(fù)訓(xùn)練評估：應(yīng)用通過系統(tǒng)采集患者康復(fù)運(yùn)動數(shù)據(jù)，對肢體進(jìn)行誤差評估，形成康復(fù)等級和康復(fù)報告。這些數(shù)據(jù)將被可視化呈現(xiàn)，以便用戶和醫(yī)生更好地了解康復(fù)情況。
平臺交流和資源分享：卒中管家建立了一個平臺，患者可以在這里獲取配套資源課程進(jìn)行康復(fù)，能和其他患者、醫(yī)師進(jìn)行交流，并獲得他人的支持和鼓勵。
數(shù)據(jù)安全和隱私：應(yīng)用將用戶的健康數(shù)據(jù)存儲在安全的云端服務(wù)器上，確保數(shù)據(jù)的隱私和保密性。用戶完全掌握自己的數(shù)據(jù)，并可以選擇與醫(yī)生共享以獲得更好的醫(yī)療建議。
2、主要開發(fā)內(nèi)容
（1）登錄
啟動器后首先是登錄界面，能夠?qū)崿F(xiàn)賬號登陸、賬號注冊及其他登錄方式。主要由文本、文本框、按鈕組成。
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("已閱讀并同意使用服務(wù)協(xié)議和隱私保護(hù)指引")
.fontSize(16).fontColor('\#4264b2')
更換其他方式進(jìn)行登錄或找回密鑰。
Text("-----其他登陸方式-----")
.fontSize(15).width(170).height(100)
.position({x:155,y:230 })
.fontColor('\#4264b2')
Column() {
Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
Text('手機(jī)號登錄')
.fontColor('\#4264b2')
Divider().vertical("true").margin(20).height(15)
Text('找回密鑰')
.fontColor('\#4264b2')
Divider().vertical("true").margin(20).height(15)
Text('其他方式登錄')
.fontColor('\#4264b2')（2）修改地址
這部分代碼是在前端應(yīng)用中創(chuàng)建一個Select,用于實(shí)現(xiàn)修改地址的功能。
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）自定康復(fù)方案
這段代碼的目的是豐富數(shù)據(jù)，當(dāng)點(diǎn)擊按鈕時，彈出一個文本選擇對話框，用戶可以從中選擇日期，進(jìn)行時間記錄，便于后期清晰展示數(shù)據(jù)。選擇的結(jié)果會通過回調(diào)函數(shù)進(jìn)行處理。
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))
})
}然后設(shè)置修改康復(fù)訓(xùn)練進(jìn)度，進(jìn)行康復(fù)進(jìn)度記錄，手動輸入數(shù)據(jù)，患者可以在滑動中體驗(yàn)交互趣味
Text('總進(jìn)度').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）康復(fù)訓(xùn)練與評估
首先患者可以選擇適合的訓(xùn)練課程、預(yù)覽課程大綱后開始訓(xùn)練。訓(xùn)練完畢后會反饋標(biāo)準(zhǔn)康復(fù)動作和患者動作的實(shí)時對比，最后根據(jù)訓(xùn)練運(yùn)動數(shù)據(jù)對比生成相應(yīng)的等級和評估報告，患者也可以在主頁查看歷史評估報告。
Video({
src: **this**.videoSrc,
previewUri: **this**.previewUri,
currentProgressRate: **this**.curRate,
controller: **this**.controller
})這段代碼主要實(shí)現(xiàn)了一個設(shè)備校準(zhǔn)界面，主要用于動作識別，更精準(zhǔn)獲取患者動作數(shù)據(jù)。內(nèi)容包括顯示動作識別標(biāo)題、提示信息，以及一個包含視頻動畫和控制按鈕的界面。用戶可以通過按鈕控制動畫的播放、結(jié)束。圖像動畫通過VedioCreateCom組件實(shí)現(xiàn)，根據(jù)按鈕的點(diǎn)擊事件改變動畫狀態(tài)和參數(shù)。
Text('動作識別').fontWeight(FontWeight.Bold).fontSize(30).margin({top : 100,left: 30})
Text('請面向屏幕根據(jù)視頻依次做動作').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('結(jié)束').backgroundColor('\#b4dbed')
.onClick(() =\> {
**this**.controller.stop() // 結(jié)束播放
}).margin(5)
}.margin({ top: -20})
}3、新手開發(fā)注意事項(xiàng)
（1）配置DAYU200環(huán)境
圖1 創(chuàng)建項(xiàng)目
搭載好HarmonyOS的開發(fā)環(huán)境后，創(chuàng)建一個項(xiàng)目，注意檢查API和DAYU200開發(fā)板是否更新。這里選用的為FA模型。
圖2 修改環(huán)境
修改完畢后點(diǎn)擊右上角藍(lán)色文字“Sync Now”。出現(xiàn)彈窗后點(diǎn)擊“Yes”即修改環(huán)境成功。
圖3 連接開發(fā)板
將DAYU200開發(fā)板連接至電腦，右上角會顯示開發(fā)板編碼，即連接成功。
圖4 建立Hap(s)包
在上方操作欄找到“Build”建立Hap(s)包。另外不要忘記簽名哦。
圖5 建立Hap(s)包
點(diǎn)擊右上角頭像，出現(xiàn)簽名方式。
做完以上操作就可以正常燒錄至DAYU200開發(fā)板了。
（2）橫屏與豎屏的切換
預(yù)覽器尺寸：
圖6 預(yù)覽器尺寸
開發(fā)中使用的是默認(rèn)大小的手機(jī)預(yù)覽器，我們可以點(diǎn)擊上方按鈕更改預(yù)覽器的尺寸。Default是豎屏的尺寸，需要調(diào)整橫屏選擇“Tablet”。
調(diào)整預(yù)覽器尺寸：
圖7 調(diào)整預(yù)覽器尺寸
第一個紅框Profile ID可以進(jìn)行自行命名，第二個紅框?yàn)殚L和寬的數(shù)值。DPI為整體縮放，一般情況不需要調(diào)整。
豎屏切換橫屏：
圖8 豎屏切換橫屏
在左側(cè)點(diǎn)擊config.json，找到“unspecified”,更改為“l(fā)andscape”。
完成以上操作便可以實(shí)現(xiàn)豎屏和橫屏的切換。在調(diào)整預(yù)覽器尺寸的時候，要及時燒錄到設(shè)備上進(jìn)行查看，不斷調(diào)整到最合適的比例。
（3）跳轉(zhuǎn)頁面
圖9 新建頁面
首先先新建一個頁面，此時我們有兩個頁面。
命名為“denglu”：
圖10 頁面命名
跳轉(zhuǎn)代碼：
圖11 跳轉(zhuǎn)代碼
在原來的頁面輸入畫框內(nèi)的兩部分代碼，即可完成簡單頁面跳轉(zhuǎn)。注意，pages后為跳轉(zhuǎn)頁面名字。
跳轉(zhuǎn)示范：
圖12 跳轉(zhuǎn)示范
學(xué)會基礎(chǔ)跳轉(zhuǎn)便可以實(shí)現(xiàn)多個頁面交互了。比如點(diǎn)擊按鈕-跳轉(zhuǎn)頁面。
項(xiàng)目效果展示：
效果展示，基于openharmony開發(fā)的上肢外骨骼-部分頁面。
圖13 項(xiàng)目效果展示
（4）視頻播放
視頻文件夾：
圖14 視頻文件夾
首先將需要的視頻放在rawfile下面。
需要注意的是，在預(yù)覽中不顯示視頻，燒錄至設(shè)備中才會播放視頻。
圖15 視頻燒錄演示
視頻名稱：
和導(dǎo)入圖片方法，復(fù)制需要的視頻至rawfile即可。
圖16 視頻名稱
視頻裝飾器：
導(dǎo)入官方代碼后，需要修改videoSrc、previewUri格式名，也就是視頻素材的名字。
圖17 視頻裝飾器
視頻src：
原始代碼，不需要改。其中.width和.heigh用來改變視頻在屏幕上的大小。
圖18 視頻scr
視頻播放按鈕前置：
圖19 視頻播放按鈕前置
視頻播放按鈕：
視頻播放控制按鈕代碼。
圖20 視頻播放按鈕
視頻播放速度：
圖21 視頻播放速度
4、展望
隨著5G、物聯(lián)網(wǎng)等技術(shù)的快速發(fā)展，分布式操作系統(tǒng)市場前景廣闊。作為一款新興操作系統(tǒng)，HarmonyOS有望成為未來科技領(lǐng)域的重要力量。鴻蒙開發(fā)技術(shù)也為開發(fā)者帶來了前所未有的機(jī)遇和挑戰(zhàn)。
在這個充滿創(chuàng)新的時代，作為開發(fā)者，我們應(yīng)愈戰(zhàn)愈勇，探索世界的無限可能。
