Huawei Songshan Lake «в огне», мой Hongmeng HelloWorld в порядке?

HarmonyOS

Озеро Суншань горит, но, к счастью, мой Hongmeng HelloWorld в порядке

Прошлой ночью я наконец пробежался по HelloWorld от HarmonyOS, я ожидал, что это будет сделано за полчаса, но это заняло у меня почти 5 часов! Сегодня я был потрясен, узнав, что строительная площадка Huawei в зоне высоких технологий озера Суншань в городе Дунгуань загорелась, и я надеюсь, что обошлось без жертв.

Всем привет, я Ху Ци, лев фронтенда Copy siege.Фронтендом занимаюсь более 4-х лет.По логике вещей запуск Hongmeng OS HelloWorld не должен занимать столько усилий.В конце концов, установка окружения также проста, и редактор DevEco Studio также очень удобен в использовании. , код демо очень прост. Впрочем, я всего лишь старший Copy Siege Lion, хоть и работаю давно, но технический уровень у меня очень посредственный, это можно почувствовать, просто прочитав эту статью. В этой статье будет записан весь процесс моего наступания на яму, приветствую всех делать кирпич!

«Сделай кирпичи без соломы»

Кажется, я сформировал в уме набор шаблонов, когда написал много «гидрологии» для технического обмена: в начале статьи я всегда буду перечислять, как подготовиться, например, приобретение редактора , установка зависимостей и так далее. Эта статья, похоже, не стала исключением! Иногда изучение новой технологии или использование нового фреймворка или библиотеки всегда кажется мне кулинарией. Когда я был ребенком, я использовал дрова, чтобы топить дома. Всякий раз, когда я готовил, мне приходилось идти в дальний горный лес, чтобы собрать опавшие сосновые листья, которые были наиболее подходящими для разведения костра. очень энергично. На этот раз я хочу запустить HelloWorld ОС Hongmeng, SDK Native, JAVA и JS очень похожи на те листья сосны, которые помогают мне успешно пройти простую демку, редактор DevEco Studio очень похож на толстые ветки. , давая мне энергию Позвольте мне продолжить изучение ОС Hongmeng.

«Первый шаг к гениальности — это Deveco Studio», первый шаг — это, конечно же, скачать установку Genius DEVECO Studio. Помнится, в мае мне повезло, я тоже подписал конфиденциальное соглашение, а потом обнаружил, что теперь у меня версия 2.х, не знаю, хочу ли я держать это в секрете. Ссылка для скачивания открыта.

  • Ссылка для скачивания DevEco Studio

    # HUAWEI DevEco Studio 1.0是开发EMUI应用的集成开发环境
# 如需开发HarmonyOS应用，请下载HUAWEI DevEco Studio 2.0
# 所以我们要下载 2.0

    developer.huawei.com/consumer/cn…
    

    developer.harmonyos.com/cn/develop/…

    В настоящее время поддерживается только 64-разрядная версия Windows 10, и скоро будет запущена версия DevEco Studio для macOS.

  • скачать SDKПо умолчанию DevEco Studio загружает только Java SDK и наборы инструментов, соответствующие SDK.Конечно, как старший лев Copy siege, «дети задают вопросы с несколькими вариантами ответов», я хочу их все! Поэтому я вручную загрузил Native и JS SDK в SDK Manager; как разработчик стека JS, если вы хотите запустить JS-версию демо-версии ОС Hongmeng, вы также должны установить JS SDK, так что не беспокойтесь. об этом, просто установить все это!

  • конфигурация зеркала npm

    А, давайте сразу поговорим о настройке зеркала npm? Извините, это 2020-е, и сейчас, если вы не устанавливаете NodeJS, вам стыдно говорить, что вы фронтенд-разработчик. Что касается того, почему у меня среда JAVA, хотя большинство проектов разделены на фронт и тыл, по идее, мне не нужно устанавливать JAVA, но бывает, что я хочу разработать React Native, и тогда компания очень много проектов, которые не разделены на фронт и тыл, так что я должен установить JAVA, чтобы сохранить работу!

    Важно отметить, что здесь я ступил на первую яму:DecEco устанавливает JS SDK и сообщает «Ошибка запуска npm install», см. подробности: https://gitee.com/openharmony/docs/issues/I1WM2P.

    По журналу ошибок видно, что таймаут сети истек, я прошелnrmРуководство добавило npm образ HUAWEI CLOUD.Магия в том, что он не подействовал.Позже он прошелnpm config set registry https://mirrors.huaweicloud.com/repository/npm/Сброс зеркала решил проблему. Хотя в официальном документе указана эта команда, я переоценил свои возможности и настоял на использованииnrmЧтобы установить, результат попал в яму.

  • конфигурация градиента

