ArkTS初始用体验

一、ArkTS工程目录

        

        AppScore>app.json5：应用的全局配置信息；

        entry：HarmonyOS工程模块，编译构建生成一个HAP包；

                src>main>ets：用于存放ArkTS源码；

                src>main>ets>entryability：应用/服务的入口；

                src>main>ets>entrybackupability：应用提供拓展的备份恢复能力；

                src>main>ets>pages：应用/服务包含的页面；

                src>main>resources：存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局等；

                src>main>module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息；

                build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等；

                hvigorfile.ts：模块级编译构建任务脚本；

                obfuscation-rules.txt：混淆规则文件；

                oh-package.json5：用来描述包名、版本、入口文件和依赖项等信息；

        on-modules：用于存放三方库依赖信息；

        build-profile.json5：工程级配置信息，包括签名、产品配置等；

        hvigorfile.ts：工程级编译构建任务脚本；

        oh-package.json5：主要用来描述全局配置。

二、简单使用

        1、初始页面

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
 
  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    .height('100%')
    .width('100%')
  }
}

        

        2、添加按钮

// Index.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
 
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
 
        // 添加按钮，以响应用户点击
        Button() {
          Text('下一步')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .fontColor('#FFFFFF')
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定onClick事件，点击时跳转到第二页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Next' button.`)
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('Succeeded in jumping to the second page.')
 
          }).catch((err: BusinessError) => {
            console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

        

        3、页面间跳转

        先新建一个同级页面---Second.ets，配置对应路由，并编写该页面内容 

        

// 路由配置
{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

// Second.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
 
@Entry
@Component
struct Second {
  @State message: string = 'Hi there'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 返回按钮绑定onClick事件，点击按钮时返回到第一页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Back' button.`)
          try {
            // 返回第一页
            router.back()
            console.info('Succeeded in returning to the first page.')
          } catch (err) {
            let code = (err as BusinessError).code; 
            let message = (err as BusinessError).message; 
            console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}