причина
В последнее время ОС Hongmeng очень популярна.В соответствии с психологией людей, которые едят дыни, я также хочу посмотреть, как выглядит ОС Hongmeng, которая утверждает, что может напрямую разрабатывать приложения с помощью js. У меня есть небольшое знакомство как с Android, так и с Flutter (научитесь писать, напишите демо-уровень), и надеюсь, что благодаря этому изучению я смогу понять разницу в прямой разработке js.
Готов к работе
- Установите компилятор
ОткрытьЦентр разработчиков ОС Huawei Hongmeng-Разработка, прокрутите вниз, чтобы увидеть ссылку для скачивания официального компилятора HUAWEI DevEco Studio:
Нажмите «Загрузить сейчас», затем разархивируйте и установите после завершения загрузки.
Компилятор основан на платформе IntelliJ, поэтому операция похожа на idea/as и практически не требует затрат на обучение.
- Конфигурация среды
Излишне говорить, что базовая операционная среда nodejs должна быть настроена. Другое содержимое конфигурации можно найти вЦентр разработчиков-Документация-Инструменты-Настройка среды разработкиСсылаться на.
Создать проект
- Новый проект ОС Hongmeng
Здесь следует отметить, что вам нужно нажать «Новый проект ОС Hongmeng», чтобы создать проект с шаблоном.Если вы нажмете «Новый проект» напрямую, будет создан новый пустой проект.
- Создайте новое пустое приложение js
Здесь в скобках после названия приложения указан язык, на котором был разработан шаблон этикетки. Будьте внимательны при выборе правильного языка.
Затем заполните соответствующую информацию о приложении и нажмите «Готово», чтобы создать проект.
- Понимание роли файлов шаблонов проектов
Расположение папки разработки в шаблонеentry/srcСодержимое папки, где структура аналогична ноде проекта, а затем войти в каталог разработки js, т.е.main/jsкаталог, где:
- common — публичная папка, в которую должны быть помещены публичные ресурсы
- i18n — это папка интернационализации, которая содержит текстовое содержимое каждой локали.
- Pages — это страница, состоящая из трех файлов: html, css и js.
- app.js — это входной файл
При создании новой страницы рекомендуется щелкнуть правой кнопкой мыши, чтобы создать новую страницу, и выбрать JS Page, чтобы маршрут мог быть автоматически добавлен в файл config.json.
разрабатывать приложения
Общий метод написания похож на основной интерфейсный фреймворк, приступить к работе несложно, а подсказки IDE очень исчерпывающие, что очень удобно.
- HTML-тег
| Тип компонента | основные компоненты |
|---|---|
| основные компоненты | текст, изображение, прогресс, рейтинг, диапазон, выделение, изображение-аниматор, разделитель, поиск, меню, диаграмма |
| компонент контейнера | div, list, list-item, stack, swiper, tabs, tab-bar, tab-content, list-item-group, Refresh, Dialog |
| медиа-компонент | video |
| Компонент холста | canvas |
2. Двусторонняя привязка
Двусторонняя привязка может напрямую использовать двойные фигурные скобки, т.е.{{}}, а для содержимого некоторых тегов и атрибутов тегов необходимо использовать двойные фигурные скобки. использовать$tНа содержимое интернационализированного объекта можно ссылаться напрямую.
- цикл списка
<!-- xxx.hml -->
<div class="array-container">
<!-- div列表渲染 -->
<!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -->
<div for="{{array}}" tid="id" onclick="changeText">
<text>{{$idx}}.{{$item.name}}</text>
</div>
<!-- 自定义元素变量名称 -->
<div for="{{value in array}}" tid="id" onclick="changeText">
<text>{{$idx}}.{{value.name}}</text>
</div>
<!-- 自定义元素变量、索引名称 -->
<div for="{{(index, value) in array}}" tid="id" onclick="changeText">
<text>{{index}}.{{value.name}}</text>
</div>
</div>
- Условное суждение
Один из них — синтаксис ifelse, который не отображается при значении false, другой — синтаксис show, который отображается, но не отображается при значении false.
<text if="{{show}}"> Hello-One </text>
<text elif="{{display}}"> Hello-Two </text>
<text else> Hello-World </text>
<text show="{{visible}}" > Hello World </text>
- ссылка на шаблон
<!-- template.hml -->
<div class="item">
<text>Name: {{name}}</text>
<text>Age: {{age}}</text>
</div>
<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
3. Привязка событий
Привязка по времени такая же, как и в нативном js, а метод связан ключевыми словами, такими как onevent. Методы привязки времени, указанные на официальном сайте, следующие:
<!-- xxx.hml -->
<div>
<!-- 通过'@'绑定事件 -->
<div @click="clickfunc"></div>
<!-- 通过'on'绑定事件 -->
<div onclick="clickfunc"></div>
<!-- 使用事件冒泡模式绑定事件回调函数。5+ -->
<div on:touchstart.bubble="touchstartfunc"></div>
<!-- 使用事件捕获模式绑定事件回调函数。5+ -->
<div on:touchstart.capture="touchstartfunc"></div>
<!-- on:{event}等价于on:{event}.bubble。5+ -->
<div on:touchstart="touchstartfunc"></div>
<!-- 绑定事件回调函数，但阻止事件向上传递。5+ -->
<div grab:touchstart.bubble="touchstartfunc"></div>
<!-- 绑定事件回调函数，但阻止事件向下传递。5+ -->
<div grab:touchstart.capture="touchstartfunc"></div>
<!-- grab:{event}等价于grab:{event}.bubble。5+ -->
<div grab:touchstart="touchstartfunc"></div>
</div>
Нет никакой разницы между методом записи on:event в командной строке IDE и методом записи onevent в реальном использовании.
4. Маршрутный прыжок
использование маршрута@system.routerМетод завершается:
- Перейти на другие страницы
// index.js
import router from '@system.router';
// 跳转至detail页面
jumpToDetail(){
router.push({
uri:'pages/detail/detail' //路由在config.json文件中
})
}
- Вернуться на предыдущую страницу
// detail.js
import router from '@system.router';
backToIndex(){
router.back()
}
- дом операции
- Получить узел дома
Привяжите к метке по ссылке, затем используйте $refs, чтобы получить дом в js
<!-- index.hml -->
<div class="container">
<text ref="hello">hello</text>
</div>
const helloElement = this.$refs.hello; // 获取ref属性为animator的DOM元素
- получить родительский компонент
const parent = this.$parent();
- получить дочерний компонент
<div class="container">
<childComponent id = "childComponent"></childComponent>
</div>
const childComponent = this.$child('childComponent');
- Жизненный цикл
В только что упомянутом файле app.js есть два особых жизненных цикла, которые представляют собой создание и уничтожение приложений:
export default {
onCreate() {
console.info('AceApplication onCreate');
},
onDestroy() {
console.info('AceApplication onDestroy');
}
};
Помимо этих двух, у каждой страницы есть жизненный цикл, который на официальном сайте описывается следующим образом:
| Атрибуты | параметр | возвращаемое значение | описывать | Время запуска |
|---|---|---|---|---|
| onInit | без | без | инициализация страницы | Инициируется, когда инициализация данных страницы завершена, только один раз. |
| onReady | без | без | Страница создана | Запускается при создании страницы, только один раз. |
| onShow | без | без | отображение страницы | Запускается при отображении страницы. |
| onHide | без | без | страница исчезает | Срабатывает, когда страница исчезает. |
| onDestroy | без | без | уничтожение страницы | Срабатывает при уничтожении страницы. |
| onBackPress | без | Boolean | действие кнопки «назад» | Запускается, когда пользователь нажимает кнопку «Назад». Возврат true означает, что страница сама обрабатывает логику возврата. Возврат false означает использование логики возврата по умолчанию. Отсутствие возврата значения будет рассматриваться как ложное. |
| onActive()5+ | без | без | активация страницы | Запускается при активации страницы. |
| onInactive()5+ | без | без | пауза страницы | Запускается, когда страница приостановлена. |
| onNewRequest()5+ | без | без | повторный запрос FA | Этот обратный вызов запускается при получении нового запроса, в то время как FA уже запущен. |
| onStartContinuation()5+ | без | без | Подробное описание смотрите по ссылке | Интерфейс распределенных возможностей, подробное объяснение см. в разделе «Распределенная миграция». |
| onSaveData(OBJECT)5+ | OBJECT | без | Подробное описание смотрите по ссылке | Интерфейс распределенных возможностей, подробное объяснение см. в разделе «Распределенная миграция». |
| onRestoreData(OBJECT)5+ | OBJECT | без | Подробное описание смотрите по ссылке | Интерфейс распределенных возможностей, подробное объяснение см. в разделе «Распределенная миграция». |
| onCompleteContinuation(code)5+ | code | без | Подробное описание смотрите по ссылке | Интерфейс распределенных возможностей, подробное объяснение см. в разделе «Распределенная миграция». |
Последовательность вызова интерфейса жизненного цикла страницы A:
- Откройте страницу A: onInit() -> onReady() -> onShow() -> onActive()
- Откройте страницу B на странице A: onInactive() -> onHide()
- Вернуться на страницу A со страницы B: onShow() -> onActive()
- Выход со страницы A: onBackPress() -> onInactive() -> onHide() -> onDestroy()
- Страница скрыта для работы в фоновом режиме: onInactive() -> onHide()
- Страница восстанавливается из фона на передний план: onShow()
Значение 5+ должно означать API версии 5 и выше.Согласно информации о версии, опубликованной на официальном сайте, HarmonyOS SDK 2.1.1.21 — это v5.
Отладка приложения
Отладка делится на реальную машину и виртуальную машину.Поскольку у меня нет мобильного телефона с системой Hongmeng, здесь объясняется только метод отладки виртуальной машины.
1. Получить виртуальную машину
Нажмите «Инструменты» — «Управление устройствами» в верхней строке меню, и появится всплывающее окно для виртуальных машин по умолчанию, как показано на следующем рисунке:
Это всплывающее окно открывается впервые. Если вы не вошли в систему и не используете аутентификацию по реальному имени, вы не сможете увидеть список устройств справа. Вам необходимо зарегистрировать учетную запись разработчика Huawei. сначала, а затем выполните аутентификацию по реальному имени. После завершения аутентификации вернитесь в среду IDE, чтобы выйти из системы и снова войти в нее (открывающаяся здесь страница авторизации также требует повторного входа), после чего отобразится список устройств.
Выберите устройство, которое хотите запустить, нажмите кнопку запуска справа, а затем запустите проект, чтобы увидеть эффект демонстрации виртуальной машины.
Уведомление:
- Во время разработки нет горячего обновления, и вам нужно повторно запустить, чтобы увидеть измененный эффект.
- Виртуальная машина представляет собой облачный телефон, поэтому будут такие проблемы, как задержка работы и размытие экрана.
- Облачный телефон имеет ограничение по времени использования, а в верхней части есть 1-часовой обратный отсчет.
Суммировать
Этот документ записан здесь, и дальнейшее развитие будет продолжать обновлять его ~ Добро пожаловать, чтобы обратить внимание на коллекцию ~
личный блог:encaik.gitee.io/