#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人原创

梅科尔_陈梦帅

发布于 2024-1-26 23:45

浏览

0收藏

前言

作为一个刚入门的开发者，我在前期的代码编写和界面排版布局都遇到了不小的麻烦，但是通过不断的摸索试错和官方文档的学习，最终还是一步一步的完成了我们这个项目。

一、运行环境

DevEco Studio版本：DevEco Studio 3.1.1 Release及以上版本。

OpenHarmony SDK版本：API 9， OpenHarmony 3.2 Release。

二、创建项目

环境配置好后，就可以选择要创建的项目进入。

#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人-鸿蒙开发者社区

图2.1 创建项目

三、环境搭建

由于环境搭建少了一步Ohpm和SDK的下载，所以还未进行烧录界面就出现了错误提示。

#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人-鸿蒙开发者社区

图3.1 环境搭建

#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人-鸿蒙开发者社区

图3.2 环境搭建

找到问题后，重新下载安装了最新的SDK，解决了报错问题，可以进入下一步的烧录。

#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人-鸿蒙开发者社区

图3.3 环境搭建

四、签名烧录

在页面烧录之前，一定要记得给应用签名还要调整页面的大小以适配要烧录的套件，签名完成之后看到控制台指令即可确定烧录是否成功，烧录成功后大禹200里即可出现设计的界面。

输入“Hello World”运行后的效果如下：

#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人-鸿蒙开发者社区

图4.1 签名烧录

五、添加组件

经过前期对OpenHarmony的不断摸索，我逐渐熟悉了其中的代码编写、运行烧录等基础功能，后面便是各种尝试添加各种组件来装饰我们的界面，使我们的界面更美观简洁，更贴合我们的项目需求。

六、登录页面

根据官方学习文档的登录界面模板进行修改，更换了颜色以及基本组件的位置，以此来作为我们的登录页面，每个用户有对应的地下巡检机器人，用户在使用APP时首先进行登录注册，只有账号和密码与我们的后端MySQL数据库相对应时，才可以进行登录。点击登录后即可跳转到我们的软体机器人操作系统主页面。

struct Index {
  build() {
    Row() {
      Column() {
        Image($r("app.media.dabai2"))
          .width(500)
          .height(800)
          .position({x:-50,y:-215})

        Text("Welcome")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Gray)
          .position({x:95,y:-80}).width('100%')

        TextInput({ placeholder: "请输入账号" })
          .width(300)
          .height(50)
          .backgroundColor(Color.Gray)
          . placeholderColor(Color.White)
          .margin(
            {
              bottom:20
            }
          )
        TextInput({ placeholder: "请输入密码" })
          .width(300)
          .height(50)
          . placeholderColor(Color.White)
          .backgroundColor(Color.Gray)
        Row({space:5})
        {
          Checkbox()
          Text("请勾选隐私协议")
            .fontSize(20)

        }
        Button("登录")
          .width(270)
          .height(50)
          .fontWeight(FontWeight.Bold)
          .fontSize(25)
          .backgroundColor(Color.Gray)
          .margin(
            {
              top:20
            })
          .onClick(() => {
            router.pushUrl({
              url: 'pages/2'
            })
          })
        Text("-----其他登陆方式-----")
          .fontSize(15)
          .width(170)
          .height(100)
          .fontColor('#ff918c8c')
          .padding(
            {
              top:20
            }
          )
        Row()  {
          Button("微信",{type:ButtonType.Circle})
            .width(55)
            .height(55)
            .fontSize(11)
            .backgroundColor(Color.Gray)
            .margin(
              {
                top:10
              })
          Button("QQ",{type:ButtonType.Circle})
            .width(55)
            .height(55)
            .fontSize(11)
            .backgroundColor(Color.Gray)
            .margin(
              {
                top:10,
                left:50
              })

        }
      }
      .width('100%')
      .height('40%')
    }

    .margin(
      {
        top:0
      })
    .height('100%')
    .backgroundColor(Color.White)
  }
}

七、巡检信息首页

操作人员登陆账号进入APP以后，可以直观地看到机器人的巡检信息，以及巡检机器人的操作以及维护指南。

#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人-鸿蒙开发者社区

图7.1 巡检信息首页

#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人-鸿蒙开发者社区

图7.2巡检信息首页

八、控制页面

巡检人员打开APP进行等下线缆巡检时，可以直接点击主页导航栏里的控制按钮，进入到地下线缆巡检机器人的控制页面，通过点击不同的按钮来控制机器人的运动，来实现机器人的地下线缆巡检。

#星计划#梅科尔工作室HOS-基于OpenHarmony开发的地下线缆折纸软体机器人-鸿蒙开发者社区

图8.1 控制页面

九、总结

在这次OpenHarmony开发过程中，采用了ArkTS语言进行开发，在开发的过程中遇到了很多问题，比如预览画面和真机调试画面无法弹性适配、颜色效果不一样、环境配置烧录错误等等问题，但经过不断尝试与积极探索，这些问题最后都迎刃而解，最后我将代码进行汇总，来实现完整的软体机器人前端界面来实时监测机器人的巡检信息并可以远程操控机器人的运行。

作为一个刚入门的开发者，OpenHarmony对新手真的很友好，无论是简单易懂的操作页面还是十分详尽的官方学习文档，在我的学习开发过程中都给了我很大的帮助。总的来说，在OpenHarmony的开发经历都让我受益匪浅，并且过程十分有趣，日后我还会继续探索，继续学习！

分类

标签

已于2024-1-26 23:45:25修改