**Модульная конструкция**: Приложение разбито на несколько функциональных модулей, каждый из которых отвечает за выполнение конкретной задачи. Модульная конструкция повышает понятность и повторное использование кода, делая расширение и обслуживание приложений более простыми, одновременно снижая степень взаимозависимости между различными частями системы.## Руководство по разработке
Добро пожаловать участникам сообщества разработчиков внести свой вклад в развитие примеров. Процесс разработки можно использовать в качестве руководства по [разработке примеров](docs/develop/development_document.md).

## Часто задаваемые вопросы
Часто задаваемые вопросы доступны в разделе [ЧАВО](docs/faq/FAQ.md).

## Инженерная структура и дизайн реализации
### Слой кастомизации продуктов
Слой кастомизации продуктов сосредоточен на удовлетворении уникальных потребностей различных устройств или сценариев использования (например, приложений или метасервисов), включая дизайн UI, ресурсы и конфигурации, а также специализированные логики взаимодействия и функциональные возможности для определённых сценариев.

Функциональные модули слоя кастомизации продуктов работают автономно, но зависят от базового функционального слоя и общего слоя для реализации своих функций. Примеры могут быть найдены здесь:
[**входной пункт для приложения phone**](./CommonAppDevelopment/product/entry/src/main/ets/pages/EntryView.ets).### Базовый функциональный слой
Базовый функциональный слой расположен над общим слоем и используется для хранения набора базовых функциональных возможностей, таких как относительно автономные функциональные UI и реализация бизнес-логики. Каждый модуль этого уровня характеризуется высокой внутренней связностью, низкой внешней связностью и возможностью кастомизации, чтобы обеспечить гибкое развертывание продуктов.Базовый функциональный слой предоставляет надежную и богатую базовыми функциями поддержку для верхнего слоя кастомизации продуктов, включая UI-компоненты, базовые службы и т. д., при этом он зависит от нижнего общего слоя для получения универсальных функций и услуг.

Главная страница основана на компоненте [Навигации](./CommonAppDevelopment/product/entry/README.md), использует [управление маршрутом](./CommonAppDevelopment/common/routermodule/README.md) для перехода между страницами или модулями, включая поиск, карусели лучших примеров, списки водопада примеров и т. д. Пример превью представлен ниже:

<img src="./Общее_развитие_приложений/продукт/вход/src/main/resources/base/медиа/функциональные_сцены.gif" width="200">

**Следующий раздел содержит подробный список примеров:**

#### 180. Пример кнопки сгенерированного QR-кода (обновлено 22 января 2025 года)

В этом примере показано, как автоматически генерировать QR-код через URL в приложении и использовать интерфейсы Share Kit для вызова системной функции отправки. [Подробное руководство](./Общее_развитие_приложений/особенности/кнопка_поделиться/README.md)

<img src="./Общее_развитие_приложений/продукт/вход/src/main/resources/base/медиа/кнопка_поделиться.gif" width="200">

#### 179. Пример умного заполнения (обновлено 23 января 2025 года)

