HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码-CFANZ编程社区

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码

HarmonyOS4.0应用开发

安装编辑器

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_应用开发

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_应用开发_02

这里安装windows版本为例

安装依赖

打开DevEco Studio

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_实时更新_03

这八项全部打钩即可开始编写代码，如果存在x，需要安装正确的库即可

开发

点击Create Project

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_编写代码_04

选择默认模板——next

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_应用开发_05

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_应用开发_06

Model部分分为Stage和FA两个应用模型，FA是支持7版本以内的模型支持JS和TS，而Stage支持最新版切只支持TS

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_编写代码_07

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_应用开发_08

建议大家使用Stage模型

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_应用开发_09

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_编写代码_10

编辑好之后点击Finish进去后等加载完毕在右上角点击预览查看效果

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_实时更新_11

@Entry
// 程序入口
@Component
// 组件

// 结构体，语法格式 struct {}
struct Index {
  @State message: string = 'Hello World'

  build() {
    // 界面内容放在build中
    Row() {
      // 行有多高
      Column() {
        // 列有多长
        Text(this.message) 
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

此段代码就是让界面撑满整个屏幕并对Hello World设置字体大小以及粗体

DevEco Studio提供自动更新代码和实时渲染的效果

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码_实时更新_12