Как упоминалось выше, я сделал React Native, и у компании есть несколько проектов Spring, поэтому мне нужно было выполнить градацию локально, а затем перенастроить конфигурацию градации DevEco Studio. Здесь я думаю, что связанная конфигурация DevEco Studio и IEDA или Android Studio все еще имеет некоторые общие черты. Конфигурация также очень проста в использовании, но позже я все же отменил конфигурацию.

Анализ кода HelloWorld

В этом HelloWorld я использовал пустой JS шаблон, ведь это front-end Copy siege lion, я подсознательно думаю, что код для скачивания JS Demo должен быть известен как минимум. Когда я разобрался в каталоге кодов и деталях, у меня сжалось сердце: на самом деле это JAVA! Есть JAVA!Есть JAVA!

Присмотритесь к каталогу и именам файлов, похоже на Android! тоже самоеbuild.gradle, тот же градиент. ноentryПод папкой типичный логотип фронтэнда --package.json, но когда я вижуpackage.jsonВ этом файле ничего нет, я на мгновение остолбенел, откройте егоnode_modulesКогда вы увидите, что зависимостей нет, вы поймете, что никаких зависимостей введено не было. Давайте еще раз взглянем на подробный каталог, светло-желтый.gradle,build,entry/buildЭти три каталога являются зависимостями и упакованными файлами. Отдельные файлы в корневом каталоге в основном являются файлами конфигурации некоторых проектов.Каталоги, которые мы разрабатываем, в основном находятся вentry, на что я обращаю больше вниманияjsкаталог, см.pagesвнизindex/index.css,index/index.js,index/index.js,так же какpageкаталог на том же уровнеapp.js, похоже на разработку небольших программ, да, так работает фронтенд!

