详细教程 - 进阶版 鸿蒙harmonyOS应用 第十四节——鸿蒙JS UI框架详解

1. JS UI框架介绍

        JS UI是鸿蒙系统推荐的UI开发框架,使用JavaScript语言编写,通过JS API提供界面渲染和组件能力。

1.1 特性概述

• 跨平台:支持HarmonyOS和Android两套框架
• 声明式:通过XML方式定义页面结构
• 高性能:深度框架层间优化,确保流畅体验
• 丰富组件:拥有丰富的基础组件和布局容器
• 数据驱动:通过数据绑定实现视图和状态同步

1.2 架构设计

JS UI框架分为JS Framework层、JS Render层、Native Engine层三层架构

• JS Framework:JS能力封装,组件化开发
• JS Render:核心渲染引擎,性能优化
• Native Engine:多端引擎适配,通用布局算法

三层解耦,翻译多端引擎指令,高效渲染UI。

2. 快速上手

下面通过Hello World示例,介绍JS UI的基础用法。

2.1 引入JS API

import ui from '@ohos.ui'

2.2 代码结构

@Entry
@Component
struct HelloWorld {
  build() {
    Column() {
      Text('Hello World') 
        .fontSize(50)  
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

可见,通过声明式语法构建页面,非常简洁高效。接下来将深入JS UI的其他能力。

3. 布局容器

JS UI框架提供多种布局容器,用于构建页面的基础布局结构。

3.1 Stack 栈布局

Stack以垂直方向线性排列子元素,常用于简单的内容展示。

Stack() {
  Text('Title').fontSize(30)

  Image('/images/img.png')
}

3.2 List 列表布局

List 支持横向或纵向列表展示,可配置滚动效果。

List() {
  ForEach(dataList) {
    Text($item.name)
  } 
}
.listDirection(Axis.Vertical)
.scrollable(true)

3.3 Row/Column

Row和Column用于水平和垂直排列子元素。

4. 常用组件

组件是构建界面不可或缺的元素,JS UI提供丰富的基础组件。

4.1 Text

用于显示和格式化文本。

Text('内容') 
  .fontSize(20)
  .fontWeight(800) 
  .fontFamily('cursive')

4.2 Image

用于展示图片资源。

Image($imgSrc)
  .width(300)
  .height(240)
  .objectFit(ImageFit.Contain)

4.3 Input

用于文本输入。nput支持丰富的事件如change、focus等。

Input()
  .placeholder('请输入')
  .fontSize(16)
  .onChange((value) => {})

5. 组件封装

我们可以基于基础组件封装成新组件,实现复用。

5.1 定义组件

使用@Component装饰器定义组件类。

@Component
export default class Title extends Component {
  build() {
    Column() {
      ...
    }
  }
}

5.2 引用组件

@Entry
@Component
struct Page {

  build() {
    Title() 
  } 
}

5.3 传参和事件

自定义事件与参数。

@Component
export default class Title extends Component {

  build() {
    Text(){this.props.title}
  } 
  
  onClick() {
    this.fireEvent('titleClick')
  }

}

// 使用
Title({title:"标题"})
  .onClick(() => {})

6. 样式调整

UI样式通过Style API进行统一调整。

6.1 内联样式

Text()
  .style({
    fontSize: 30,
    color: '#FF0000'
  })

6.2 全局样式表

// styles.css
text {
  font-size: 30px;
  color: red;
}

// index.js
import './styles.css'

7. 数据绑定

JS UI框架通过数据绑定实现视图和状态同步。

7.1 绑定表达式

@Entry
@Component
struct Demo {

  build() {
    Column() {
      Text(`Count: {{count}}`)
      
      Button()
        .onClick(() => {
          this.count++ 
        })
    }
  }

  data = {
    count: 0
  }

}

通过{{ }}绑定数据变量。

7.2 观察者模式

@Entry
@Component
struct Demo {

  build() {
    Column() {
      Input{
        this.text
      }.onChange((val) => {
        this.text = val
      })

      Text('输入的是:{{text}}') 
    }
  }

  data = {
    text: ''
  } 
}

实现双向绑定,数据和视图同步更新。

8. 页面路由

页面路由用于管理页面入口与页面栈。

8.1 配置路由表

// router.js
export default [
  {
    path: '/index',
    component: 'index'
  },  
  {
    path: '/detail',
    component: 'detail' 
  }
]

8.2 触发路由

import router from './router'

router.push({
  uri: '/detail',
  params: {
    id: 123
  }
})

9. 动画效果

JS UI框架通过动画API启用组件动画。

9.1 补间动画

补间动画依赖时间线变换属性。

// Opacity渐变
animateTo({
  duration: 1000,
  fillMode: 'forwards',
  easing: 'friction',
  animations: {
    opacity: [0, 1],
  }
})

9.2 动画队列

// 顺序执行多个动画
animateTo({
  duration: 1000,
  animations: [
    {opacity: 0}, 
    {opacity: 1},
  ]
})

9.3 自定义驱动

// 自定义时间函数
animateTo(
  1000,
  (progress) => {
    this.width = progress * 500
  }
)

10. 应用打包

生成hap包,进行应用签名和部署。

10.1 打包命令

# 打包生成hap
$ hap build -t debug

# 安装hap包
$ hap install -t debug

10.2 Signature签名

打开DevEco Studio,在项目签名选项中配置签名证书,选择证书对hap进行签名。

11. 最佳实践

11.1 组件化

按功能拆分可复用组件,提高开发效率。可参考前面课程

11.2 跨端兼容

通过编译指令实现条件编译,解决API差异。

// #if %api('system.prompt')
import prompt from '@system.prompt';
// #else
import prompt from '@ohos.prompt';  
// #endif

11.3 单元测试

基于JSUnit框架编写组件单元测试。

@Test
testButton() {
  let button = new Button();
  assert(button !== null);  
}

11.4 UI自动化

通过UI Automator API实现界面自动化测试。

12. 总结

        JS UI框架为鸿蒙应用提供了高效的UI开发手段。相比其他框架,它具有性能高、多端适配等优势。通过掌握其声明式语法、数据驱动等特性,可以快速构建出色的应用界面。

        ·这里对JS UI的各种能力进行了全面介绍,同时提供了最佳实践指导。希望本文可以帮助开发者深入理解和应用JS UI框架,构建跨平台的高质量应用。