Модуль: 4. Разработка

Урок 7. Вёрстка под vk.com и m.vk.com

Главное в уроке

• •

  Практически все компоненты библиотеки VKUI адаптируются под габариты экрана. В нашем приложении-примере, например, экран с информацией о блюде отображается в десктопных браузерах и на мобильных устройствах по-разному.

• •

  Чтобы информация о параметрах адаптируемости передавалась в компоненты приложения, верхнеуровневый элемент приложения надо обернуть в AdaptivityProvider, который, в свою очередь, должен находиться в ConfigProvider.

  TypeScript

  <ConfigProvider> // Надо добавить этот компонент <AdaptivityProvider {...adaptivity}> // Надо добавить этот компонент <DataContextProvider> <AppRoot> <RouterProvider router={router}> <App /> // Приложение </RouterProvider> </AppRoot> </DataContextProvider> </AdaptivityProvider> </ConfigProvider>
• •

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

• •

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

• •

  Чтобы изменить размеры элемента <iframe>, в котором отображается мини-приложение в десктопной версии сайта ВКонтакте, используйте событие VKWebAppResizeWindow.

Полезные ссылки

• •
  Клиентская часть (исходный код),
  cмотрите фрагменты кода по #M4L7.
• •
  Серверная часть (исходный код)
• •
  Мини-приложение «Блюдо дня»
• •
  Адаптивность (документация VKUI)
• •
  Событие VKWebAppUpdateConfig
• •
  Событие VKWebAppResizeWindow