開源鴻蒙首款IDE開發(fā)OpenHarmony 3.1 Release應用
在工農業(yè)生產中，變頻器有著廣泛和深遠的應用，變頻器的控制除了本地操作面板和按鈕，旋鈕控制外，更多是通過上位機來進行遠程操作和監(jiān)控。
2022年3月30日，OpenHarmony 3.1 Release及配套南向開發(fā)工具DevEco Device Tool 3.0 Release發(fā)布，3月31日發(fā)布了OpenHarmony首款北向應用開發(fā)工具 DevEco Studio 3.0 Beta3 for OpenHarmony，支持API 8和API 9，具有以下能力特點：
- 支持一站式的信息獲取平臺。
- 支持可視化的界面UI開發(fā)。
- 雙向、極速的UI預覽。
- 全新的編譯工具Hvigor，實現OpenHarmony應用/服務的一鍵自動化構建。
- 支持全自動化的應用簽名機制，一鍵生成簽名信息，簽名過的HAP可以安裝到真實設備上運行。
- 高效的代碼編輯，提供代碼高亮、代碼折疊、代碼格式化等各種常用技巧，同時支持聯想補齊、代碼跳轉、代碼校驗等，實現代碼的高效編輯。
- 預覽器支持雙向、極速UI預覽，實現了應用開發(fā)過程的可視化。
- 豐富的代碼調試調優(yōu)能力。
讓我們用DevEco Studio 3.0 Beta3 for OpenHarmony，開發(fā)一個變頻器控制的界面，實現常見的啟停，正反轉，加減速功能，模擬器效果如下。
預備
Hi3516開發(fā)板，燒錄好OpenHarmony 3.1 Release標準系統，??參考1??，??參考2??
2.安裝OpenHarmony專用開發(fā)工具DevEco Studio 3.0 Beta3 for OpenHarmony??官網文檔??
創(chuàng)建工程
打開應用，點擊新建項目，彈窗選擇“Empty Ability”后點擊"Next"
彈出的工程配置里全部默認，點擊“finish”完成eTS工程創(chuàng)建。
默認API 8,也可以選擇API 9，在3516開發(fā)板上測試正常運行
如果點選“Enable Supper Visual"，會創(chuàng)建一個低代碼可視化工程。
工程結構如下
- index.ets：用于描述UI布局、樣式、事件交互和頁面邏輯。
- app.ets：用于全局應用邏輯和應用生命周期管理。
- pages：用于存放所有組件頁面。
- resources：用于存放資源配置文件。
首次使用會顯示“信息中心”，后續(xù)可以在幫助菜單下選擇“信息中心”。
圖片，代碼，自動簽名，聯機調試
將工程中使用到的圖片，添加到resources -> base -> media目錄下。
編輯代碼，打開預覽器的雙T,可以實時雙向預覽。
完整代碼在codelabs的??SliderApplicationEts??基礎上修改而成。
@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("變頻調速控制")
.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('啟動')
.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('正轉')
.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('反轉')
.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)
}
}
}
連接真實設備前，IDE提供了自動化簽名功能。依次點擊“文件——項目結構——Project——Signing Config"，彈窗中勾選“Automatically generate signing”后，等待簽名完成，點擊“ok”。
用usb線連接電腦和3516開發(fā)板，開發(fā)板啟動完成后，后自動連接到DevEco Studio 3.0 Beta3 for OpenHarmony。
同時在Windows系統的設備管理器里，會顯示通用串行總線設備-HDC。
點擊設備“運行”按鈕，同時完成工程編譯和下載到開發(fā)板。效果如下：
OpenHarmony已經建立了完整的開發(fā)工具鏈，它的生態(tài)會越來越強大。
