Пример использования HTML-интерфейса для мобильного приложения (+JS, +CSS)

18.11.24

Разработка - Мобильная разработка

Очередной "эпос" на тему применения HTML для отрисовки интерфейса мобильного приложения с кратким описанием возможностей HTML, JavaScript, CSS и сквозным примером. Статья нацелена на тех, кто только "присматривается" к возможностям интеграции HTML и мобильной 1С, чтобы ответить на основные вопросы, которые возникают в самом начале.

Файлы

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование Скачано Купить файл
Пример использования HTML-интерфейса для мобильного приложения (+JS, +CSS):
.zip 180,39Mb
10 2 500 руб. Купить

Подписка PRO — скачивайте любые файлы со скидкой до 85% из Базы знаний

Оформите подписку на компанию для решения рабочих задач

Оформить подписку и скачать решение со скидкой

Вы можете заказать платную доработку или адаптацию этой разработки под вашу конфигурацию на «Бирже заказов».

  • 0% комиссии — оплата напрямую исполнителю;
  • Исполнители любого масштаба — от отдельных специалистов до команд под проект;
  • Прямой обмен контактами между заказчиком и исполнителем;
  • Безопасная сделка — при необходимости;
  • Рейтинги, кейсы и прозрачная система откликов.

Предисловие

Интерфейс управляемых форм в мобильном приложении сильно контрастирует с внешним видом большинства привычных мобильных приложений. Используя HTML-документ в качестве рабочей области, можно достаточно серьёзно прокачать визуальную составляющую своего программного продукта.

Понятно, что этот вариант хоть и рабочий, но далеко не идеальный. Вероятно, для мобильной разработки правильней было бы использовать язык, который  под неё лучше заточен, но лично для меня камнем преткновения становится время, которое необходимо затратить на изучение механизмов хранения структурированных данных, работы с файлами, взаимодействия с другими базами, формирования отчётов и прочих привычных вещей. При этом 1С предоставляет довольно широкий функционал для написания движка мобильного приложения, а поверхностных знаний HTML, CSS, JS и имеющихся в сети готовых библиотек вполне достаточно для возможности отрисовки красивой картинки.

В общем, у каждого самурая свой путь. 

HTML-документ

Итак, в данном подходе рабочей областью является HTML-страница или HTML-документ

Его содержимое представляет собой набор тэгов, который интерпретируется в интерфейс. На текущий момент в 1С за это отвечает встроенная в платформу библиотека WebKit.

Для формирования рабочей области создадим обработку, в форме которой  добавим строковый реквизит (ниже в примерах - ТекстHtml) и выведем его на форму в качестве поля вида Поле HTML документа (ПолеHtml). Саму форму укажем в качестве рабочей области начальной страницы конфигурации.

 
 Вкратце для тех, кто не работал ещё с HTML

Вступайте в нашу телеграмм-группу Инфостарт

мобильное приложение HTML JavaScript JS CSS

См. также

Мобильная разработка Сканер штрих-кода Терминал сбора данных 1С:Предприятие 8 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Сбор заказов, инвентаризация, проверка ценников, просмотр полной информации об остатках и ценах со смартфона Онлайн - все это содержит в себе решение 1С "Штрихкод-информер" (штрих-код чекер). Отправка данных со смартфона выполняется либо напрямую в открытую форму документа, отсканировав QR-код, либо в общую корзину учетной системы, не подходя к компьютеру. Кассир или оператор сможет просмотреть список присланных данных и загрузить в любую форму, поддерживающую работу с ТСД. Для работы с мобильным приложением требуется опубликовать HTTP-сервис из поставляемого расширения.

3050 руб.

03.12.2018    71869    246    106    

189

Мобильная разработка Программист 1С 8.3 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Абонемент ($m)

Эта подключаемая обработка для любой конфигурации 1С, позволяет отправить любой объект (и рекуррентно связанные с ним объекты) на устройства c NodaLogic, где они будут полнофункциональны и доступны офлайн, по ним можно вести переписку как со стороны чата в NodaLogic, так и со стороны 1С, заполнять данные и загрузить в 1С по мере надобности. Т.е. обработка содержит генератор UI/UX интерфейса NodaLogic и создает объекты для обмена. При этом не надо ни разбираться в NodaLogic вообще, ни иметь базу/сервер/решение на стороне NL – только учетка и мобильное устройство, а со стороны 1С достаточно галочками отметить, какие поля должны быть на формах. Все данные хранятся в ХранилищеОбщихНастроек, поэтому никакого расширения не нужно, сервера со стороны 1С для связи с устройствами тоже не нужно. Тестировалось на 1С:Предприятие 8.3 (8.3.27.1326), 1С:Комплексная автоматизация 2 (2.4.8.63)

