亦余心之所善兮,虽九死其犹未悔。这篇文章主要讲述开源鸿蒙首款IDE开发OpenHarmony 3.1 Release应用相关的知识,希望能为你提供帮助。
【开源鸿蒙首款IDE开发OpenHarmony 3.1 Release应用】在工农业生产中,变频器有着广泛和深远的应用,变频器的控制除了本地操作面板和按钮,旋钮控制外,更多是通过上位机来进行远程操作和监控。
2022年3月30日,OpenHarmony 3.1 Release及配套南向开发工具DevEco Device Tool 3.0 Release发布,3月31日发布了OpenHarmony首款北向应用开发工具 DevEco Studio 3.0 Beta3 for OpenHarmony,支持API 8和API 9,具有以下能力特点:
- 支持一站式的信息获取平台
- 支持可视化的界面UI开发
- 双向、极速的UI预览
- 全新的编译工具Hvigor,实现OpenHarmony应用/服务的一键自动化构建。
- 支持全自动化的应用签名机制,一键生成签名信息,签名过的HAP可以安装到真实设备上运行
- 高效的代码编辑,提供代码高亮、代码折叠、代码格式化等各种常用技巧,同时支持联想补齐、代码跳转、代码校验等,实现代码的高效编辑。
- 预览器支持双向、极速UI预览,实现了应用开发过程的可视化。
- 丰富的代码调试调优能力
让我们用DevEco Studio 3.0 Beta3 for OpenHarmony,开发一个变频器控制的界面,实现常见的启停,正反转,加减速功能,模拟器效果如下。
文章图片
预备 - Hi3516开发板,烧录好OpenHarmony 3.1 Release标准系统,参考1,参考2
创建工程
- 打开应用,点击新建项目,弹窗选择“Empty Ability”后点击"
Next"
文章图片
- 弹出的工程配置里全部默认,点击“finish”完成eTS工程创建。
文章图片
默认API 8,也可以选择API 9,在3516开发板上测试正常运行
如果点选“Enable Supper Visual" ,会创建一个低代码可视化工程。
index.ets:用于描述UI布局、样式、事件交互和页面逻辑。
app.ets:用于全局应用逻辑和应用生命周期管理。
pages:用于存放所有组件页面。
resources:用于存放资源配置文件。
文章图片
4.首次使用会显示“信息中心”,后续可以在帮助菜单下选择“信息中心”
图片,代码,自动签名,联机调试将工程中使用到的图片,添加到resources -> base -> media目录下
文章图片
1.编辑代码,打开预览器的双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 = 0build() 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 = 10this.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 = 0this.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)
3. 连接真实设备前,IDE提供了自动化签名功能。依次点击“文件——项目结构——Project——Signing Config",弹窗中勾选“Automatically generate signing”后,等待签名完成,点击“ok”
![image.png](https://s4.51cto.com/images/blog/202204/20114007_625f80972008220861.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
4. 用usb线连接电脑和3516开发板,开发板启动完成后,后自动连接到DevEco Studio 3.0 Beta3 for OpenHarmony
![image.png](https://s4.51cto.com/images/blog/202204/20114007_625f8097191bc50989.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
同时在Windows系统的设备管理器里,会显示通用串行总线设备-HDC
![image.png](https://s4.51cto.com/images/blog/202204/20114007_625f80971624030550.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
5. 点击设备“运行”按钮,同时完成工程编译和下载到开发板。效果如下
![无标题.png](https://s4.51cto.com/images/blog/202204/20114007_625f80970134b57155.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)OpenHarmony已经建立了完整的开发工具链,它的生态会越来越强大。[想了解更多关于鸿蒙的内容,请访问:](https://ost.51cto.com/#bkwz)[51CTO和华为官方合作共建的鸿蒙技术社区](https://ost.51cto.com#bkwz)https://ost.51cto.com/#bkwz::: hljs-center![21_9.jpg](https://s2.51cto.com/images/20210924/1632469265578939.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=):::
推荐阅读
- 浅谈mysql性能优化
- 1分钟完成etcd的备份与还原
- SMTP协议解读以及如何使用SMTP协议发送电子邮件
- 重磅!业界首个云原生批量计算项目Volcano正式晋级为CNCF孵化项目
- 没执行过 rm -rf /* 的开发不是好运维
- Ansible的hosts配置
- oracle VM virtual Box安装windows server2016虚拟机,并网络联通宿主机+共享文件
- LVM基本操作
- Linux终端上的行编辑器 ed