«Разговор дешево показать мне свой код», следующий код, данный нам Cangkang Hello World, сосредоточиться на следующих файлах:

  • entry/src/main/config.json

    Я не буду объяснять это здесь, потому что в официальной документации есть более подробное объяснение поля за полем -Введение в файл манифеста config.json, адрес: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463.

    {
    "app":{
        "bundleName":"com.huawei.huqi.helloworld",
        "vendor":"huawei",
        "version":{
            "code":1,
            "name":"1.0"
        },
        "apiVersion":{
            "compatible":3,
            "target":3
        }
    },
    "deviceConfig":{},
    "module":{
        "package":"com.huawei.huqi.helloworld",
        "name":".helloworld",
        "reqCapabilities":[
            "video_support"
        ],
        "deviceType":[
            "wearable"
        ],
        "distro":{
            "deliveryWithInstall":true,
            "moduleName":"entry",
            "moduleType":"entry"
        },
        "abilities":[
            {
                "skills":[
                    {
                        "entities":[
                            "entity.system.home"
                        ],
                        "actions":[
                            "action.system.home"
                        ]
                    }
                ],
                "formEnabled":false,
                "name":"com.huawei.huqi.helloworld.MainAbility",
                "icon":"$media:icon",
                "description":"$string:mainability_description",
                "label":"helloworld",
                "type":"page",
                "launchType":"standard"
            }
        ],
        "js":[
            {
                "pages":[
                    "pages/index/index"
                ],
                "name":"default",
                "window":{
                    "designWidth":454,
                    "autoDesignWidth":false
                }
            }
        ]
    }
}

  • entry/src/main/js/default/app.js

    Знакомый вход, знакомый жизненный цикл! Вот глобальный файл логики JavaScript и управление жизненным циклом приложения.

    export default {
onCreate() {
    console.info('AceApplication onCreate');
},
onDestroy() {
    console.info('AceApplication onDestroy');
}
};

  • entry/src/main/js/default/pages/index/index.js

    Файл js описывает логику поведения страницы.Этот файл определяет все логические отношения, используемые на странице, такие как данные и события. $t в нем написано на нескольких языках.Он берет поле string.world json-файла в i18n.Что касается того, как это реализовать внутри, я пока не видел. Найденные до сих пор статьи все еще пишутся (этот документ еще не выпущен, так что следите за обновлениями~), в основном каталог i18n используется для настройки содержимого ресурсов в различных языковых сценариях, таких как текстовые записи приложения, пути к изображениям и другие источники. Просто поместите файл определения ресурса в каждый языковой регион в папку i18n, указанную в файловой организации. Файл ресурса имеет имя в формате «language-region.json». Например, файл ресурса на английском языке (США) называется en-US.json. Предполагается, что для анализа этой части необходимо взглянуть на исходный код ОС Hongmeng. Дополнительные сведения о синтаксисе JS см.Справочник по синтаксису JS.

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

  • Многоязычный файл "language-region.json" Все они находятся в каталоге i18n, где в i18n хранятся многоязычные файлы json.

    // en-US.json
{
"strings":{
        "hello":"Hello",
        "world":"World"
},
"Files":{
}
}
// zh-CN.json
{
"strings":{
        "hello":"您好",
        "world":"世界"
},
"Files":{
}
}

  • запись/src/main/js/default/pages/index/index.hml HML (язык разметки HarmonyOS) — это набор HTML-подобных языков разметки, которые создают содержимое страницы с помощью компонентов и событий. Файл .hml определяет структуру макета страницы, используемые компоненты и иерархическую взаимосвязь этих компонентов. В настоящее время основными тегами являютсяdiv,text, `изображение. Дополнительные сведения о HML см.Справочник по синтаксису HML, выглядит как намек на Vue.js

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

  • entry/src/main/js/default/pages/index/index.css

    Каскадные таблицы стилей, файлы CSS определяют стиль и макет страницы, включая селекторы стилей и различные атрибуты стиля. В настоящее время поддерживается гибкий макет, а файлы стилей CSS поддерживают оператор @import для импорта текста CSS. Подробнее о CSS см.Справочник по синтаксису CSS

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

.title {
    font-size: 100px;
}

Остальные части про JAVA не по порядку, ведь они не профессиональные яванцы. Следующим шагом будет запуск программы, вот гигантская яма.

запустить HelloWorld

Чтобы запустить HelloWorld, вам нужно выбрать версию JDK.Давайте сначала посмотрим на мою ошибку:

Безжалостных людей не так много, и я понял, что это было вызвано неправильным выбором версии JDK, я помню, что JDK проекта по умолчанию на тот момент был 12.0, и он не мог запуститься. После обхода одного за другим сначала не удалось установить зависимость gradle, а затем различные пробы и ошибки, наконец, через 5 часов, после метания и запуска! Локальный JDK 1.8, используемый Gradle JVM, мир затихает в одно мгновение, задержите дыхание и нажмите RUN. Dangdang... Конечно, я запускаю симулятор здесь, нажмите на верхнюю часть DevEco StudioTools-HVD ManagerОткройте эмулятор. Для этого шага требуется авторизация для входа. Если у вашей учетной записи нет разрешения, вы не можете использовать эмулятор. Успешный интерфейс выглядит следующим образом:

На этом этапе я тоже был очень подавлен. Я много раз пытался открыть HVD и не мог найти носимое устройство. Можно было выбрать только один телевизор. Позже носимое устройство отобразилось случайно. Я никогда раньше не пользовался Wearable, это потрясающе, это виртуальное устройство немного болтается!

Далее настоящий БЕГ, нажмите в верхнем меню DevEco StudioRUN-RUN 'entry', В случае успеха виртуальное устройство может быть обнаружено, что аналогично разработке для Android. нажмитеOK, приготовьтесь программировать на удачу...

К счастью, подождите, успех! увидеть большой您好 **, я чувствую, что мир наконец-то стал по-настоящему чистым.

никогда не останавливаться

Каждый раз, когда Helloworld - это приятный опыт, однако, после того, как Helloworld, я надеюсь, что H (Ello) W (Orld) осаждают львы, не прекращают так, наше будущее погружается в море, вызывая тысячи волн, волн внутри волн! Здесь я также установил флаг, я должен настаивать на том, чтобы учиться не останавливаться в HellowOrld! Поскольку JS имеет большой потенциал, почему бы не усердно работать и учиться контролировать и освоить ее? Спасибо за ваше восхищение, и я прошу вас завести путь!

В этой статье используетсяmdniceнабор текста

Категории