Этот пример демонстрирует использование [умного заполнения](https://developer.huawei.com/consumer/zh/doc/harmonyos-guides-V13/scenario-fusion-introduction-to-smart-fill-V13) для автоматического заполнения форм.Эта сценарий часто используется там, где требуется заполнение нескольких одинаковых форм. [Подробное руководство](. /Общее_развитие_приложений/особенности/умное_заполнение/README.md)
   <img src=". /Общее_развитие_приложений/продукт/вход/src/main/resources/base/медиа/умное_заполнение.gif" width="200">
   #### 178. Обертка диалогового окна (обновлено 23 января 2025 года)
   В этом примере показано, как создать обёртку для диалогового окна и как использовать это обёрнутое диалоговое окно. [Подробное руководство](. /Общее_развитие_приложений/особенности/обертка_диалогового_окна/README.md)
   <img src=". /Общее_развитие_приложений/продукт/вход/src/main/resources/base/медиа/обертка_диалогового_окна.gif" width="200">
   #### 177. Скачивание видео, его редактирование, сжатие и загрузка (обновлено 23 января 2025 года)
   В этом примере рассматривается процесс скачивания видео с Интернета в альбом, выбор видео из альбома для редактирования, сжатия и последующей загрузки на сервер для хранения. Выбор видео из альбома и сохранение его в песочнице, затем использование команд FFmpeg для сжатия и редактирования видео в песочнице. Наконец, использование [request.agent](https://developer.huawei.com/consumer/zh/doc/harmonyos-references-V5/js-apis-request-V5#requestagentcreate10) для загрузки отредактированного видео на сервер для хранения.
   [Подробное руководство](. /Общее_развитие_приложений/особенности/редактор_видео/README.md)
   <img src=".```markdown
![Редактор видео](/Общее_развитие_приложений/продукт/вход/src/main/resources/base/медиа/редактор_видео.gif) width="200">
   #### 176. Решение проблемы цветного шума на экране камеры (обновлено 21 января 2025 года)
   Этот пример предназначен для разработчиков, использующих [сервис камеры](https://developer.huawei.com/consumer/ru/doc/harmonyos-guides-V5/camera-kit-V5). Если сервис используется только для просмотра потока данных, обычно используются [XComponent](https://developer.huawei.com/consumer/ru/doc/harmonyos-guides-V5/xcomponent-V5). (com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-xcomponent-V5) компонент реализации, если требуется получение каждой отдельной кадра изображения для вторичной обработки (например, получения каждого кадра изображения для распознавания QR-кодов или лиц), можно использовать событие `imageArrival` в классе [ImageReceiver](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#imagereceiver9) для слежения за каждым кадром данных потока предварительного просмотра и анализа содержимого изображения. При анализе содержимого изображения, если шаг (`stride`) не был учтен, прямое чтение содержимого изображения с использованием `width * height` может вызвать аномалии при просмотре камеры, что приведет к появлению эффекта "цветного шума". Когда шаг предварительного просмотра изображения отличается от значения `width`, необходимо удалить ненужные пиксели.
```[Детальное описание документа](. /CommonAppDevelopment/feature/dealstridesolution/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/deal_stride_solution.gif" width="200">
#### 175. Пример демонстрации множественного смешивания данных (обновлено 18 января 2025 года)

Этот пример показывает, как использовать компонент [WaterFlow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-container-waterflow-V13) для демонстрации нескольких колонок различных данных, путём установки свойства `sections` для конфигурирования расстояний между колонками и строками. [Детальное описание документа](. /CommonAppDevelopment/feature/multicolumndisplay/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/multi_column_display.gif" width="200">
#### 174. Пример реализации 3D вращающегося каруселя (обновлено 17 января 2025 года)

Этот пример демонстрирует, как использовать компонент [Swiper](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5) и его свойство [customContentTransition](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5#customcontenttransition12) вместе со свойством [rotate](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-transformation-V5#rotate) для создания эффекта вращения 3D куба, что усиливает взаимодействие пользователя. Каждый раз, когда пользователь прокручивает элементы карусели, он видит живой эффект вращения 3D куба. Компонент поддерживает динамическое обновление данных карусели через объект контроллера, включая добавление, удаление и замену элементов. [Детальное описание документа]()./CommonAppDevelopment/feature/cuberotateanimation/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/cube_rotate_animation.gif" width="200">
#### 173. Пример использования лица и отпечатка пальца для разблокировки (обновлено 16 января 2025 года)

Пример демонстрирует использование службы аутентификации пользователей [@ohos.userIAM.userAuth](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-useriam-userauth-V5) для реализации функциональности распознавания лиц или отпечатков пальцев. Этот сценарий часто используется в безопасных средах, где требуется идентификация лица или отпечатка пальца. [Подробное описание документа](./CommonAppDevelopment/feature/faceandfingerprintunlocking/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/face_and_finger_print_unlocking.PNG" width="200">
#### 172. Ограничение высоты нижнего модального окна (обновлено 14 января 2025 года)

Пример показывает, как реализовать ограничение высоты нижнего модального окна, используя страницу "Мой профиль" в приложении для покупок. Когда максимальная высота области прокрутки нижнего модального окна установлена, если внутренний контент окна превышает эту высоту, область прокрутки будет иметь максимальную высоту, и содержимое не будет полностью видимым; если же высота внутреннего контента меньше максимальной высоты, область прокрутки будет иметь ту же высоту, что и контент, и все содержимое будет видимым. [Подробное описание документа](./CommonAppDevelopment/feature/limitedheightbottomdialog/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/limited_height_bottom_dialog.png" width="200">/CommonAppDevelopment/product/entry/src/main/resources/base/media/limited_height_bottom_dialog.gif" width="200">
   #### 171. Пример множественного фильтра (обновлено 13 января 2025 года)
   Пример демонстрирует сценарий использования множественного фильтра, который позволяет применять методы массивов для фильтрации данных, удовлетворяющих определённым условиям, и LazyForEach для рендера и обновления списка информации. [Подробное описание документа](. /CommonAppDevelopment/feature/multiplescreening/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/multiple_screening.gif" width="200">
   #### 170. Пример слежения за состоянием сети (обновлено 27 декабря)
   Пример показывает, как использовать интерфейсы управления сетью [сетевые соединения](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-net-connection-V5) для слежения за состоянием сети и изменения состояния воспроизведения видео в зависимости от типа сети. [Подробное описание документа](. /CommonAppDevelopment/feature/networkstatusobserver/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/network_status_observer.gif" width="200">
   #### 169. Пример плавающего инструментария (обновлено 28 декабря)
   Пример демонстрирует использование интерфейсов zIndex и жестов для создания эффекта плавающего инструментария. [Подробное описание документа](. /CommonAppDevelopment/feature/toolbox/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/toolbox.gif" width="200">
   #### 168. Реализация анимации двойного клика в реальном времени (обновлено 1219)Этот пример демонстрирует, как с помощью использования [LazyForEach](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-rendering-control-lazyforeach-V5) и [внутренних переходов компонента (transition)](https://developer.huawei.com/consumer/cn-doc/harmonyos-references-V5/ts-transition-animation-component-V5) реализовать анимацию значков при двойном клике или быстром последовательном нажатии, что усиливает взаимодействие пользователя. При каждом двойном клике или быстром последовательном нажатии на определенную область динамически отображаются значки с живыми анимационными эффектами, такими как увеличение и плавное исчезновение или движение вверх и плавное исчезновение. [Подробное описание документа](./CommonAppDevelopment/feature/clickanimation/README.md)<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/click_animation.gif" width="200">

#### 167. Преобразование видео в GIF (обновлено 1130)
Этот пример объясняет, как вырезать часть видео и преобразовать её в GIF-изображение. Такой сценарий часто встречается в приложениях для просмотра длинных видеороликов. Для этого используется команда FFmpeg для вырезания части видео и преобразования её в GIF. [Подробное описание документа](./CommonAppDevelopment/feature/videocreategif/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/video_create_gif.gif" width="200">

#### 166. Создание пользовательского компонента выбора адреса (обновлено 1125)
Этот пример показывает, как использовать `bindSheet`, `changeIndex` и `onAreaChange` для создания пользовательского компонента выбора адреса со сменной анимацией. [Подробное описание документа](./CommonAppDevelopment/feature/customaddresspicker/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_address_picker.gif" width="200">

#### 165. Пример пользовательских соглашений и политик конфиденциальности (обновлено 1108)
Этот пример демонстрирует использование web-компонентов для загрузки пользовательских соглашений, политик конфиденциальности и других документов. Этот сценарий обычно используется для отображения соглашений в приложениях. [Подробное описание документа](./CommonAppDevelopment/feature/privacyagreement/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/privacy_agreement.gif" width="200">#### 164. Пример сжатия файла (обновлено 1108)
Этот пример демонстрирует использование [Worker](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-worker-V5#onmessage9) в подпроцессах для выполнения операций сжатия файлов с использованием интерфейса `zlib.compressfile` библиотеки [@ohos.zlib](https://developer.huawei.com/consumer/cn-doc/harmonyos-references-V5/js-apis-zlib-V5) для сжатия файлов в песочнице. [Подробное описание документа](./CommonAppDevelopment/feature/compressfile/README.md)<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/file_compression.gif" width="200">
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/compress_file.gif" width="200">

#### 163. Пример реализации карточек на рабочем столе (обновлено 1108)

В этом примере используются [карточки](https://developer.huawei.com/consumer/zh/doc/harmonyos-guides-V5/arkts-ui-widget-V5) для подробного описания большинства функций разработки карточек, таких как использование метода `postCardAction` для быстрого запуска конкретной `UIAbility` приложения-поставщика карт, а также обновление содержимого карты через события `message`. Этот пример предоставляет разработчикам возможность создания и демонстрации функций карточек. [Подробное руководство](./CommonAppDevelopment/doc/CASES_CARD.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/cases_card.gif" width="200">

#### 162. Пример использования геолокации для отметки присутствия (обновлено 1106)

В этом примере используется [geoLocationManager](https://developer.huawei.com/consumer/zh/doc/harmonyos-references-V5/js-apis-geolocationmanager-V5) для определения местоположения и получения географической информации, а также компонент [MapComponent](https://developer.huawei.com/consumer/zh/doc/harmonyos-references-V5/map-mapcomponent-V5) для отображения карты, добавления позиций пользователя и области отметки присутствия. Расстояние между положением пользователя и центром области отметки присутствия используется для проверки того, находится ли пользователь в указанной области. Это позволяет реализовать функцию отметки присутствия. [Подробное руководство](.)/CommonAppDevelopment/feature/clockin/README.md)
   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/clock_in.gif" width="200">
   #### 161. Пример видео с плавающим окном (обновлено 1106)
   В этом примере рассматривается сценарий воспроизведения видео в плавающем окне. Используется AVPlayer для воспроизведения видео и выполнения связанных действий, а также PiPWindow для открытия плавающего окна и воспроизведения видео в нем. [Подробное руководство](./CommonAppDevelopment/feature/pipwindow/README.md)
   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/pip_window.gif" width="200">
   #### 160. Пример выбора текста меню (обновлено 1104)
   В этом примере расширяются возможности выбора текста меню в компонентах rich text, добавляется пользовательское меню выбора через свойство editMenuOptions компонента rich text, позволяющее открывать дополнительные меню во время редактирования текста. [Подробное руководство](./CommonAppDevelopment/feature/selecttextmenu/README.md)
   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/select_text_menu.gif" width="200">
   #### 159. Пример отправки изображений (обновлено 1104)
   В этом примере показывается использование [Share Kit](https://developer.huawei.com/consumer/zh/sdk/share-kit/?ha_source=sousuo&ha_sourceId=89000251) и [ShareExtensionAbility](https://developer.huawei.com/consumer/zh/doc/harmonyos-references-V5/js-apis-shareextensionability-V5) для отправки изображений. [Подробное руководство](./CommonAppDevelopment/feature/sharesample/README.md)
   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/share_sample.gif" width="200">gif" width="200">#### Реализация сценария отправки изображений из галереи в приложение через [документацию](.  /CommonAppDevelopment/feature/shareimagepage/README.md)
 <img src=".  /CommonAppDevelopment/product/entry/src/main/resources/base/media/share_image.gif" width="200">
 #### 158. Пример реализации кастомизации TabBar с эффектом размытия фона (обновлено 1104)
 Для достижения лучшего визуального опыта на некоторых главных страницах используется прозрачное размытое фоновое изображение для TabBar. В этом примере подробно объясняется, как использовать предоставленные системой возможности для установки фона, чтобы достичь эффекта размытого фона. [Подробная документация](.  /CommonAppDevelopment/feature/backgroundblur/README.md)
 <img src=".  /CommonAppDevelopment/product/entry/src/main/resources/base/media/background_blur.gif" width="200">
 #### 157. Пример обработки событий при вложении различных компонентов в контейнер Scroll (обновлено 1031)
 Этот пример применим к сценариям обработки событий при вложении нескольких компонентов в контейнер Scroll: когда требуется родительский контейнер Scroll, содержащий web и List, и возникают конфликты между движениями скролла родителя и детей, то родительский контейнер должен иметь наивысший приоритет скроллинга, то есть все смещения должны распределяться от родительского контейнера, обеспечивая плавное скроллирование любого ребенка до верха или низа родительского контейнера.Например, в данном случае новостной просмотр осуществляется внутри родительского контейнера Scroll, который содержит новости и раздел отзывов (веб используется для отображения новостей, а List — для отзывов), путём отключения движений скролла в Web и List, затем родительским контейнером Scroll вычисляются и распространяются смещения, что позволяет вебу и спискам скроллиться так, будто это единственный скроллирующий компонент.  
[Подробная документация](./CommonAppDevelopment/feature/containernestedslide/README.md)  
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/container_nested_slide.gif" width="200">  
#### 156. Пример адаптации к полноэкранному режиму (обновлено 1030)  
Разработка приложений с полноэкранном режиме обычно подразумевает настройку состояния бара, интерфейса приложения и навигационного бара для минимизации чувства разрыва системы. Это позволяет пользователям получать наилучшие UI-опыты. В этом примере достигнута адаптация к полноэкранному режиму для сценариев навигации, списка скролла, веб-страницы и нижнего модального окна.  
[Подробная документация](./CommonAppDevelopment/feature/immersive/README.md)  
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/immersive.gif" width="200">  
#### 155. Мультимедийное распространение (обновлено 1016)  
В этом примере рассматривается использование [@ohos.file.photoAccessHelper](https://developer.huawei.com/consumer/en/doc/HMSCore-Guides/resource-access-photo-en#section1941118114111)com/consumer/cn/doc/harmonyos-references-V5/js-apis-photoaccesshelper-V5#photoaccesshelpergetphotoaccesshelper) реализует доступ к системному альбому для получения медиаресурсов в сценариях публикации мультимедийных данных. Этот сценарий часто используется в социальных сетях для публикаций в ленте новостей и комментариях. [Подробное описание документа](. /CommonAppDevelopment/feature/publishmultimediaupdates/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/publish_multimedia_updates.gif" width="200">
#### 154. Кейсы использования компонента выбора местоположения с помощью метки на карте (обновление от 1016)

Этот пример предоставляет решение для выбора местоположения с помощью метки на карте и отображения модального окна. Компонент метки состоит из трех состояний: статического состояния (когда карта перемещается, метка остаётся неподвижной), состояния загрузки (когда карта останавливается, происходит получение информации о месте, метка показывает анимацию волн для указания на процесс загрузки данных) и состояния отображения (после завершения загрузки данных, модальное окно отображает информацию о месте). Разработчики могут использовать этот компонент, передавая различные данные в зависимости от конкретного сценария использования. Ввиду необходимости немедленного прекращения анимации метки, был выбран [@ohos.animator](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-animator-V5) для реализации анимации волн и прыгания метки.[Подробное описание документа](./CommonAppDevelopment/feature/mapthumbtack/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/component_instance_shared_in_pages.gif" width="200">
#### 153. Пример графического пароля для блокировки экрана (обновление от 1015)

Этот пример демонстрирует использование [компонента графического пароля](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-patternlock-V5) и [интерфейса вибрации](https://developer.huawei.com/consumer/cn-doc/harmonyos-references-V5/js-apis-vibrator-V5) для создания сценария графической блокировки экрана. Этот сценарий часто используется в приложениях для рабочего стола и системных приложениях. [Подробное описание документа](./CommonAppDevelopment/feature/patternlock/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/pattern_lock.gif" width="200">
#### 152. Пример использования TextInput компонента и LazyForEach для динамического избегания появления клавиатуры (обновление от  Yöntem (1011)

Этот пример демонстрирует использование TextInput компонента и LazyForEach для создания сценария динамического избегания появления клавиатуры. [Подробное описание документа](./CommonAppDevelopment/feature/keyboardavoid/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/keyboard_avoid.gif" width="200">

Пользовательское анимированное вкладывание (обновление 1009)

Этот пример демонстрирует использование компонентов List, Text и других, а также интерфейсов animateTo для реализации пользовательского эффекта вкладываний. [Подробное описание](./CommonAppDevelopment/feature/customanimationtab/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_animation_tab.gif" width="200">/CommonAppDevelopment/product/entry/src/main/resources/base/media/customanimationtabs.gif" width="200">
#### 150. Кейс проверки распознавания лиц (обновление 0930)
Этот пример демонстрирует использование [VisionKit (визуальных сервисов)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/vision-arkts-V5) для реального времени детектирования лица и использования [CryptoArchitectureKit (службы шифрования и расшифровки)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-cryptoframework-V5) для шифрования и расшифровки данных. [Подробное описание](./CommonAppDevelopment/feature/livedetectionandencryptiond/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/live_detection_encryption.gif" width="200">
#### 149. Кейс складывающегося меню (обновление 0930)
Этот пример демонстрирует создание многоуровневого складывающегося меню путём определения уровней и переход к соответствующим страницам через веб-страницы. [Подробное описание](./CommonAppDevelopment/feature/collapsemenu/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/collapse_menu_case.gif" width="200">
#### 148. Кейс использования декодера HEIF (обновление 0930)
Этот пример демонстрирует процесс компиляции библиотеки [libheif](https://github.com/strukturag/libheif) для платформы HarmonyOS, запрос HEIF изображений с помощью библиотеки [curl](https://curl.se/), декодирование HEIF изображений с использованием libheif и отображение этих изображений в потоке. [Подробное описание](./CommonAppDevelopment/feature/decodeheifimage/README.md)
<img src="./CommonAppDevelopment/feature/decodeheifimage/src/main/resources/base/media/decode_heif_image.gif" width="200">Кейс выполнения пользовательских тестовых сценариев производительности (обновление 0930)
Этот модуль выполняет пользовательские тестовые сценарии производительности с использованием автоматизированной системы тестирования DevEco Testing Hypium на платформе HarmonyOS.  [Подробное описание](. /test/performance/custom_test_script_in_python/README.md)
<img src=". /test/performance/custom_test_script_in_python/image/test_preview.gif" width="200">

#### 146. Кейс реализации экрана запуска (обновление 0930)
Этот пример демонстрирует использование правил соответствия ресурсов для адаптации значков приложения и экрана запуска для различных разрешений.  [Подробное описание](. /CommonAppDevelopment/doc/WINDOW_START_ICON.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/start_screen.gif" width="200">

#### 145. Пример офлайн-кэширования ресурсов H5-страниц (обновлено 0930)
В этом модуле с помощью интерфейса [onInterceptRequest](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#oninterceptrequest9) компонента Web реализован пример офлайн-кэширования ресурсов H5-страниц, используя сочетание оперативной памяти и жесткого диска в качестве кэша.  [Подробное описание](. /CommonAppDevelopment/feature/h5cache/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/h5_cache.gif" width="200">

#### 144. Умное распознавание текста на изображении (обновлено 0930)  Этот пример демонстрирует использование умного распознавания текста на изображении и последующего преобразования его в имя, номер телефона, адрес и т. д., с использованием набора инструментов [NaturalLanguageKit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/natural-language-api-V5) для обработки естественного языка. Часто используется при заполнении адреса в интернет-магазинах или службах доставки. [Подробное описание](./CommonAppDevelopment/feature/addressrecognize/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/address_recognize.gif" width="200">

#### 143. Пример склейки групповых аватаров (обновлено 0929)
В этом примере рассматривается создание новой беседы, где используются вложенные линейные макеты для склейки группового аватара. Используется интерфейс [@ohos.arkui.componentSnapshot (компонент скриншота)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5) для получения скриншотов групповых аватаров и отображения их в списке бесед. [Подробное описание](./CommonAppDevelopment/feature/groupavatar/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/group_avatar.gif" width="200">

#### 142. Пример связывания вертикальных и горизонтальных списков (обновлено 0929)
В этом примере показано, как использовать компонент [List](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-container-list-0000001477981213-V2) для привязки к контроллеру прокрутки [Scroller](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-container-scroll-0000001427902480-V2) и механизму ленивой загрузки данных [LazyForEach](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2).com/consumer/cn/doc/harmonyos-guides-V2/arkts-rendering-control-lazyforeach-0000001524417213-V2) для создания связывания между вертикальными и горизонтальными списками. Это часто используется для сравнения характеристик автомобилей или просмотра информации о ценных бумагах. [Подробное описание](. /CommonAppDevelopment/feature/verticalhorizontallinkage/README.md)<br>
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/vertical_horizon_linkage.gif" width="200">

#### 141. Пример реализации анимации состояния панели (обновлено 0928)
Этот пример демонстрирует динамическое взаимодействие с панелью состояния. Через отслеживание события прокрутки страницы `onDidScroll`, цвет панели состояния меняется при вертикальной прокрутке страницы вверх и вниз. Поле поиска будет гладко раскрываться или сворачиваться при прокрутке, с естественным эффектом перехода прозрачности. [Подробное описание](. /CommonAppDevelopment/feature/status_bar_animation/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/status_bar_animation.gif" width="200">

#### 140. Пример выпуклых и вогнутых выделений TabBar (обновлено 0923)
На основе существующего модуля [персонализированного TabBar](/CommonAppDevelopment/feature/personalized_tabbar/README.md) создайте выпуклые и вогнутые выделения TabBar.md) были улучшены границы выбора выпуклостей, обеспечив гладкий переход между ними, и добавлено вогнутое выделение, которое не скрывает основной контент. Благодарим участников сообщества [@NucleusUI](https://gitee.com/NucleusUI) за активное участие в развитии открытого проекта и предоставление этого примера [Подробное описание](/Общее_развитие_приложений/функционал/персонализированный_выбор_tabbar/README.md)

<img src="./Общее_развитие_приложений/продукт/вход/src/main/resources/base/media/персонализированный_выбор_tabbar.gif" width="200">

#### 139. Пример редактирования адреса доставки (обновлено 0923)
Этот пример часто используется в сценариях заполнения форм: через использование компонента TextPicker для выбора текстовых данных с помощью горизонтального ползунка, достигается трехуровневое соединение выбора провинций, городов и районов, а затем данные возвращаются в поля ввода. [Подробное описание](/Общее_развитие_приложений/функционал/редактирование_адреса/README.md)

<img src="./Общее_развитие_приложений/продукт/вход/src/main/resources/base/media/редактирование_адреса.gif" width="200">

#### 138. Переключение ориентации видео и перемещение области прогресса (обновлено 0915)
Этот пример представляет собой @ohos.multimedia.media компонент и @ohos.window интерфейсы, а также функцию переключения ориентации видео и перемещения области прогресса с использованием областей касания.[Подробное описание](/Общее_развитие_приложений/функционал/переключение_ориентации_видео/README.md)
<img src="./Общее_развитие_приложений/продукт/вход/src/main/resources/base/media/переключение_ориентации_видео.gif" width="200">
#### 137. Автоматическое воспроизведение видео при прокрутке (обновлено 0912)

Этот пример рассматривает сценарий автоматического воспроизведения видео при прокрутке списка до середины экрана. Используется метод `onScrollIndex` для получения индекса среднего элемента внутри видимой области списка, чтобы определить момент воспроизведения. Также используются возможности ленивой загрузки для предварительной загрузки содержимого вне текущей области просмотра для обеспечения непрерывного воспроизведения видео. [Подробное описание](./CommonAppDevelopment/feature/videolistautoplay/README.md)
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/video_list_autoplay.gif" width="200">
#### 136. Пользовательская декорация (обновлено 0911)

Этот пример демонстрирует использование пользовательской декорации для автоматического добавления метода [inspector (возврат отрисовки)](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis-arkui/js-apis-arkui-inspector.md) в пользовательском компоненте и его вызова. [Подробное описание](./CommonAppDevelopment/feature/customdecoration/README.md)
#### 135. Реализация динамической системы управления отображением с использованием расширений FrameNode ArkUI (обновлено 0911)  В этом примере представлен код, который объясняет, как использовать расширения FrameNode ArkUI для реализации динамической системы управления отображением.  [Подробное описание](. /CommonAppDevelopment/feature/performance/imperativedynamiclayouts/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/imperative_dynamic_layouts.gif" width="200">
   #### 134. Реализация Bluetooth для связи между сервером и клиентом (обновлено 0911)
   Этот пример разделен на два модуля: сервер и клиент.  Сервер создает экземпляр Bluetooth-сервиса и добавляет сервис пульса.  Клиент сканирует сервер с помощью UUID услуги и получает уведомление о изменениях значения характеристики от сервера.  [Подробное описание](. /CommonAppDevelopment/feature/bluetooth/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/bluetooth_client.gif" width="200">
   #### 133. Пример резинового стирального средства (обновлено 0906)
   В этом примере используется библиотека @ohos.graphics.drawing и режим смешивания цветов blendMode для реализации функции резинового стирального средства, которая позволяет удалить ранее нарисованное содержимое по движению пальца.  Также можно выполнять отмену и восстановление рисунков.  [Подробное описание](. /CommonAppDevelopment/feature/eraser/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/eraser.gif" width="200">
   #### 132. Пример переключения календарей (обновлено 0929)  В этом примере показана реализация использования Swiper для создания пользовательского представления годового, месячного и недельного календарей, а также для переключения между ними при горизонтальном свайпе. Также используются Tabs для переключения между представлением года, месяца и недели. Кроме того, используется Calendar Kit для реализации напоминаний событий. [Подробное описание](./CommonAppDevelopment/feature/calendarswitch/README.md)

   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/calendar_switch.gif" width="200">

   #### 131. Реализация эффекта мозаики в редакторе изображений (обновлено 0831)
   В этом примере показана реализация эффекта мозаики при редактировании изображений. При перемещении пальца по изображению, область, через которую перемещается палец, становится мозаичной. [Подробное описание](./CommonAppDevelopment/feature/imagemosaic/README.md)

   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/image_mosaic.gif" width="200">

   #### 130. Пример палитры кистей (обновлено 0827)
   Этот пример демонстрирует палитру кистей с сетчатым градиентом, которая позволяет пользователям выбирать цвета на основе заданного типа цвета HSL и количества оттенков. Выбранные цвета можно использовать для рисования путей на холсте. [Подробное описание](./CommonAppDevelopment/feature/palette/README.md)

   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/palette.gif" width="200">

   #### 129.Пример реализации скелетного экрана (обновлено 0824)
   В этом примере представлен метод использования скелетного экрана для улучшения пользовательского опыта во время загрузки данных. Состояние загрузки меняется в зависимости от ответа сети, что приводит к динамическому переключению содержимого страницы: начальное отображение скелетного экрана (LoadingView); успешная загрузка с данными — отображение списка (ListView); отсутствие данных — отображение страницы "Нет данных" (NoneContentView); неудачная загрузка — отображение страницы ошибки (LoadingFailedView). [Подробное описание](. /CommonAppDevelopment/feature/skeletondiagram/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/skeleton_diagram.gif" width="200">
   #### 128. Пример коллекции компонентов (обновлено 0812)
   В этом примере внешняя часть представляет собой раскрывающийся список, а внутренняя часть содержит примеры кода компонентов ArkUI, общих элементов, анимаций и глобальных методов. Основное внимание уделяется использованию раскрывающегося списка и различным примерам ArkUI. [Подробное описание](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/ArkTsComponentCollection/ComponentCollection)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/component_collection.gif" width="200">
   #### 127. Пример отправки SMS (обновлено 0709)
   В этом примере показано, как вызвать системное окно отправки SMS из приложения с помощью интерфейса startAbility, передав номер телефона и запустив системное окно отправки сообщений.[Подробное описание](./CommonAppDevelopment/feature/sendmessage/README.md)
   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/send_message.gif" width="200">Пример работы с отношениями баз данных в потоках TaskPool (обновлено 0709)
 Этот пример использует сценарий списка для демонстрации методов работы с отношениями баз данных в потоках TaskPool, включая одиночное вставление, массовое вставление, удаление и запросы.  [Подробное описание](./CommonAppDevelopment/feature/performance/operaterdbintaskpool/README.md)
 <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/operate_rdb_in_taskpool.gif" width="200">
 #### 125. Пример реализации глобального переиспользуемого компонента (обновлено 0709)
 Этот пример представляет собой код [глобальной переиспользуемой пула компонентов](docs/performance/node_custom_component_reusable_pool.md), который объясняет, как создать глобальный пул переиспользуемых компонентов через BuilderNode, чтобы обеспечить переиспользование компонентов между страницами.  [Подробное описание](./CommonAppDevelopment/feature/performance/customreusablepool/README.md)
 <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_reusable_pool.gif" width="200">
 #### 124. Пример вызова пользовательской клавиатуры для H5 страницы (обновлено 0617)
 Этот пример объясняет использование CustomDialog интерфейса для вызова пользовательской клавиатуры на H5 страницах в веб-сценариях. Этот сценарий часто используется, когда браузеры требуют использования безопасной клавиатуры.  [Подробное описание](./CommonAppDevelopment/feature/customkeyboardtoh5/README.md)
 <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/keyboard_to_h5.gif" width="200">/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_keyboard_to_h5.gif" width="200">
#### 123. Пример диалогового окна NavDestination (обновлено 0617)
Этот пример объясняет использование режима Dialog компонента NavDestination для создания связи комментариев между текущей страницей и предыдущими страницами. [Подробное описание](. /CommonAppDevelopment/feature/navdestinationdialog/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/navdestination_dialog.gif" width="200">
#### 122. Пример синхронизации прокрутки видео карточек и списков (обновлено 0603)
Этот пример использует вложенные компоненты Scroll и List для создания сценария синхронизации прокрутки видео карточек и списков. [Подробное описание](. /CommonAppDevelopment/feature/videolinkagelist/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/video_linkage_list.gif" width="200">
#### 121. Пример оптимизации отображения высоконагруженных компонентов (обновлено 0603)
Этот пример объясняет, как использовать DisplaySync для оптимизации отображения высоконагруженных компонентов и снижения количества пропущенных кадров. [Подробное описание](. /CommonAppDevelopment/feature/performance/highlyloadedcomponentrender/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/highly_loaded_component_render.gif" width="200">
#### 120. Автоматическое прокручивание горячих запросов в поле поиска (обновлено 0527)
В этом примере показано использование компонентов TextInput и Swiper для автоматического смены горячих запросов в поле поиска. [Подробное описание](. /CommonAppDevelopment/feature/searchswiper/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/search_swiper.gif" width="200">/CommonAppDevelopment/product/entry/src/main/resources/base/media/search_swiper.gif" width="200">
   #### 119. Автоматическая генерация динамических маршрутов (обновлено 0929)
   Этот пример демонстрирует, как использовать декораторы и плагины для автоматической генерации динамических маршрутов, а также переход между страницами через динамические маршруты. Также рассматривается метод использования динамического импорта для загрузки модулей. Кроме того, здесь объясняется, как создать свойства декоратора для постоянной записи констант путей маршрутов. [Подробное описание](. /CommonAppDevelopment/common/routermodule/README_AUTO_GENERATE.md)
   #### 118. Использование GTest для тестирования C++ (обновлено 0521)
   В этом примере показано, как внедрить фреймворк тестирования GTest для проверки кода на C++. [Подробное описание](. /CommonAppDevelopment/doc/GTEST_ADAPATATION.md)
   <img src=". /CommonAppDevelopment/feature/nativesavepictosandbox/src/main/resources/rawfile/test_pass.png" width="200">
   #### 117. Создание пользовательского Stepper (обновлено 0516)
   В различных сценариях требуется направлять пользователя по шагам для выполнения задачи. Эта возможность доступна в HarmonyOS Next с использованием Stepper, однако возможности его кастомизации ограничены. В данном примере показывается, как можно реализовать Stepper с помощью Swiper. [Подробное описание](. /CommonAppDevelopment/feature/customstepper/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_stepper.gif" width="200">
   #### 116. Реализация плавного перехода к краям (обновлено 0515)  В этом примере показана реализация плавного перехода к краям компонента, что обычно используется для указания пользователю о достижении границ длинного списка.  [Подробное описание](./CommonAppDevelopment/feature/fadingedge/README.md)
   <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/fading_edge.gif" width="200">
   #### 115. Обрезка длинного текста при переполнении (обновлено 0515). Этот пример реализует функцию сокращения длинных никнеймов при ответах на комментарии, используя `textOverflow` и `maxLines()`.  [Подробное описание](./CommonAppDevelopment/feature/textoverflow/README.md)
 <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/text_overflow.gif" width="200">
 #### 114. Пример водяных знаков (обновлено 0515)
 В многих случаях, таких как сохранение изображений и контейнерных обложек, можно встретить водяные знаки.  В этом примере через компонент `Canvas` и `OffscreenCanvas` реализованы функции добавления водяных знаков в страницу и при сохранении изображений.  [Подробное описание](./CommonAppDevelopment/feature/watermark/README.md)
 <img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/water_mark.gif" width="200">
 #### 113. Пример растяжения границ или фоновых изображений (обновлено 0513)
 На HarmonyOS нет поддержки безопасной растяжки `.9` файлов ресурсов.  В качестве альтернативного решения, в этом примере используются одинаковые изображения ресурсов для рамок промо-тикетов магазинной страницы, путём установки свойства `resizable` изображения, чтобы показывать эффекты различных длин промо-тикетов.  [Подробное описание](./CommonAppDevelopment/feature/stretchingborders/README.md)< img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/image_resizable.png" width="200">
#### 112. Пример раскрытия и сворачивания текста (обновлено 0513)
Этот пример демонстрирует использование интерфейса @ohos.measure для реализации функции раскрытия и сворачивания текста. Этот сценарий часто используется для отображения списков с текстом и изображениями. [Подробное описание](. /CommonAppDevelopment/feature/textexpand/README.md)
< img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/text_expand.gif" width="200">
#### 111. Пример упаковки глобальных диалоговых окон (обновлено 0507)
Этот пример представляет два случая упаковки диалоговых окон. Один случай — это создание пользовательского компонента диалогового окна одним кодовым оператором; второй случай — использование подоконного метода для создания диалогового окна одним кодовым оператором. [Подробное описание](. /CommonAppDevelopment/feature/customdialog/README.md)
< img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_dialog.gif" width="200">
#### 110. Пример перехвата маршрутов навигации (обновлено 0507)
Этот пример объясняет, как осуществляется перехват маршрута в навигации: при первом входе состояние входа записывается, при повторном входе доступ предоставляется к главной странице без необходимости повторного входа, при выходе из системы следующий вход требует повторного входа. [Подробное описание](. /CommonAppDevelopment/feature/navigationinterceptor/README.md) <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/navigation_interceptor.png" width="200">/CommonAppDevelopment/product/entry/src/main/resources/base/media/navigation_interceptor.gif" width="200">
#### 109. Реализация выделения части текста и создания гипертекстовых ссылок с помощью Text (обновлено 0430)
Этот пример демонстрирует использование пользовательских типов Span в компоненте Text с использованием Foreach для прохода по каждому элементу и создание различных стилей и функциональностей Span-компонентов в зависимости от типа Span. Это позволяет выделять часть текста и создавать гипертекстовые ссылки. [Подробное описание](. /CommonAppDevelopment/feature/styledtext/README.md)<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/styled_text.gif" width="200">

#### 108. Пример реализации эффекта "второго этажа" при прокрутке главной страницы (обновлено 0430)
Этот пример демонстрирует, как использовать `position` и `onTouch`, чтобы реализовать эффект "второго этажа", когда прокручивает главную страницу вниз, а также эффект "первого этажа" при прокрутке второго этажа вверх. Эффекты перемещения и масштабирования достигаются с помощью `translate` и `opacity`. Интерфейс переходит в полноэкранный режим. [Подробное описание](./CommonAppDevelopment/feature/secondfloorloadanimation/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/second_floor_load_animation.gif" width="200">

#### 107. Пример смешивания изображений (обновлено 0430)
Этот пример использует свойство `BlendMode` для смешивания виджетов и изображений. Изменение различных параметров смешивания позволяет добиться различных эффектов смешивания. [Подробное описание](./CommonAppDevelopment/feature/blendmode/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/blend_mode.gif" width="200">#### 106. Пример использования глобального состояния для хранения диалогового окна для реализации компонента отзывов (обновлено 0426)
Компонент отзывов является распространенным элементом в современных приложениях короткометражных видео. В этом примере используется **глобальное состояние для хранения диалогового окна**, чтобы реализовать компонент отзывов. [Подробное описание](./CommonAppDevelopment/feature/shortvideo/README_COMMENT.md), [описание глобального состояния для хранения диалогового окна](./CommonAppDevelopment/common/utils/src/main/ets/component/README.md).<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/short_video_comment.gif" width="200">

#### 105. Пример обмена элементами сетки (обновлено 0426)
Прямое удаление или обмен элементами может негативно повлиять на пользовательский опыт. Поэтому важно добавить уникальные анимационные эффекты для улучшения опыта. В этом примере используются Grid компонент, attributeModifier и функция animateTo для реализации анимации перетаскивания, анимации удаления и анимации добавления элементов. [Подробное описание](./CommonAppDevelopment/feature/gridexchange/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/grid_exchange.gif" width="200"><img src="/CommonAppDevelopment/product/entry/src/main/resources/base/media/grid_exchange.gif" width="200">
#### 104. Реализация примера раскрытия изображения и эффекта временной шкалы (обновлено 0422)
Эффект раскрытия изображения: в начальном состоянии верхнее изображение отображает только центральную часть, остальная часть скрыта сверху экрана и снизу модуля временной шкалы. При прокрутке изображение постепенно раскрывается.

Эффект временной шкалы: расположен слева, пунктирная линия проходит через весь список, перед каждым контентом модуля есть узел временной шкалы. [Подробное описание](./CommonAppDevelopment/feature/refreshtimeline/README.md)<img src="/CommonAppDevelopment/product/entry/src/main/resources/base/media/refresh_time_line.gif" width="200">
#### 103. Настройка HAP для множественного целевого сбора (обновлено 0419)
Данный пример демонстрирует, как собирать проект в различные версии и отдельно конфигурировать файлы ресурсов для реализации функции множественного целевого сбора. [Подробное описание](./CommonAppDevelopment/doc/MULTI_TARGETS_AND_PRODUCTS.md)#### 102. Пример чата со смайликами (обновлено 0419)
Основной целью данного примера является демонстрация того, как можно добавить изображения смайликов в сообщения чата. Это достигается с помощью использования CustomDialog для создания диалогового окна с клавиатурой смайликов, RichEdit для получения строки горячих клавиш выбранного смайлика, а также преобразования этих строк в изображения при отправке сообщений. [Подробное описание](./CommonAppDevelopment/feature/chatwithexpression/README.md)

<img src="/CommonAppDevelopment/product/entry/src/main/resources/base/media/chat_with_expression.gif" width="200">

#### 101. Длинное скриншотирование страницы (обновлено 1029)
Данный пример представляет решение для длинного скриншотирования веб-компонентов и компонента прокрутки. Поддерживает просмотр предварительного просмотра размера плавающего окна после скриншота, сохранение изображения в галерею, закрытие жестом свайпа влево и другие функции. Включает использование Web-компонента для печати веб-страницы, что позволяет запустить системное диалоговое окно через модуль print для взаимодействия с принтером. Также добавлена возможность длинного скриншотирования компонента прокрутки, поддерживающая скриншот всего компонента одним щелчком мыши и скриншот текущей страницы при прокрутке. [Подробное описание](./CommonAppDevelopment/feature/webpagesnapshot/README.md)<img src="/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_snapshot.gif" width="200">
#### 100. Реализация эффекта однослайдового перехода музыкального воспроизведения (обновлено 0419)

Эффект однослайдового перехода мини-панели воспроизведения музыки часто требуется при разработке приложений для воспроизведения музыки. В данном примере будет рассмотрено, как реализовать однослайдовый переход мини-панели, такие как анимация масштабирования мини-панели, анимация раскрытия и сворачивания мини-панели и т. д. [Подробное описание](./CommonAppDevelopment/feature/miniplayeranimation/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/mini_player_animation.gif" width="200">
#### 99. Пример отображения контента вкладок и реакции на свайпы (обновлено 0418)

В этом примере реализовано отображение содержимого вкладок на панели навигации и возможность реагировать на свайпы. [Подробное описание](./CommonAppDevelopment/feature/tabcontentoverflow/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/tabcontentoverflow.gif" width="200">
#### 98. Реализация мгновенного открытия веб-страниц с помощью предварительной загрузки (обновлено 0418)

Этот пример демонстрирует использование предварительной загрузки для быстрого открытия веб-страниц, содержащих информацию о различных случаях. Подробнее см. [Подробное описание](./CommonAppDevelopment/product/entry/README.md#использование_предварительной_загрузки_для_мгновенного_открытия_веб_страниц)/CommonAppDevelopment/product/entry/src/main/resources/base/media/helper.gif" width="200">
   #### 97. Создание пользовательских анимаций с использованием XComponent и Vsync (обновлено 0418)
   XComponent предоставляет возможность вызова графических интерфейсов OpenGLES на стороне Native. В этой статье рассматривается, как использовать события Vsync для создания пользовательских анимаций. При таком подходе рисование анимаций происходит вне основного потока UI, поэтому даже если основной поток замедлится, это не повлияет на качество анимации. [Подробное описание](. /CommonAppDevelopment/feature/xcomponentvsync/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/xcomponent_vsync.gif" width="200">
   #### 96. Пример использования Canvas для создания имитационного будильника (обновлено 0418)
   В этом примере показано, как создать имитационный будильник с использованием Canvas и таймера. Этот случай часто используется там, где требуется отображение пользовательского имитационного будильника. [Подробное описание](. /CommonAppDevelopment/feature/analogclock/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/canvas_clock.gif" width="200">
   #### 95. Обмен местами компонентов внутри Grid и List через drag-and-drop (обновлено 0417)
   В этом примере используются методы onItemDrop() и onDrop(), чтобы менять местами компоненты внутри Grid и List. [Подробное описание](. /CommonAppDevelopment/feature/dragandexchange/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/drag_and_exchange.gif" width="200">
   #### 94.Функционал видео-чатов с буллетами (обновлено 0411)

Этот пример демонстрирует, как использовать `@ohos.danmakuflamemaster` и `@ohos.gsyvideoplayer` для создания плеера с поддержкой видео-чатов. Можно настраивать стиль буллетов, ширину экрана, занимаемую ими, отправлять буллеты, включать и выключать представление буллетов. [Подробное руководство](. /CommonAppDevelopment/feature/danmakuplayer/README.md)

<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/danmaku_example.gif" width="200">

#### 93. Анимация привязки и притяжения плавающего окна (обновлено 0417)

В этом примере используется абсолютное позиционирование `position` для реализации плавающего окна внутри приложения, а также анимация `animateTo` вместе с кривыми `curves` для достижения эффекта гладкого перемещения плавающего окна и его притяжения к краям после отпускания. [Подробное руководство](. /CommonAppDevelopment/feature/floatwindow/README.md)

<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/float_window.gif" width="200">

#### 92. Пример пользовательского контекстного меню для WebView (обновлено 0411)

Этот пример объясняет, как создать пользовательское контекстное меню для кликабельных элементов (гиперссылок/изображений) в страницах WebView. [Подробное руководство](. /CommonAppDevelopment/feature/webcustompressmenu/README.md)

<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/web_custom_menu.gif" width="200">

#### 91. Пример методов перелистывания для чтения (обновлено 0411)  Этот пример демонстрирует различные способы перелистывания страниц при чтении на мобильном устройстве, такие как левое и правое перелистывание, вертикальное перелистывание, наклонное перелистывание, чтение вслух, уменьшение размера шрифта, выбор цвета фона и использование фонового изображения.  [Подробное руководство](. /CommonAppDevelopment/feature/pageflip/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/page_flip.gif" width="200">
   #### 90. Реализация записи голоса и звуковых эффектов (обновлено 0411)
   В этом примере используется AVRecord для записи аудио и получения максимальной амплитуды сигнала через метод `getAudioCapturerMaxAmplitude` для реализации UI-анимации; AVPlayer используется для воспроизведения аудио.  [Подробное руководство](. /CommonAppDevelopment/feature/voicerecordynamiceffect/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/normal_AV_record.gif" width="200">
   #### 89. Пример скроллинга вложенного списка в нижней панели (обновлено 0411)
   В этом примере показана реализация нижней панели с вложенным списком и этапами скроллинга.  [Подробное руководство](. /CommonAppDevelopment/feature/bottompanelslide/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/bottom_panel_slide.gif" width="200">
   Этот пример использует компонент List, сочетание жестов GestureGroup, свойство swipeAction и атрибут attributeModifier для реализации обмена и удаления элементов списка.#### 87. Динамическая регистрация шрифтов (обновлено 0402)
Данный пример демонстрирует использование модулей загрузки/скачивания и регистрации пользовательских шрифтов для загрузки шрифта с веб-ресурса и его последующей регистрации как приложения. Этот сценарий часто используется в случаях, когда требуется специальное оформление шрифтом. [Подробное описание](./CommonAppDevelopment/feature/fontdynamicregistration/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/font_registration.gif" width="200">

#### 86. Кэширование во время воспроизведения (обновлено 0402)
Класс `OhosVideoCache` поддерживает одновременное воспроизведение и кэширование медиаконтента. Для использования достаточно передать URL звукового или видео контента в `OhosVideoCache`, после чего установить его в проигрыватель. При этом `OhosVideoCache` будет скачивать данные и сохранять их локально, а также считывать эти данные из кеша и отправлять обратно в проигрыватель. Пользователю не требуется выполнять дополнительные действия. [Подробное описание](./CommonAppDevelopment/feature/videocache/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/video_cache.gif" width="200">#### 85. Преобразование темы фона с помощью colorPicker (обновлено 0402)
Данный пример демонстрирует использование библиотек image и effectKit, а также компонента colorPicker для выбора цвета из целевой картинки и применения его как фонового градиента. Также используются компоненты swiper для плавной прокрутки изображений. [Подробное описание](./CommonAppDevelopment/feature/effectKit/README.md)<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/color_picker.gif" width="200">

#### 84. Распознавание текста (обновлено 0402)
Данный пример демонстрирует использование свойства `enableDataDetector` компонента `text` для распознавания специальных символов в тексте. [Подробное описание](./CommonAppDevelopment/feature/wordrecognition/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/word_recognition.gif" width="200">

#### 83. Адаптивное изменение цвета фона по значку (обновлено 0402)
Данный пример объясняет, как можно адаптировать цвет фона в зависимости от выбранного изображения. [Подробное описание](./CommonAppDevelopment/feature/iconmaincolor/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/icon_main_color.png" width="200">

Пример демонстрирует использование кастомного интерфейса для сканирования QR-кодов в складывающихся устройствах для реализации адаптации при сгибе экрана. Кастомное сканирование использует системную возможность `customScan`, которая предоставляет возможности инициализации потока камеры, запуска сканирования, распознавания, остановки сканирования и освобождения ресурсов потока камеры. Состояние складывания экрана отслеживается через событие `foldStatusChange` объекта `display`.[Детальное описание](. /CommonAppDevelopment/feature/customscan/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_scan.gif" width="200">
#### 81. Пример одностраничной анимации перехода (Обновлено 0402)
Этот пример демонстрирует использование bindContentCover, transition и animateTo для создания одностраничной анимации перехода, которая часто применяется при нажатии на поле поиска на главной странице для перехода на страницу поиска. [Детальное описание](. /CommonAppDevelopment/feature/searchcomponent/README_transition.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/search_trasition.gif" width="200">
#### 80. Реализация эффекта предварительного просмотра карточек Swiper (Обновлено 1031)
Данный подход использует компонент Swiper для центрирования контейнерного представления, равномерного выделения двух сторон и реального времени масштабирования при прокрутке. Добавлена плавная градиентная заливка границ нового содержимого. Введен цветовой выборник для изменения фона в соответствии со значением темы. [Детальное описание](. /CommonAppDevelopment/feature/cardswiperanimation/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/card_swiper_animation.gif" width="200">
#### 79. Пример использования Web-компонента для предварительного просмотра PDF-файлов (Обновлено 1130)
В этом примере используется Web-компонент для предварительного просмотра PDF-файлов и документов Microsoft Office. Код состоит из компонента Tabs, содержащего четыре вкладки: просмотр локальных PDF, удаленных PDF, удаленного Excel и удаленного PPT.Каждый подкомпонент представляет собой Web-компонент. Предварительный просмотр PPT ограничен перемещением черной области сверху; требуется доработка. [Подробное описание](. /CommonAppDevelopment/feature/webpdfviewer/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/web_pdf_office_viewer.gif" width="200">
#### 78. Пример использования Navigation для адаптации к нескольким устройствам (Обновлено 0326)
При разработке приложений, которые должны быть адаптированы к различным устройствам, можно использовать свойство mode компонента Navigation для реализации одной базовой версии кода, адаптированной к множеству устройств. [Подробное описание](. /CommonAppDevelopment/doc/MULTIDEVICE_ADAPTATION.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/multi_device_adaptation.gif" width="200">
#### 77. Пример глубокого клонирования PixelMap (Обновлено 0326)
В процессе разработки изображений часто требуется глубокое копирование PixelMap. В этом примере глубокое копирование реализуется с помощью метода readPixelsToBuffer класса PixelMap. При создании исходного PixelMap необходимо установить декодирующие параметры в BGRA_8888, а при создании целевого PixelMap для глубокого копирования — в RGBA_8888.[Подробное описание документа](. /CommonAppDevelopment/feature/imagedepthcopy/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/image_depthcopy.gif" width="200">
#### 76. Переиспользование стилей между файлами и переиспользование компонентов (обновлено 0326)

Этот пример демонстрирует сценарий переиспользования стилей между файлами и переиспользования компонентов. В процессе разработки приложений мы обычно используем ArkUI компоненты с одинаковой функциональностью и стилем, такими как кнопка Button и текстовое поле Text на страницах покупок. Обычно используется метод выделения общих стилей или упаковывания в отдельный пользовательский компонент в библиотеку общих компонентов для снижения количества повторяющегося кода. [Подробное описание документа](. /CommonAppDevelopment/feature/dynamicattributes/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/dynamic_attributes.gif" width="200">
#### 75. Пример упаковки сетки изображений (обновлено 0321)

Этот пример показывает использование компонента Flex для создания различных раскладок изображений в зависимости от их количества (по умолчанию и с пользовательской конфигурацией). Этот сценарий часто используется в социальных приложениях. [Подробное описание документа](. /CommonAppDevelopment/feature/imagegridlayout/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/images_aligned.gif" width="200">
#### 74. Пример обновления версии базы данных (обновлено 0321)Этот пример демонстрирует использование интерфейсов реляционной базы данных для реализации сценария обновления версии базы данных.  
[Подробное описание документа](. /CommonAppDevelopment/feature/databaseupgrade/README.md)  
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/database_upgrade.gif" width="200">

#### 73. Пример реализации руководства пользователя новыми функциями приложения (обновлено 0321)

В этой статье объясняется, как использовать стороннюю библиотеку `high_light_guide` для навигации новых функций приложения. Через контрастность светлых областей и затемненного фона пользователи могут быстро сосредоточиться на ключевых функциях, узнать о изменениях версии и бизнес-входах.  
[Подробное описание документа](. /CommonAppDevelopment/feature/highlightguide/README.md)  
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/high_light_guide.gif" width="200">

При проведении тестирования случаев часто возникают ситуации, когда невозможно проверить корректность выполнения тестовых сценариев по изменениям в UI. В таких случаях можно использовать мониторинг логов для решения этой задачи. В этом примере используется слушатель `hilog` логов для отслеживания специфических сообщений в логах и определения успешности выполнения тестового случая.Учитывая, что ArkTS не предоставляет методы регистрации обратных вызовов для логов, данный пример использует Native API для регистрации этих обратных вызовов. Обработка логов осуществляется в пользовательской функции, которая затем передает управление обратному вызову в ArkTS.

[Подробное описание](./CommonAppDevelopment/feature/hilogmonitormanagement/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/HiLogMonitor.gif" width="200">

#### 71. Настройка заголовков запросов ImageKnife для защиты от hotlinking (обновлено 0321)
Этот пример демонстрирует использование библиотеки ImageKnife для добавления заголовка Referer в запросы для получения защищённых от hotlinking изображений. Также можно использовать этот подход для установки других заголовков запросов, таких как User-Agent, Origin или ETag. [Подробное описание](./CommonAppDevelopment/feature/imagetheft/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/image_theft.gif" width="200">

#### 70. Ручной рисунок и сохранение изображения (обновлено 0319)
В этом примере используется библиотека drawing вместе с компонентами Pen и Path для создания функциональности ручного рисования. Изображения создаются с помощью пакета image через методы packToFile и packing. [Подробное описание](./CommonAppDevelopment/feature/handwritingtoimage/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/hand_wring_to_image.gif" width="200">#### 69. Пример реализации перехода между модальными страницами (обновлено 0319)
Приведен пример реализации анимированного перехода между модальными страницами. Это достигается путем использования полумодального перехода для входа в систему, который объединяется с полноэкранной модальной страницей и компонентами перехода для создания различных сценариев входа. [Подробное описание](./CommonAppDevelopment/feature/multimodaltransion/README.md)```markdown
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/multi_modal_transition.gif" width="200">
```#### 68. Анимация однонаправленного перехода между страницами (обновлено 0319)
Данное решение представляет собой анимацию перехода при нажатии на карточку для просмотра деталей. [Подробное описание](./CommonAppDevelopment/feature/transitionanimation/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/transition_animation.gif" width="200">

#### 67. Навигационные точки swiper расположены ниже самого swiper (обновлено 0319)
Этот пример демонстрирует разделение области swiper для размещения навигационных точек ниже самого swiper. [Подробное описание](./CommonAppDevelopment/feature/indicatorbelowswiper/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/indicator_below_swiper.gif" width="200">

#### 66. Пример перехвата события отката влево (обновлено 0319)
Этот пример показывает использование компонента NavDestination с обратным вызовом `onBackPressed` для перехвата событий отката влево, предлагающих пользователям сохранить изменения и использующих preferences для долгосрочного хранения данных. [Подробное описание](./CommonAppDevelopment/feature/sideslipintercept/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/side_slip_Intercept.gif" width="200">

#### 65. Пример упаковки API ArkTS в Native (обновлено 0312)
Для некоторых приложений основной язык программирования — C/C++, но некоторые интерфейсы HarmonyOS доступны только через ArkTS. В этом примере метод `Select` класса `DocumentViewPicker` используется как пример упаковки API ArkTS в Native. [Подробное описание](./CommonAppDevelopment/feature/etswrapper/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/ets_wrapper_example.gif" width="200">/CommonAppDevelopment/product/entry/src/main/resources/base/media/ets_wrapper.gif" width="200">
#### 64. Одноранговое рендеринг ArkWeb (обновлено 0312)
Эта реализация демонстрирует одноранговое рендеринг ArkWeb: прямое рендеринг системных компонентов на передний H5-интерфейс, что позволяет использовать возможности, недоступные для H5-компонентов, и улучшает плавность пользовательского опыта. [Подробное описание](. /CommonAppDevelopment/feature/nativeembed/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/native_embed.jpg" width="200">
#### 63. Пример использования общего экземпляра компонента между страницами (обновлено 0312)
Этот пример предлагает решение для использования общего экземпляра компонента между страницами: управление страницами с помощью контейнера Stack, где нижний слой содержит картографический компонент, а верхний — компонент навигации. [Подробное описание](. /CommonAppDevelopment/feature/componentinstancesharedinpages/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/component_instance_shared_in_pages">
```#### 62. Пример отслеживания нескольких файлов при скачивании (обновлено 0312)
Этот пример демонстрирует, как использовать модуль загрузки и отправки запросов для отслеживания процесса скачивания нескольких файлов, включая отслеживание прогресса каждого файла, приостановку загрузки, завершение загрузки и другие ситуации. [Подробное описание](. /CommonAppDevelopment/feature/multiplefilesdownload/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/multiple_files_download.gif" width="200">
#### 61.Пример использования безопасной пользовательской клавиатуры (обновлено 0312)
Приложения финансового типа обычно используют пользовательскую безопасную клавиатуру при вводе пароля. Этот пример показывает, как использовать компонент `TextInput` для создания сценария с безопасной пользовательской клавиатурой, который включает привязку `TextInput.customKeyboard` к пользовательской клавиатуре, создание пользовательского макета клавиатуры и обновление состояния клавиатуры. [Подробное описание](./CommonAppDevelopment/feature/customsafekeyboard/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_safe_keyboard.gif" width="200">

#### Пример адаптации экрана с вырезами (обновлено 0312)
Этот пример демонстрирует использование методов `getDefaultDisplaySync` и `getCutoutInfo` для адаптации экрана с вырезами. Этот сценарий часто используется в погружении. [Подробное описание](./CommonAppDevelopment/feature/diggingholescreen/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/digging_hole_screen.gif" width="200">

#### Пример управления маршрутом (обновлено 0312)
В этом примере рассматривается получение имени модуля и пути источника страницы при переходе обратно через маршрут. В реальных сценариях одна и та же страница может отображаться с различными UI в зависимости от источника. [Подробное описание](./CommonAppDevelopment/common/routermodule/README_ROUTER_REFERRER.md)

#### Пример эффекта переключения изображений при горизонтальном перемещении (обновлено 0304)В этом примере используется слушатель жестов для изменения размера области отображения и эффекта содержимого слева и справа в реальном времени. Это достигается путём привязки события `PanGesture` из жеста панели к событию `gesture`, чтобы получить расстояние перемещения. При перемещении регулируется ширина двух компонентов `Image`, что позволяет успешно реализовать функционал переключения изображений при горизонтальном перемещении. [Подробное описание](./CommonAppDevelopment/feature/dragtoswitchpictures/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/drag_to_switch_pictures.gif" width="200">

#### 57. Пример реализации анимированного голосования (обновлено 0304)
Этот пример демонстрирует использование компонента `Polygon` из компонента `Drawing` для создания компонента голосования `pk` с использованием явной анимации и `borderRadius`. [Подробное описание документа](./CommonAppDevelopment/feature/votingcomponent/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/voting_component.gif" width="200">

#### 56. Пример преобразования китайских символов в пиньинь (обновлено 0304)
В этом примере показано использование компонента `pinyin4js` из сторонней библиотеки для преобразования китайских символов в большие буквы пиньинь. [Подробное описание документа](./CommonAppDevelopment/feature/chinesetopinyin/README.md)

<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/Chinese_to_pinyin.gif" width="200">

#### 55. Пример эффекта скольжения нижнего ящика (обновлено 0304)  Этот пример подробно объясняет использование `List` для создания эффекта скольжения нижнего ящика, а также погружение интерфейса в полноэкранный режим и возможность перемещения фоновой карты.  [Подробное описание документа](. /CommonAppDevelopment/feature/bottomdrawerslidecase/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/bottom_drawer_slide.gif" width="200">
   #### 54.  MpChart для здоровья и спорта (обновлено 0304)
   MpChart — это библиотека графиков, которая включает различные типы диаграмм, используемых для представления бизнес-данных, таких как графики продаж и изменения цен акций. Это позволяет разработчикам быстро создавать графический интерфейс. MpChart включает линейные графики, столбчатые диаграммы, круговые диаграммы, свечные графики, пузырьковые графики, радарные диаграммы и водопадные графики. В этом примере демонстрируется использование компонентов MpChart. Эти компоненты часто используются для визуализации данных.  [Подробное описание документа](. /CommonAppDevelopment/feature/barchart/src/main/ets/health/README.md)
   <img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/mp_charts.gif" width="200">
   #### 53.  Пример копирования большого файла (обновлено 0302)
   Копирование файлов является распространённой задачей при разработке приложений. Обычно существуют два подхода: либо читать и записывать полный контент файла, либо использовать буфер для многократного чтения и записи.Первый метод прост в использовании, но требует много памяти при работе с большими файлами, что может негативно влиять на производительность приложения; второй метод занимает меньше памяти, но программирование более сложное. В данном примере показано, как использовать буфер для копирования большого файла `rawfile` в песочницу приложения.  
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/big_file_copy.gif" width="200">  
#### 52. Пример получения фотографий с помощью камеры через веб (обновлено 0302)  
В этом примере показано, как запустить камеру на уровне HTML для съемки фото и получить полученное изображение. [Подробное описание документа](. /CommonAppDevelopment/feature/webcamcapture/README.md)  
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/web_get_camera_image.gif" width="200">  
#### 51. Элементы выходят за пределы области List (обновлено 0302)  
Этот пример демонстрирует метод реализации выравнивания компонентов внутри компонента List так, чтобы они выходили за границы контейнера. [Подробное описание](. /CommonAppDevelopment/feature/listitemoverflow/README.md)  
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/listitem_overflow.gif" width="200">  
#### 50. Реализация анимации прокрутки цифр (обновлено 0229)  
В этом примере подробно объясняется способ реализации анимации прокрутки цифр.Этот подход часто используется при обновлении чисел, например, при обновлении количества билетов на странице. [Подробное описание](. /CommonAppDevelopment/feature/digitalscrollanimation/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/number_scroll.gif" width="200">
#### 49. Пример использования AI для выделения объектов на изображении (обновлено 0229)
В этом примере демонстрируется использование AI для выделения объектов на изображении: с помощью `Image.enableAnalyzer(true)` можно выполнить выделение объектов при долгом нажатии на изображение и перемещении/копировании его в другие приложения. [Подробное описание](. /CommonAppDevelopment/feature/imageenableanalyzer/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/image_enableanalyzer.gif" width="200">
#### 48. Пример реализации анимации скроллинга до конкретной позиции списка (обновлено 0229)
В этом примере используется метод `currentOffset` для получения и записи смещения, затем метод `scrollTo` используется для перехода к последней просматриваемой позиции списка, что позволяет гладко скроллировать до этой позиции. [Подробное описание](. /CommonAppDevelopment/feature/listslidetohistory/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/list_slide_to_history.gif" width="200">
#### 47. Пример анимации сворачивания заголовка (обновлено 0229)
В этом примере рассматривается реализация анимации сворачивания заголовка в приложении заметок. [Подробное описание](. /CommonAppDevelopment/feature/expandtitle/README.md)
<img src=". /CommonAppDevelopment/product/entry/src/main/resources/base/media/expand_title.gif" width="200">```markdown
<img src="./CommonAppDevelopment/product/entry/src/main/resources/base/media/paint_component.gif" width="200">
#### 46. Пример использования компонента рисования для создания анимации прогресса (обновлено 0229)
В этом примере показана реализация анимации прогресса с использованием компонентов Circle и Path в компоненте рисования. Этот подход часто применяется для отображения изменения уровня зарядки батареи телефона, уровня топлива автомобиля и изменения уровня воды. [Подробное описание](./CommonAppDevelopment/feature/paintcomponent/README.md)

<img src="./commonappdevelopment/product/entry/src/main/resources/base/media/image_compression.gif" width="200">
#### 45. Схема сжатия изображений (обновлено 0229)
Этот пример демонстрирует, как можно использовать упаковку и масштабирование для сжатия изображений, а также как сжимать изображения в различных форматах и сохранять их в галерею. [Подробное руководство](./commonappdevelopment/feature/imagecompression/README.md)

<img src="./commonappdevelopment/product/entry/src/main/resources/base/media/lottie_animation.gif" width="200">
#### 44. Lottie анимация (обновлено 0229)
Lottie — это библиотека анимации для OpenHarmony, которая может анализировать анимацию в формате JSON, экспортированную из Adobe After Effects через плагин Bodymovin, и отображать её локально на мобильных устройствах. Анимация адаптируется к различным размерам экранов и разрешениям, а также поддерживает взаимодействие с пользователями за счет добавления событий прикосновения или других действий пользователя. [Подробное руководство](./commonappdevelopment/feature/lottieanimation/README.md)

|   |---nativerawfile                         // Пример чтения части содержимого файла из nativerawfile на стороне Native
 |   |---navigationparametertransfer           // Пример передачи объектов между страницами навигации
 |   |---pageturninganimation                  // Пример анимации переворота страниц
 |   |---pendingitems                           // Пример реализации редактирования списка
 |   |---photopickandsave                       // Пример выбора, загрузки и сохранения изображений
 |   |---pulltorefreshnews                      // Пример реализации функции прокрутки для обновления данных
 |   |---secondarylinkage                       // Пример реализации вторичной связи
 |   |---slidetohideanddisplace                // Пример скрытия информации и перемещения компонентов при свайпах
 |   |---variablewatch                          // Пример наблюдения за многими уровнями вложенных объектов класса
 |   |---verifycode                            // Пример макета верификационного кода
 ```   |   |---vibrateeffect                       // Основной слой функциональности - вибрация и анимация тряски
     |   |---customcalendarpickerdialog          // Основной слой функциональности - кастомный диалог выбора календаря
     |   |---navigationbarchange                 // Основной слой функциональности - пример изменения навигационной панели
     |   |---customview                          // Основной слой функциональности - кастомный вид для реализации эффекта Tab
     |   |---waterripples                        // Основной слой функциональности - пример использования водяных волн для эффекта признания песни
     |   |---citysearch                          // Пример выбора города    |   |---componentstack                    // Пример реализации эффекта "прилипания" компонентов при прокрутке
     |   |---dragandexchange                   // Пример перемещения и обмена компонентами внутри Grid и List
     |   |---foldablescreencases               // Пример музыкального проигрывателя для складывающегося экрана
     |   |---imagecomment                      // Пример публикации комментариев к изображению
     |   |---mediafullscreen                   // Пример полнокадрового воспроизведения видео
     |   |---swipercomponent                   // Пример многоуровнего слайдера
     |   |---swipersmoothvariation             // Пример гладкого изменения высоты слайдера
     |   |---decompressfile                    // Пример декомпрессии файла в рабочем потоке
     |   |---paintcomponent                    // Пример использования компонента рисования для создания анимации прогресса
     |   |---lottieview                        // Пример использования Lottie
     |   |---imagecompression                  // Пример сжатия изображений
     |   |---votingcomponent                   // Пример компонента голосования
     |   |---webgetcameraimage                 // Пример запуска камеры из WebView
     |   |---sidebaranimation                  // Пример анимации появления/скрытия боковой панели
     |   |---imageenableanalyzer               // Пример анализа изображений с использованием AI для выделения объектов
     |   |---indicatorbelowswiper              // Пример расположения индикатора ниже слайдера
     |   |---bigfilecopy                       // Пример копирования больших файлов
     |   |---diggingholescreen                 // Пример адаптации к экранам с вырезом    |   |---dragtoswitchpictures              // Пример переключения изображений путем перетаскивания
     |   |---listitemoverflow                  // Пример элементов, выходящих за границы списка
     |   |---multiplefilesdownload             // Пример мониторинга скачивания нескольких файлов
     |   |---searchcomponent                   // Пример страницы поиска с эффектом "один кадр"
     |   |---dynamicattributes                 // Пример переиспользования стилей и компонентов между файлами
     |   |---etswrapper                        // Пример обёртки NAPI для интерфейсов ArkTS
     |   |---handwritingtoimage                // Преобразование рукописного ввода в изображение
     |   |---multimodaltransition              // Пример реализации перехода между модальностями страниц
     |   |---nativeembed                       // Встраивание ArkWeb на одном уровне
     |   |---sideslipintercept                 // Пример перехвата события скольжения с боковой стороны
     |   |---webpdfviewer                      // Пример реализации просмотра PDF файлов в компоненте Web
     |   |---listslidetoHistory                // Пример реализации анимации скольжения списка до конкретной позиции
     |   |---imagetheft                        // Пример правильной конфигурации заголовков запроса ImageKnife для защиты от кражи ссылок
     |   |---componentinstanceSharedInPages    // Пример использования общего экземпляра компонента между страницами
     |   |---fontDynamicRegistration           // Пример динамической регистрации шрифтов
     |   |---effectKit                         // Пример использования colorPicker для изменения цвета фона в соответствии со значением темы    |   |---cardswiperanimation               // Пример создания пользовательского эффекта пролистывания карточек
     |   |---customscan                        // Пример решения сканирования QR-кода для складывающегося экрана
     |   |---imagedepthcopy                    // Пример глубокого копирования PixelMap
     |   |---pageflip                          // Пример различных способов перелистывания страниц чтения
     |   |---videocache                        // Пример одновременного кэширования и воспроизведения видео
     |   |---iconmaincolor                     // Пример адаптации цвета фона в зависимости от значка
     |   |---bottomdrawerslidecase             // Пример эффекта скольжения нижнего выдвижного меню
     |   |---chinesetopinyin                   // Пример преобразования китайских символов в пиньинь
     |   |---customsafekeyboard                // Пример создания безопасной клавиатуры
     |   |---nativesavepictosandbox            // Пример сохранения изображения нативным образом в песочницу приложения
     |   |---shortvideo                        // Пример реализации переключения короткого видео
     |   |---digitalscrollanimation            // Пример реализации анимации цифрового скроллинга
     |   |---expandtitle                       // Пример раскрывающейся заголовочной анимации
     |   |---pageloading                       // Пример реализации эффекта загрузки страницы
     |   |---databaseupgrade                   // Пример обновления версии базы данных
     |   |---hilogmonitormanagement            // Пример мониторинга HiLog логов для тестирования случаев
     |   |---transitionanimation               // Пример реализации анимации перехода страницы одним кадром    |   |---imagegridlayout                   // Пример упаковки изображений в сетку 9x9
     |   |---highlightguide                    // Пример реализации руководства пользователя для новых функций приложения
     |   |---wordrecognition                   // Пример распознавания текста
     |   |---bottompanelslide                  // Пример скроллинга вложенного списка в нижней панели
     |   |---danmakuplayer                     // Видео с функцией отображения эмодзи
     |   |---listexchange                      // Пример обмена элементами списка
     |   |---tabcontentoverflow                // Пример, где контент tabContent может отображаться на tabBar и реагировать на события прокрутки
     |   |---chatwithexpression                // Пример чата с использованием эмодзи
     |   |---floatwindow                       // Пример анимированного перемещения и прилипания плавающего окна
     |   |---gridexchange                      // Пример обмена элементами сетки
     |   |---miniplayeranimation               // Реализация эффекта однофотографического перехода между страницами музыкального проигрывателя
     |   |---refreshtimeline                   // Пример реализации эффекта раскрывающейся картинки и временной шкалы при прокрутке
     |   |---webpagesnapshot                   // Пример длинной снапшот-캡쳐 для веб-страниц
     |   |---blendmode                         // Пример смешивания изображений
     |   |---secondfloorloadanimation          // Пример реализации эффекта входа во второе этажное пространство при прокрутке
     |   |---styledtext                        // Пример использования Text для выделения части текста и создания гипертекстовых ссылок    |   |---navigationinterceptor             # Пример перехвата навигации
     |   |---customdialog                      # Пример глобального диалогового окна
     |   |---textexpand                        # Пример раскрытия и сворачивания текста
     |   |---imageresizable                    # Пример масштабируемости границ или фонового изображения
     |   |---watermark                         # Пример водяного знака
     |   |---textoverflow                      # Пример обрезки длинного текста
     |   |---fadingedge                        # Пример реализации затухающих краёв
     |   |---customstepper                     # Пример пользовательского Stepper
     |   |---searchswiper                      # Пример автоматической прокрутки популярных слов в поле поиска
     |   |---performance  
     |   |   |---highlyloadedcomponentrender   # Пример кода статьи о правильной обработке рендера компонента с высокой нагрузкой
     |   |   |---customreusablepool            # Пример кода статьи о создании пользовательской пули повторного использования компонентов
     |   |   |---operaterdbintaskpool          # Пример реализации операций с базой данных в пуле задач TaskPool
     |   |   |---imperativedynamiclayouts      # Пример использования расширений FrameNode для ArkUI для создания динамических макетов
     |   |---videolinkagelist                  # Пример связывания прокрутки видео-карточек и списков
     |   |---navdestinationdialog              # Пример диалогового окна NavDestination
     |   |---customkeyboardtoh5                # Пример вызова пользовательского клавиатурного ввода для H5-страницы
     |   |---sendmessage                       # Пример отправки сообщений    |   |---skeletondiagram                   // Пример скелетной диаграммы
     |   |---palette                           // Пример палитры цветов
     |   |---imagemosaic                       // Реализация эффекта мозаики в редакторе изображений
     |   |---calendarswitch                    // Пример переключения между календарями
     |   |---eraser                            // Пример использования резинки
     |   |---bluetooth                         // Реализация Bluetooth-соединения между сервером и клиентом
     |   |---customdecoration                  // Пример пользовательского декора
     |   |---videolistautoplay                 // Автоматическое воспроизведение видео при прокрутке списка
     |   |---editaddress                       // Пример редактирования адреса доставки
     |   |---customdrawtabbar                  // Пример пользовательской TabBar с выпуклыми и вогнутыми вкладками
     |   |---verticalhorizontallinkage         // Пример взаимосвязи вертикальных и горизонтальных списков
     |   |---livedetectionandencryption        // Пример распознавания лиц и шифрования данных
     |   |---collapsemenu                      // Пример сворачиваемого меню
     |   |---decodeheifimage                   // Пример декодирования изображений HEIF
     |   |---h5cache                           // Пример кэширования ресурсов H5-страниц
     |   |---addressrecognize                  // Пример распознавания текста на изображении с помощью искусственного интеллекта
     |   |---groupavatar                       // Пример объединения аватаров группы
     |   |---keyboardavoid                     // Пример избежания компонентами от появления мягкой клавиатуры
     |   |---patternlock                       // Пример графического пароля    |   |---componentinstancesharedinpages    // Пример диалогового окна с меткой на карте
     |   |---publishmultimediaupdates          // Пример публикации мультимедийных обновлений
     |   |---compressfile                      // Пример сжатия файла
     |   |---customaddresspicker               // Пример пользовательского выбора адреса
     |   |---videocreategif                    // Создание GIF-анимации из видео
     |   |---clickanimation                    // Пример анимации двойного клика на стриминговой странице
     |   |---toolbox                           // Пример плавающего инструментария
     |   |---networkstatusobserver             // Пример наблюдения за состоянием сети
     |   |---multiplescreening                 // Пример множественной фильтрации
     |   |---limitedheightbottomdialog         // Пример ограничения высоты нижнего диалогового окна
     |   |---faceandfingerprintunlocking       // Пример разблокировки по лицу и отпечаткам пальцев
     |   |---cuberotateanimation               // Пример реализации  Yöntem-анимации поворота куба```markdown
    |   |---multicolumndisplay                # Пример многострочного отображения информации
     |   |---sharebutton                       # Пример кнопки с QR-кодом для разделения
     |---libs
     |---product 
     |   |---entry                             # Уровень кастомизации продукта - вход в приложение
     ```### Уровень общих возможностей
Уровень общих возможностей предназначен для хранения общих базовых возможностей, таких как общие UI-компоненты, управление данными, внешние взаимодействия и библиотеки инструментов. Общие возможности могут использоваться как приложениями, так и метасервисами.

Уровень общих возможностей обеспечивает надежную функциональную поддержку для верхнего уровня базовых характеристик и уровня кастомизации продуктов, гарантируя стабильность и удобство обслуживания всего приложения/метасервиса. Общий уровень возможностей для универсального подхода к разработке приложений App включает следующие модули: [**Логирование**](./CommonAppDevelopment/common/utils/src/main/ets/log/Logger. ets), [**Компонент описания функций**](./CommonAppDevelopment/common/utils/src/main/ets/component/FunctionDescription. ets).

## Вспомогательная платформа
1. Поддерживает последнюю версию HarmonyOS Next;
2. Поддерживает модель Stage