#星计划#梅科尔工作室 HOS—基于 OpenHarmony 的智能点胶系统 App 原创

梅科尔曹沥淇

发布于 2024-1-26 23:29

浏览

0收藏

一、项目介绍

本项目实现的是前后端分离，其中前端开发环境为 OpenHarmony3.2，项目致力于实现可视化 OpenHarmony App。

以 ArkTS 为开发语言，利用 OpenHarmony 组件中的 list-item，button，input，toolbar，tabs，element 等组件搭建前端界面，使其可够实现页面跳转，滑动翻页，输入查询，点击查看等功能。并且通过@system.fetch 与后端创建的 post 属性的 url 端口，实现了气压，电流，数据获取时间，点胶机启动情况等的数据实时查询，实现数据移动端可视化。

二、开发环境

工具版本:DevEco Device Tool 4.0 Release

环境:openharmony3.2

三、功能实现

3.1 登录页面开发

3.1.1 页面框架构建

以登录页面的实现为例，利用鸿蒙原生态语言 ArkTS 搭建界面，以其声明式编译方式利用 Column()、Row()、Text()、Image()、Line()组件搭建页面框架,在文件夹中创建 Home.ets 文件，然后进行相关代码编写。主要是设计登录页面中应有的软件标识信息，用户账号密码登录等。具体代码如下:

<!--Home.ets-->
build() {
    Column() {
      Column() {
        Image($r('app.media.Title'))
        Text($r('app.string.title'))
          .fontSize(50).fontColor($r('app.color.zhuti'))
          .fontWeight(FontWeight.Bold) .fontWeight(500)
        Text(this.src)
          .fontColor(Color.Orange)
      }
      .margin(50)
      Column({space: 10}) {
        TextInput({ placeholder: $r('app.string.TextInput_1')})
          .maxLength(11)
          .type(InputType.Number)
          .onChange((value1: string) => {
            this.account = value1;
          })
        Line({width:'80%',height:1})
          .backgroundColor($r('app.color.line'))
        TextInput({ placeholder: $r('app.string.TextInput_2') })
          .maxLength(11)
          .type(InputType.Password)
          .onChange((value2: string) => {
            this.password = value2;
          })
        Line({width:'80%',height:1})
          .backgroundColor($r('app.color.line'))
        Row(){
          Text('验证码登录')
            .fontColor($r('app.color.Input'))
            .fontWeight(500)
          Text('忘记密码')
            .fontColor($r('app.color.Input'))
        }
        .justifyContent(FlexAlign.SpaceBetween)
        Column() {
          Button('登录')
            .onClick(() => {
              this.login();
            })
          Text('注册账号')
            .fontSize(15).fontWeight(500)
            .fontColor($r('app.color.Input'))
        }
        .margin(10)
        if (this.isShowProgress) {
          LoadingProgress()
            .color('#182431').margin({ top: 20})
            .width(30).height(30)
        }
        Blank()
        Text('其他方式')
          .opacity(0.5)
      }
      Row({space:35}){
        Column() {
          Button() {
            Image($r('app.media.qq'))
              .onClick(() => {
                router.back();
              })
          }
          Text('方式一')
            .opacity(0.6)
        }
        Column() {
          Button() {
            Image($r('app.media.wechat'))
              .onClick(() => {
                router.back();
              })
          }
          .width(40)
          Text('方式二')
            .opacity(0.6)
        }
      }
      .height('20%')
      .alignItems(VerticalAlign.Top)
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.

3.1.2 登录事件设计

通过创建 login()函数，应用与按钮点击事件，实现密码验证与页面跳转。通过@system.prompt 与@ohos.router 修饰器达到跳转与提示框显示，具体代码如下：

<!--login()函数创建-->
import router from '@ohos.router';
import prompt from '@system.prompt';
@Entry
@Component
struct Home {
  @State src: string = router.getParams()?.['src']
  @State account: string = '';
  @State password: string = '';
  @State isShowProgress: boolean = false;
  private timeOutId = null;
  login() {
    if (this.account === '' || this.password === '') {
      prompt.showToast({
        message: '输入不能为空',
        duration: 2000,
      })
    } else {
      this.isShowProgress = true;
      if (this.timeOutId === null) {
        this.timeOutId = setTimeout(() => {
          this.isShowProgress = false;
          this.timeOutId = null;
          router.push({ url: 'pages/Page' });
        }, 800);
      }
    }
  }
  aboutToDisappear() {
    clearTimeout(this.timeOutId);
    this.timeOutId = null;
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

3.1.3 页面效果展示

在编辑窗口右上角的侧边工具框点击 Previewer，打开浏览器。页面效果如下图所示:

#星计划#梅科尔工作室 HOS—基于 OpenHarmony 的智能点胶系统 App-鸿蒙开发者社区

图1 登录页面

3.2 导航栏开发

3.2.1 导航栏样式设计

首先创建并编写 page.ets 文件进行代码编写，通过自定义组件构建 tabbar，设置导航栏样式，进行函数封装，具体代码如下：

<!--TabBuilder()构建-->
  @Builder TabBuilder(title: string,index: number, img_1: Resource, img_2: Resource){
    Column(){
      Image(this.onIndex == index ? img_2 : img_1)
        .width(40)
        .height(40)
      Text(title)
        .fontWeight(600)
        .fontColor(this.onIndex === index ? '#ffffffff' : '#1698CE')
        .fontSize(19)
    }
    .width(100)
    .height(70)
    .margin({left:20})
    .backgroundColor(this.onIndex === index ? '#3899B8' : '#ff47474e')
    .border({color:'005980',width:3})
    .borderRadius(10)
    .onClick(() => {
      this.onIndex = index;
      this.tabscontroller.changeIndex(this.onIndex);
    })
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

3.2.2 动态导航栏设计

设置导航栏为底部，添加 Tabs 控制器，添加点击事件实现页面跳转，并导入导航栏所要跳转界面路径，代码如下：

<!--page.ets-->
build() {
    Column() {
      Tabs({barPosition:BarPosition.End, controller: this.tabscontroller}){
        TabContent(){
          Index_3()
        }
        .tabBar(this.TabBuilder(Tabbarlist[0].title,0 ,Tabbarlist[0].img_1,Tabbarlist[0].img_2))
        TabContent(){
          Index()
        }
        .tabBar(this.TabBuilder('工作参数',1 , $r('app.media.tab3_3'),$r('app.media.tab3')))
        TabContent(){
          Index_2()
        }
        .tabBar(this.TabBuilder('产出数据',2 , $r('app.media.tab2_2'),$r('app.media.tab2')))
      }
      .barWidth('105%')
      .barHeight(70)
      .barMode(BarMode.Fixed)
      .vertical(false)
    }
    .width('100%')
    .border({ width: 5 })
    .borderColor(0x121328)
    .backgroundColor(0x04061B)

  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

3.2.3 页面效果展示

在编辑窗口右上角的侧边工具框点击 Previewer，打开浏览器。页面效果如下图所示:

#星计划#梅科尔工作室 HOS—基于 OpenHarmony 的智能点胶系统 App-鸿蒙开发者社区

图2 登录页面

四、总结

本项目旨在开发一个基于 OpenHarmony 3.2 的智能点胶系统 App。该系统实现了前后端分离的架构，其中前端专注于构建一个用户友好且直观的可视化界面，后端则负责处理数据和逻辑运算。项目的核心是为用户提供一个高效、易用的智能点胶解决方案，强调在 OpenHarmony 平台上的应用开发和集成。本项目的成功实施为未来在 OpenHarmony 平台上开发更为复杂和功能丰富的应用提供了坚实的基础。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签