前期开发学习，避免不了啃文档，接下来我会从创建项目开始，结合文档操作一遍开发过程

文档链接：文档中心

创建ArkTS工程：

File > New > Create Project

配置工程界面如图，箭头之外配置保持默认

点击完成，如图：ArkTS工程创建完成（Stage模型）

纠正一下，ets是存放“ArkTS源码”，截图中打错了

构建页面：

构建第一个页面：（效果如下）

 点击“entry > src > main > ets > pages”，打开“Index.ets”文件，进行页面的编写

代码如下：

@Entry
@Component
struct Index {

  @State message: string = '虾米' //文本内容

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next') //按钮中的文本内容
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#2ffb0db8')//表示按钮颜色
        .width('40%')                                             
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器即可

构建第二个页面：

右击 pages，新建ArkTS文件

命名后回车即可

代码如下：

// Second.ets
@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%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器，效果如下：

 

下一篇实现页面间跳转