開源鴻蒙首款I(lǐng)DE開發(fā)OpenHarmony 3.1 Release應(yīng)用
??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
在工農(nóng)業(yè)生產(chǎn)中，變頻器有著廣泛和深遠(yuǎn)的應(yīng)用，變頻器的控制除了本地操作面板和按鈕，旋鈕控制外，更多是通過上位機(jī)來進(jìn)行遠(yuǎn)程操作和監(jiān)控。
2022年3月30日，OpenHarmony 3.1 Release及配套南向開發(fā)工具DevEco Device Tool 3.0 Release發(fā)布，3月31日發(fā)布了OpenHarmony首款北向應(yīng)用開發(fā)工具 DevEco Studio 3.0 Beta3 for OpenHarmony，支持API 8和API 9，具有以下能力特點(diǎn)：
- 支持一站式的信息獲取平臺(tái)。
- 支持可視化的界面UI開發(fā)。
- 雙向、極速的UI預(yù)覽。
- 全新的編譯工具Hvigor，實(shí)現(xiàn)OpenHarmony應(yīng)用/服務(wù)的一鍵自動(dòng)化構(gòu)建。
- 支持全自動(dòng)化的應(yīng)用簽名機(jī)制，一鍵生成簽名信息，簽名過的HAP可以安裝到真實(shí)設(shè)備上運(yùn)行。
- 高效的代碼編輯，提供代碼高亮、代碼折疊、代碼格式化等各種常用技巧，同時(shí)支持聯(lián)想補(bǔ)齊、代碼跳轉(zhuǎn)、代碼校驗(yàn)等，實(shí)現(xiàn)代碼的高效編輯。
- 預(yù)覽器支持雙向、極速UI預(yù)覽，實(shí)現(xiàn)了應(yīng)用開發(fā)過程的可視化。
- 豐富的代碼調(diào)試調(diào)優(yōu)能力。
讓我們用DevEco Studio 3.0 Beta3 for OpenHarmony，開發(fā)一個(gè)變頻器控制的界面，實(shí)現(xiàn)常見的啟停，正反轉(zhuǎn)，加減速功能，模擬器效果如下。
預(yù)備
Hi3516開發(fā)板，燒錄好OpenHarmony 3.1 Release標(biāo)準(zhǔn)系統(tǒng)，??參考1??，??參考2??
2.安裝OpenHarmony專用開發(fā)工具DevEco Studio 3.0 Beta3 for OpenHarmony??官網(wǎng)文檔??
創(chuàng)建工程
打開應(yīng)用，點(diǎn)擊新建項(xiàng)目，彈窗選擇“Empty Ability”后點(diǎn)擊"Next"
彈出的工程配置里全部默認(rèn)，點(diǎn)擊“finish”完成eTS工程創(chuàng)建。
默認(rèn)API 8,也可以選擇API 9，在3516開發(fā)板上測(cè)試正常運(yùn)行
如果點(diǎn)選“Enable Supper Visual"，會(huì)創(chuàng)建一個(gè)低代碼可視化工程。
工程結(jié)構(gòu)如下
- index.ets：用于描述UI布局、樣式、事件交互和頁(yè)面邏輯。
- app.ets：用于全局應(yīng)用邏輯和應(yīng)用生命周期管理。
- pages：用于存放所有組件頁(yè)面。
- resources：用于存放資源配置文件。
首次使用會(huì)顯示“信息中心”，后續(xù)可以在幫助菜單下選擇“信息中心”。
圖片，代碼，自動(dòng)簽名，聯(lián)機(jī)調(diào)試
將工程中使用到的圖片，添加到resources -> base -> media目錄下。
編輯代碼，打開預(yù)覽器的雙T,可以實(shí)時(shí)雙向預(yù)覽。
完整代碼在codelabs的??SliderApplicationEts??基礎(chǔ)上修改而成。
@Entry
@Component
struct Index {
@State private speed: number = 0
@State private lastspeed: number = 1
@State private imageSize: number = 1.5
@State private fwd_rev: number = 1
@State private angle: number = 0
@State private interval: number = 0
build() {
Column() {
Text("變頻調(diào)速控制")
.fontSize(45)
.fontColor("blue")
.fontWeight(FontWeight.Bold)
.margin({top: 50, bottom:20})
Row() {
Image($r('app.media.fengye'))
.objectFit(ImageFit.Contain)
.height(150)
.width(150)
.position({x: 120,y: 100})
.rotate({x: 0,y: 0,z: this.fwd_rev,angle: this.angle})
.scale({x: this.imageSize,y: this.imageSize})
}
.width(375)
.height(375)
Row() {
Button() {
Text('啟動(dòng)')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({ left: 20 ,right: 20 })
.width('40%')
.height('5%')
.backgroundColor('green')
.onClick(() => {
this.speed = this.lastspeed
})
Button() {
Text('停止')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({ left: 20 ,right: 20 })
.width('40%')
.height('5%')
.backgroundColor('red')
.onClick(() => {
this.speed = 0
})
}
Row() {
Button() {
Text('正轉(zhuǎn)')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({ top: 40,left: 20 ,right: 20 })
.width('40%')
.height('5%')
.backgroundColor('#ffc916dd')
.onClick(() => {
this.fwd_rev = 1
})
Button() {
Text('反轉(zhuǎn)')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({ top: 40,left: 20 ,right: 20 })
.width('40%')
.height('5%')
.backgroundColor('#ffc916dd')
.onClick(() => {
this.fwd_rev = -1
})
}
this.DescribeText('速度：',this.speed * 5)
Slider({value: this.speed, min: 0, max: 10,step: 0.2,style:SliderStyle.OutSet})
.showTips(true)
.blockColor(Color.Red)
.onChange((value: number,mode:SliderChangeMode) => {
this.speed = value
this.lastspeed = this.speed
clearInterval(this.interval)
this.speedChange()
})
Row() {
Button() {
Text('加速')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({ top: 20,left: 20 ,right: 20 })
.width('40%')
.height('5%')
.backgroundColor('#ff00ffd9')
.onClick(() => {
this.speed += 0.2
if (this.speed >= 10) {
this.speed = 10
}
this.lastspeed = this.speed
})
Button() {
Text('減速')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({ top: 20,left: 20 ,right: 20 })
.width('40%')
.height('5%')
.backgroundColor('#ff00ffd9')
.onClick(() => {
this.speed -= 0.2
if (this.speed <= 0) {
this.speed = 0
}
this.lastspeed = this.speed
})
}
}
.margin({left: 30,right: 30})
}
speedChange() {
var that = this;
that.angle = 0;
this.interval = setInterval(function () {
that.angle += that.speed
}, 15)
}
onPageShow() {
clearInterval(this.interval)
this.speedChange()
}
@Builder DescribeText(text:string, speed: number) {
Stack() {
Text(text + speed.toFixed(1) + ' Hz')
.margin({ top: 70 })
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
}
}
連接真實(shí)設(shè)備前，IDE提供了自動(dòng)化簽名功能。依次點(diǎn)擊“文件——項(xiàng)目結(jié)構(gòu)——Project——Signing Config"，彈窗中勾選“Automatically generate signing”后，等待簽名完成，點(diǎn)擊“ok”。
用usb線連接電腦和3516開發(fā)板，開發(fā)板啟動(dòng)完成后，后自動(dòng)連接到DevEco Studio 3.0 Beta3 for OpenHarmony。
同時(shí)在Windows系統(tǒng)的設(shè)備管理器里，會(huì)顯示通用串行總線設(shè)備-HDC。
點(diǎn)擊設(shè)備“運(yùn)行”按鈕，同時(shí)完成工程編譯和下載到開發(fā)板。效果如下：
OpenHarmony已經(jīng)建立了完整的開發(fā)工具鏈，它的生態(tài)會(huì)越來越強(qiáng)大。
??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
