HarmonyOS Next 鸿蒙初体验

看现在网上传得沸沸扬扬的鸿蒙，打算弄个 hello world 玩一下

开发IDE下载

developer.harmonyos.com/cn/develop/…

配置 nodejs

我这里选的是 install 从 from Huawei Mirror v16.19.1，因为刚开始我是从官网下载的 nodejs，版本太高了，反而不行，然后自己设定了本地的路径 E:\Program_Files\nodejs

创建工程

选择的语言

js 版本

ets 版本

创建模拟器

因为我的华为手机的鸿蒙版本只有 3.0, 要 3.1 以上才支持，所以我要使用模拟器来运行

鸿蒙的模拟器，有点小酷

这是运行起来的效果

js 版本运行的效果

“您好 世界”，终于有属于国人的产品了

ets 版本运行的效果

工程结构

js 版本的结构

ets 版本的结构

build-profile.json5

{
  "app": {
    "signingConfigs": [],
    "compileSdkVersion": 9,
    "compatibleSdkVersion": 9,
    "products": [
      {
        "name": "default",
        "signingConfig": "default",
      }
    ]
  },
  "modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": [
        {
          "name": "default",
          "applyToProducts": [
            "default"
          ]
        }
      ]
    }
  ]
}

entry\build-profile.json5

{
  "apiType": 'faMode',
  "buildOption": {
  },
  "targets": [
    {
      "name": "default",
      "runtimeOS": "HarmonyOS"
    },
    {
      "name": "ohosTest",
    }
  ]
}

entry\src\main\config.json

{
  "app": {
    "bundleName": "com.example.hm_demo",
    "vendor": "example",
    "version": {
      "code": 1000000,
      "name": "1.0.0"
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "com.example.hm_demo",
    "name": ".entry",
    "mainAbility": ".MainAbility",
    "deviceType": [
      "phone",
      "tablet"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry",
      "installationFree": false
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "unspecified",
        "formsEnabled": false,
        "name": ".MainAbility",
        "srcLanguage": "js",
        "srcPath": "MainAbility",
        "icon": "$media:icon",
        "description": "$string:MainAbility_desc",
        "label": "$string:MainAbility_label",
        "type": "page",
        "visible": true,
        "launchType": "standard"
      }
    ],
    "js": [
      {
        "pages": [
          "pages/index/index"
        ],
        "name": ".MainAbility",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": false
        }
      }
    ]
  }
}

app.js

import hilog from '@ohos.hilog';

export default {
    onCreate() {
        hilog.info(0x0000, 'testTag', '%{public}s', 'Application onCreate');
    },
    onDestroy() {
        hilog.info(0x0000, 'testTag', '%{public}s', 'Application onDestroy');
    },
}

index.html

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
</div>

index.js

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

index.css

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

@media screen and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

Index.ets

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

遇到的坑

真机运行

• 我的华为手机后来把鸿蒙升级到 4.0, 可以运行，但是 js 版本会闪白屏，hello world 运行会出现卡顿，意想不到吧，这个就等系统优化吧
• 你使用 ets 编程语言真机运行就没这个问题