https://wiki.smartplayer.org/index.php?action=history&feed=atom&title=Widget_API
Widget API - История изменений
2026-05-03T02:05:27Z
История изменений этой страницы в вики
MediaWiki 1.45.1
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=17696&oldid=prev
A.Nikonov: /* Модуль для создания виджетов на основе шаблона */
2025-09-25T10:40:52Z
<p><span class="autocomment">Модуль для создания виджетов на основе шаблона</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 13:40, 25 сентября 2025</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l18">Строка 18:</td>
<td colspan="2" class="diff-lineno">Строка 18:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В шаблоне виджета можно встретить методы, которые присутствуют исключительно для ознакомления, что бы можно было увидеть живой пример взаимодействия, регистрации методов для общения с клиентскими приложениями и т.д. Ненужное можно удалить.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В шаблоне виджета можно встретить методы, которые присутствуют исключительно для ознакомления, что бы можно было увидеть живой пример взаимодействия, регистрации методов для общения с клиентскими приложениями и т.д. Ненужное можно удалить.</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[https://video_talks.hb.ru-msk.vkcloud-storage.ru/write_instructions/widgets/Screencast%20from%202025-09-25%2013-26-39.webm '''Видеоинструкция''']</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Модули в зависимостях ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Модули в зависимостях ==</div></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-17340:rev-17696:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=17340&oldid=prev
A.Nikonov: /* Модуль для создания виджетов на основе шаблона */
2025-08-29T11:40:26Z
<p><span class="autocomment">Модуль для создания виджетов на основе шаблона</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 14:40, 29 августа 2025</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l8">Строка 8:</td>
<td colspan="2" class="diff-lineno">Строка 8:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Создание шаблона виджета:'''</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Создание шаблона виджета:'''</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для того, что бы создать шаблон виджета, необходима установленная версия NodeJS версии 12.XX.XXX, npm версии 6.XX.XX</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для того, что бы создать шаблон виджета, необходима установленная версия NodeJS версии 12.XX.XXX, npm версии 6.XX.XX</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><br></del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В командной строке необходимо ввести: ''''npx sp_create_widget_template widgetName'''' где ''''widgetName'''' - название виджета, оно так же будет являться типом виджета.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В командной строке необходимо ввести: ''''npx sp_create_widget_template widgetName'''' где ''''widgetName'''' - название виджета, оно так же будет являться типом виджета.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><br></del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В текущую папку, из которой началась установка, будет создана папка с названием виджета, в которой будет находиться шаблон, так же, автоматически будут установлены необходимые зависимости. Установить или обновить пакеты можно вручную через команду ''''npm i'''' или ''''npm i имя_пакета''''.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В текущую папку, из которой началась установка, будет создана папка с названием виджета, в которой будет находиться шаблон, так же, автоматически будут установлены необходимые зависимости. Установить или обновить пакеты можно вручную через команду ''''npm i'''' или ''''npm i имя_пакета''''.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><br></del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для того, что бы запустить dev-сервер необходимо ввести команду ''''npm start'''', сборка виджета осуществляется командой ''''npm run build'''', после чего в корне появится папка build со сборкой, а так же внутри папки будет zip архив с копией того, что находится в папке build, этот архив понадобится, если нужно будет открыть виджет в личном кабинете, предварительно скопировав архив туда.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для того, что бы запустить dev-сервер необходимо ввести команду ''''npm start'''', сборка виджета осуществляется командой ''''npm run build'''', после чего в корне появится папка build со сборкой, а так же внутри папки будет zip архив с копией того, что находится в папке build, этот архив понадобится, если нужно будет открыть виджет в личном кабинете, предварительно скопировав архив туда.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><br></del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В папке '''src/components''' можно увидеть компонент '''TestComponent''', который в свою очередь импортирован в '''AppMain'''. Он присутствует для примера и его можно заменить своим, так же стоит обратить внимание на стиль этого компонента, он прописан для позиционирования в рамках окна настроек виджета (о которых чуть ниже). Начинать разработку рекомендуется именно с компонента appMain.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В папке '''src/components''' можно увидеть компонент '''TestComponent''', который в свою очередь импортирован в '''AppMain'''. Он присутствует для примера и его можно заменить своим, так же стоит обратить внимание на стиль этого компонента, он прописан для позиционирования в рамках окна настроек виджета (о которых чуть ниже). Начинать разработку рекомендуется именно с компонента appMain.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><br></del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В шаблоне виджета можно встретить методы, которые присутствуют исключительно для ознакомления, что бы можно было увидеть живой пример взаимодействия, регистрации методов для общения с клиентскими приложениями и т.д. Ненужное можно удалить.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В шаблоне виджета можно встретить методы, которые присутствуют исключительно для ознакомления, что бы можно было увидеть живой пример взаимодействия, регистрации методов для общения с клиентскими приложениями и т.д. Ненужное можно удалить.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-17339:rev-17340:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=17339&oldid=prev
A.Nikonov в 11:39, 29 августа 2025
2025-08-29T11:39:56Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 14:39, 29 августа 2025</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Строка 1:</td>
<td colspan="2" class="diff-lineno">Строка 1:</td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== Вступление ==</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Данная инструкция описывать как создать виджеты для платформы SmartPlayer. Виджеты могут работать на таких операицонных системах как: Windows / Linux / Raspberry Pi / Android / Tizen / WebOS / BrightSign</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Модуль для создания виджетов на основе шаблона ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Модуль для создания виджетов на основе шаблона ==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Внимание!'''</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Внимание!'''</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5">Строка 5:</td>
<td colspan="2" class="diff-lineno">Строка 8:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Создание шаблона виджета:'''</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Создание шаблона виджета:'''</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для того, что бы создать шаблон виджета, необходима установленная версия NodeJS версии 12.XX.XXX, npm версии 6.XX.XX</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для того, что бы создать шаблон виджета, необходима установленная версия NodeJS версии 12.XX.XXX, npm версии 6.XX.XX</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><br></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В командной строке необходимо ввести: ''''npx sp_create_widget_template widgetName'''' где ''''widgetName'''' - название виджета, оно так же будет являться типом виджета.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В командной строке необходимо ввести: ''''npx sp_create_widget_template widgetName'''' где ''''widgetName'''' - название виджета, оно так же будет являться типом виджета.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>В текущую папку, из которой началась установка, будет создана папка с названием виджета, в которой будет находиться шаблон, так же, автоматически будут установлены необходимые зависимости.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><br></ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Установить или обновить пакеты можно вручную через команду ''''npm i'''' или ''''npm i имя_пакета''''.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>В текущую папку, из которой началась установка, будет создана папка с названием виджета, в которой будет находиться шаблон, так же, автоматически будут установлены необходимые зависимости. Установить или обновить пакеты можно вручную через команду ''''npm i'''' или ''''npm i имя_пакета''''.</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><br></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для того, что бы запустить dev-сервер необходимо ввести команду ''''npm start'''', сборка виджета осуществляется командой ''''npm run build'''', после чего в корне появится папка build со сборкой, а так же внутри папки будет zip архив с копией того, что находится в папке build, этот архив понадобится, если нужно будет открыть виджет в личном кабинете, предварительно скопировав архив туда.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Для того, что бы запустить dev-сервер необходимо ввести команду ''''npm start'''', сборка виджета осуществляется командой ''''npm run build'''', после чего в корне появится папка build со сборкой, а так же внутри папки будет zip архив с копией того, что находится в папке build, этот архив понадобится, если нужно будет открыть виджет в личном кабинете, предварительно скопировав архив туда.</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><br></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В папке '''src/components''' можно увидеть компонент '''TestComponent''', который в свою очередь импортирован в '''AppMain'''. Он присутствует для примера и его можно заменить своим, так же стоит обратить внимание на стиль этого компонента, он прописан для позиционирования в рамках окна настроек виджета (о которых чуть ниже). Начинать разработку рекомендуется именно с компонента appMain.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В папке '''src/components''' можно увидеть компонент '''TestComponent''', который в свою очередь импортирован в '''AppMain'''. Он присутствует для примера и его можно заменить своим, так же стоит обратить внимание на стиль этого компонента, он прописан для позиционирования в рамках окна настроек виджета (о которых чуть ниже). Начинать разработку рекомендуется именно с компонента appMain.</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><br></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В шаблоне виджета можно встретить методы, которые присутствуют исключительно для ознакомления, что бы можно было увидеть живой пример взаимодействия, регистрации методов для общения с клиентскими приложениями и т.д. Ненужное можно удалить.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>В шаблоне виджета можно встретить методы, которые присутствуют исключительно для ознакомления, что бы можно было увидеть живой пример взаимодействия, регистрации методов для общения с клиентскими приложениями и т.д. Ненужное можно удалить.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-12150:rev-17339:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=12150&oldid=prev
A.Nikonov: /* Под какую версию браузера стоит создавать виджет? */
2024-04-24T13:29:30Z
<p><span class="autocomment">Под какую версию браузера стоит создавать виджет?</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 16:29, 24 апреля 2024</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l146">Строка 146:</td>
<td colspan="2" class="diff-lineno">Строка 146:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Info from site.jpg|мини|центр]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Info from site.jpg|мини|центр]]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* перейти в информацию об устройстве и получить информацию нажав иконку браузера в режиме онлайн (когда устройство зеленое). Устройство вернет полную информацию о своем внутреннем движке.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* перейти в информацию об устройстве и получить информацию нажав иконку браузера в режиме онлайн (когда устройство зеленое). Устройство вернет полную информацию о своем внутреннем движке.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg<ins style="font-weight: bold; text-decoration: none;">|мини</ins>|центр]]</div></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-12149:rev-12150:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=12149&oldid=prev
A.Nikonov в 13:29, 24 апреля 2024
2024-04-24T13:29:15Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 16:29, 24 апреля 2024</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l144">Строка 144:</td>
<td colspan="2" class="diff-lineno">Строка 144:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.co/ сайт покажет версию веб движка</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.co/ сайт покажет версию веб движка</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Файл:Info from site.jpg|мини|центр]]</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* перейти в информацию об устройстве и получить информацию нажав иконку браузера в режиме онлайн (когда устройство зеленое). Устройство вернет полную информацию о своем внутреннем движке.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* перейти в информацию об устройстве и получить информацию нажав иконку браузера в режиме онлайн (когда устройство зеленое). Устройство вернет полную информацию о своем внутреннем движке.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-12147:rev-12149:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=12147&oldid=prev
A.Nikonov в 13:25, 24 апреля 2024
2024-04-24T13:25:46Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 16:25, 24 апреля 2024</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l143">Строка 143:</td>
<td colspan="2" class="diff-lineno">Строка 143:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Каждое устройство на котором вы запускаете виджет, внутри себя содержит браузер. Версия веб движка зависит от прошивки, некоторые open source библиотеки могут не поддерживать старые версии движка, чтобы узнать версию движка, можно воспользоваться одним из способов. </div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Каждое устройство на котором вы запускаете виджет, внутри себя содержит браузер. Версия веб движка зависит от прошивки, некоторые open source библиотеки могут не поддерживать старые версии движка, чтобы узнать версию движка, можно воспользоваться одним из способов. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.<del style="font-weight: bold; text-decoration: none;">com</del>/ сайт покажет версию веб движка</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.<ins style="font-weight: bold; text-decoration: none;">co</ins>/ сайт покажет версию веб движка</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* перейти в информацию об устройстве и получить информацию нажав иконку браузера в режиме онлайн (когда устройство зеленое). Устройство вернет полную информацию о своем внутреннем движке.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* перейти в информацию об устройстве и получить информацию нажав иконку браузера в режиме онлайн (когда устройство зеленое). Устройство вернет полную информацию о своем внутреннем движке.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-12146:rev-12147:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=12146&oldid=prev
A.Nikonov: /* Под какую версию браузера стоит создавать виджет? */
2024-04-24T13:24:20Z
<p><span class="autocomment">Под какую версию браузера стоит создавать виджет?</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 16:24, 24 апреля 2024</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l144">Строка 144:</td>
<td colspan="2" class="diff-lineno">Строка 144:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.com/ сайт покажет версию веб движка</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.com/ сайт покажет версию веб движка</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* <del style="font-weight: bold; text-decoration: none;">зайти </del>в информацию об устройстве и получить информацию <del style="font-weight: bold; text-decoration: none;">нажатие иконки браузер на устройстве</del>. Устройство вернет полную информацию о своем движке. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <ins style="font-weight: bold; text-decoration: none;">перейти </ins>в информацию об устройстве и получить информацию <ins style="font-weight: bold; text-decoration: none;">нажав иконку браузера в режиме онлайн (когда устройство зеленое)</ins>. Устройство вернет полную информацию о своем <ins style="font-weight: bold; text-decoration: none;">внутреннем </ins>движке.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-12145:rev-12146:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=12145&oldid=prev
A.Nikonov: /* Под какую версию браузера стоит создавать виджет? */
2024-04-24T13:23:32Z
<p><span class="autocomment">Под какую версию браузера стоит создавать виджет?</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 16:23, 24 апреля 2024</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l141">Строка 141:</td>
<td colspan="2" class="diff-lineno">Строка 141:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Под какую версию браузера стоит создавать виджет? ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Под какую версию браузера стоит создавать виджет? ==</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Каждое устройство на котором вы запускаете виджет, внутри себя содержит браузер. Версия веб движка зависит от прошивки, <del style="font-weight: bold; text-decoration: none;">некоторе </del>open source библиотеки могут не поддерживать старые версии движка, чтобы узнать версию движка<del style="font-weight: bold; text-decoration: none;">:</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Каждое устройство на котором вы запускаете виджет, внутри себя содержит браузер. Версия веб движка зависит от прошивки, <ins style="font-weight: bold; text-decoration: none;">некоторые </ins>open source библиотеки могут не поддерживать старые версии движка, чтобы узнать версию движка<ins style="font-weight: bold; text-decoration: none;">, можно воспользоваться одним из способов. </ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.com/ сайт покажет версию веб движка</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.com/ сайт покажет версию веб движка</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* зайти в информацию об устройстве и получить информацию нажатие иконки браузер на устройстве. Устройство вернет полную информацию о своем движке. </div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* зайти в информацию об устройстве и получить информацию нажатие иконки браузер на устройстве. Устройство вернет полную информацию о своем движке. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|центр]]</div></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-12144:rev-12145:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=12144&oldid=prev
A.Nikonov: /* Под какую версию браузера стоит писать виджет? */
2024-04-24T13:22:51Z
<p><span class="autocomment">Под какую версию браузера стоит писать виджет?</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 16:22, 24 апреля 2024</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l140">Строка 140:</td>
<td colspan="2" class="diff-lineno">Строка 140:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Если виджет при разработке использует библиотеку React, желательно, что бы она совпадала с версией, которая прописана в зависимости у пакета sp_widget_editor, в противном случае, возможен конфликт. Узнать версию можно следующим образом: зайти в папку node_modules в корневой папке виджета, найти в ней папку sp_widget_editor, зайти в нее и открыть файл package.json, там в dependencies найти параметр “react" и посмотреть версию, далее сравнить с версией, которая прописана в package.json расположенном в корневой папке виджета.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Если виджет при разработке использует библиотеку React, желательно, что бы она совпадала с версией, которая прописана в зависимости у пакета sp_widget_editor, в противном случае, возможен конфликт. Узнать версию можно следующим образом: зайти в папку node_modules в корневой папке виджета, найти в ней папку sp_widget_editor, зайти в нее и открыть файл package.json, там в dependencies найти параметр “react" и посмотреть версию, далее сравнить с версией, которая прописана в package.json расположенном в корневой папке виджета.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>== Под какую версию браузера стоит <del style="font-weight: bold; text-decoration: none;">писать </del>виджет? ==</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>== Под какую версию браузера стоит <ins style="font-weight: bold; text-decoration: none;">создавать </ins>виджет? ==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Каждое устройство на котором вы запускаете виджет, внутри себя содержит браузер. Версия веб движка зависит от прошивки, некоторе open source библиотеки могут не поддерживать старые версии движка, чтобы узнать версию движка:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Каждое устройство на котором вы запускаете виджет, внутри себя содержит браузер. Версия веб движка зависит от прошивки, некоторе open source библиотеки могут не поддерживать старые версии движка, чтобы узнать версию движка:</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.com/ сайт покажет версию веб движка</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* запустите на устройстве через трансляцию ссылку https://html5test.com/ сайт покажет версию веб движка</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* зайти в информацию об устройстве и получить информацию нажатие иконки браузер на устройстве. Устройство вернет полную информацию о своем движке. </div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* зайти в информацию об устройстве и получить информацию нажатие иконки браузер на устройстве. Устройство вернет полную информацию о своем движке. </div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|<del style="font-weight: bold; text-decoration: none;">мини</del>]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Browser info.jpg|<ins style="font-weight: bold; text-decoration: none;">центр</ins>]]</div></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-12143:rev-12144:php=table -->
</table>
A.Nikonov
https://wiki.smartplayer.org/index.php?title=Widget_API&diff=12143&oldid=prev
A.Nikonov: /* ВАЖНО! */
2024-04-24T13:22:15Z
<p><span class="autocomment">ВАЖНО!</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Предыдущая версия</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Версия от 16:22, 24 апреля 2024</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l139">Строка 139:</td>
<td colspan="2" class="diff-lineno">Строка 139:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== ВАЖНО! ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== ВАЖНО! ==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Если виджет при разработке использует библиотеку React, желательно, что бы она совпадала с версией, которая прописана в зависимости у пакета sp_widget_editor, в противном случае, возможен конфликт. Узнать версию можно следующим образом: зайти в папку node_modules в корневой папке виджета, найти в ней папку sp_widget_editor, зайти в нее и открыть файл package.json, там в dependencies найти параметр “react" и посмотреть версию, далее сравнить с версией, которая прописана в package.json расположенном в корневой папке виджета.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Если виджет при разработке использует библиотеку React, желательно, что бы она совпадала с версией, которая прописана в зависимости у пакета sp_widget_editor, в противном случае, возможен конфликт. Узнать версию можно следующим образом: зайти в папку node_modules в корневой папке виджета, найти в ней папку sp_widget_editor, зайти в нее и открыть файл package.json, там в dependencies найти параметр “react" и посмотреть версию, далее сравнить с версией, которая прописана в package.json расположенном в корневой папке виджета.</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== Под какую версию браузера стоит писать виджет? ==</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Каждое устройство на котором вы запускаете виджет, внутри себя содержит браузер. Версия веб движка зависит от прошивки, некоторе open source библиотеки могут не поддерживать старые версии движка, чтобы узнать версию движка:</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* запустите на устройстве через трансляцию ссылку https://html5test.com/ сайт покажет версию веб движка</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* зайти в информацию об устройстве и получить информацию нажатие иконки браузер на устройстве. Устройство вернет полную информацию о своем движке. </ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Файл:Browser info.jpg|мини]]</ins></div></td></tr>
<!-- diff cache key smp_wiki-ru:diff:1.41:old-5824:rev-12143:php=table -->
</table>
A.Nikonov