Рождение Хунмэн

HarmonyOS — это совершенно новая распределенная операционная система эпохи Интернета всего, в которой реализован очень легкий шаблон MVVM. Отзывчивая система реализуется с использованием техники захвата свойств, аналогичной vue2. Инфраструктура Hongmeng JS поддерживает ECMAScript 5.1; среда выполнения js не использует ни V8, ни jscore. Вместо этого был выбран JerryScript. JerryScript — это сверхлегкий движок JavaScript для IoT. Jerryscript — это движок JavaScript, разработанный Samsung, который позволяет разработчикам JavaScript создавать приложения IoT. У устройств IoT есть серьезные ограничения по производительности процессора и объему памяти. Поэтому Samsung разработала механизм JerryScript, который может работать на менее чем 64 КБ памяти, а весь код может храниться менее чем на 200 КБ постоянной памяти (ПЗУ). Говоря об этом, мне интересно, должны ли мы, как клиент, что-то делать, например, написать APP на наших часах Huawei и позволить ему регулярно просить вас накладывать маску или написать новостное приложение, подобное Toutiao, данные ?, можно подделать;

Напишите HarmonyOS

первый шаг

Сначала перейдите на официальный сайт для загрузкиDevEco StudioСредства разработки, адрес загрузки:developer.harmony OS.com/talent/develop/…

второй шаг

Для нового проекта Hongmeng HarmonyOS предоставляет дваFA(Функция возможности) Структура разработки пользовательского интерфейса:Фреймворк пользовательского интерфейса Javaа такжеJS-фреймворк пользовательского интерфейса. Можем использовать фреймворк JS UI, после выбора вводим кодировку.

Создаем новый шаблон выбора проекта, официал предоставляет много шаблонов, выбираем простой шаблон js

третий шаг

Начните программировать, структура каталогов показана ниже, нам нужно только создать новую папку, а затем создать страницу.

При создании новой страницы соответствующий файл конфигурации config.json будет автоматически обновляться, добавлять вручную не нужно

"js": [
  {
    "pages": [
      "pages/index/index",
      "pages/index/details/details"
    ],
    "name": "default",
    "window": {
      "designWidth": 720,
      "autoDesignWidth": true
    }
  }
]

Давайте посмотрим на HTML-код нашей индексной страницы.

<div class="container">
    <text class="text">
       Hello Word
    </text>
    <button class="button" type="capsule" value="Next" on:click="launch"></button>
</div>

js-код

import router from '@system.router';
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    launch() {
        router.push ({
            uri:'pages/index/details/details', // 指定要跳转的页面
            params: {
                title: 'Hi Here',
            }
        })
    }
}

css-код

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text{
    font-size: 42px;
}
.button {
    width: 300px;
    height: 60px;
    background-color: #007dff;
    font-size: 40px;
    text-color: white;
}

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

@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: tv) {
    .container {
        background-image: url("../../common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}

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

Знакомый вкус, хе-хе! Пока что мы выполнили простую аппликацию, посмотрим эффект!

Справа показан эффект отображения в реальном времени, который поставляется с инструментом разработки.Бдительные друзья должны обнаружить, что мы написали набор кодов для адаптации к нескольким целям. Давайте посмотрим на эффект отображения на часах.

Такой эффект достигается за счет того, что мы настроили в конфигурационном файле config.json

"deviceType": [
  "phone",
  "tv",
  "wearable",
  "tablet"
],

Если у вас нет устройства Huawei, не бойтесь, у нас есть настоящий симулятор, вы можете увидеть реальный эффект, выполнив следующие шаги;

четвертый шаг

Код готов, пора упаковывать и выходить в интернет

С публикацией приложения хлопотнее.Поскольку мой пример простой, его не надо рецензировать, поэтому дальше я не пошел.Подробнее, пожалуйста, нажмите:developer.harmony OS.com/talent/docs/doc…

Пока все кончено!