1 стартмани

12.05.2026    1035    5    informa1555    1    

13

Мобильная разработка Программист Бесплатно (free)

Мне нужен был высокопроизводительный язык для фронт-сайда, я его сделал, а потом подумал, а что, если сделать 1С-синтаксис? Вот что из этого вышло. Продолжение статьи https://infostart.ru/1c/articles/2614496/

12.03.2026    2162    informa1555    11    

14

Мобильная разработка Программист 1С 8.3 1С:Комплексная автоматизация 2.х 1С:КА Управленческий учет Абонемент ($m)

В этой статье простейший документ - ориентированный пример складского учета на клиент-серверной платформе NodaLogic с автономными мобильными рабочими местами. Это чисто скелетный пример как можно вынести часть учета во внешний контур. И расширение - модуль связи с 1С. Тестировалось на платформе 1С:Предприятие 8.3 (8.3.27.1326), 1С:Комплексная автоматизация 2 (2.4.8.63).

1 стартмани

13.02.2026    2940    informa1555    5    

26

Мобильная разработка 1С:Предприятие 8 1С:Управление торговлей 11 Оптовая торговля, дистрибуция, логистика Россия Платные (руб)

"МРМ:Маркировка" для работы с конфигурациями 1С - готовое решение, позволяющее быстро автоматизировать работу учетной системы 1С на ордерном и безордерном складе при работе как с товарами, подлежащими обязательной маркировке, так и с товарами, учет которых построен на базе линейных штрих-кодов. Решение поддерживает большинство распространенных складских документов, необходимых для работы кладовщику на терминале сбора данных. Для начинающих пользователей имеется подробная инструкция по работе с приложением в разрезе видов документов.

19000 руб.

24.06.2025    3614    26    0    

4

Мобильная разработка Программист 1С:Предприятие 8 1С:ERP Управление предприятием 2 1С:Комплексная автоматизация 2.х Абонемент ($m)

Товары (либо другие учетные объекты) могут быть промаркированы штрихкодами либо быть без штрихкодов, но с число-буквенным обозначением (артикулом, VIN-номером и т.д.). И та, и другая ситуация не проблема для SimpleUI. Но что делать, если нет ни того, ни другого? Вообще никакой маркировки. Как можно максимально ускорить работу с таким объектами? В статье показываю новые фичи релиза и готовые для встраивания поисковые комбайны на все случаи жизни. Дополнение к основной статье https://infostart.ru/1c/tools/1153616/

1 стартмани

14.04.2025    3779    9    informa1555    0    

17

Мобильная разработка Программист 1С:Предприятие 8 Абонемент ($m)

В Simple появился еще один онлайн-режим, не через REST-API, а через веб-сокеты. Показываю, что это дает, ради чего было сделано. А также два чисто онлайновых примера с такими обработчиками еще и с использованием новой ActiveCV 2.0. Дополнение к основной статье https://infostart.ru/1c/tools/1153616/

1 стартмани

07.02.2025    7016    informa1555    3    

28
Вознаграждение за ответ
Показать полностью
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. Константин С. 686 21.11.24 17:27 Сейчас в теме
Избитая тема)
Но описана в доступной форме.
Пробуй выложить apk в свободный доступ)
2. maxx 1002 30.01.25 12:08 Сейчас в теме
Ничего избитого не вижу. Кучу статей про интеграцию с HTML документом и вот в мобильном приложении их очень мало или они достаточно старые. И эти статьи про то как можно вставить веб-приложение (игру), но мало информации про общение с 1С из HTML документа. А там проблемы есть, они описаны, не ловятся события, и рецепты так себе по обходу.

А проблема в мобильном приложении 1С, что событие нажатий (click) не работает и не ловится на стороне 1С и только тут нашёл, что можно использовать событие ontouchstart передавая ссылка href и тогда событие на форме 1С HTMLПриНажатии срабатывает. Проверил на мобильной платформе 8.3.25

Спасибо.
akR00b; Stan; +2 Ответить
3. akR00b 26 19.12.25 08:11 Сейчас в теме
(2) поддерживаю, пришел сюда именно по такому же запросу! Спасибо Автору, актуалити!
4. Suker86 86 11.02.26 19:57 Сейчас в теме
Александр, благодарю за пример !
5. RustIG 1979 26.02.26 08:55 Сейчас в теме
Спасибо! Профессионально написано.
Для отправки сообщения требуется регистрация/авторизация