предисловие
Я давно не занимался разработкой Flutter, но впервые обратил внимание на Flutter, потому что слышал, что он может разрабатывать iOS, Android и Web через терминалы. Только когда я увидел выпуск Flutter 2.0 на прошлой неделе, я понял, что кросс-веб-сторона была просто стабильной...
Тогда давайте проверим на практике: надежно ли Flutter публиковать веб-приложения?
Начать веб-сборку
Используйте следующую команду, чтобы включить поддержку веб-сборки
flutter config --enable-web
После открытия мы можем снова войти в конфигурацию флаттера, чтобы увидеть
Создать новый проект
Таким образом, каждый раз, когда вы создаете новый проект Flutter, он поддерживает построение веб-страницы, и по умолчанию будет дополнительный каталог конфигурации сборки.web.
Даже если проекту не требуется поддержка построения веб-сайта, нет необходимости отключать эту поддержку, просто не используйте команду для построения веб-сайта.
Открытая веб-поддержка старых проектов
По сути, это перенастройка текущего проекта.
flutter create .
Отладка веб-стороны
Если другая среда терминала недоступна, используйте следующую команду, чтобы напрямую скомпилировать веб-терминал и открыть хром для отладки.
flutter run
Скомпилируйте и выпустите веб-сторону
Когда Flutter создает веб-приложения, вы можете выбрать два режима рендеринга. Позвольте мне показать вам следующее.Пожалуйста, внимательно посмотрите на часть, которую я отметил красной рамкой на скриншоте.
Режим HTML рендеринга
flutter build web --web-renderer html
Когда мы используем режим рендеринга html, флаттер будет использовать пользовательский элемент HTML, CSS, Canvas и SVG для рендеринга элементов пользовательского интерфейса.
преимущество:
- Меньший размер приложения
недостаток:
- плохая производительность рендеринга
- Может быть нарушена согласованность кросс-энда
Режим рендеринга Canwaskit
flutter build web --web-renderer canvaskit
Когда мы используем режим рендеринга canvaskit, флаттер компилирует Skia в формат WebAssembly и рендерит с использованием WebGL. Приложение единообразно для мобильных и настольных компьютеров, имеет более высокую производительность и снижает риск несогласованного рендеринга в разных браузерах. Но размер приложения увеличится примерно на 2 МБ.
преимущество:
- Межконечная согласованность на уровне пикселей
- лучшая производительность рендеринга
недостаток:
- Размер приложения становится больше, и нужно загрузить файл размером 2,5 МБ.
webaseemblyкод формата
Существует также режим автоматического рендеринга (по умолчанию), который автоматически выбирает режим рендеринга в зависимости от того, работает ли он в мобильном браузере или браузере настольного компьютера.
В заключение
С выпуском Flutter 2.0 этот фреймворк с [полноплатформенной кросс-консистентностью на уровне пикселей] привлечет больше внимания. Несмотря на то, что результаты компиляции на стороне Интернета в настоящее время все еще почти бессмысленны в соответствии с отечественными стандартами веб-опыта, независимо от того, какой метод рендеринга, их действительно стоит ожидать.
Подписывайтесь на меня
Старый программист, который является дизайнером, но любит программировать
Последние статьи (Спасибо за вашу поддержку и поддержку 🌹🌹🌹)
- 🔥Провел ночь анимации, чтобы все лучше поняли Composition API Vue3.940 лайков
- 🔥Обновление 2020, Vue имитирует эффект перетаскивания карт1112 лайков
- 🔥Использование Webview | Серия руководств по разработке плагинов VSCode19 лайков
- 🔥Введена функция панели статистики Nuggets [Я люблю Nuggets] 0.0.15｜ Бычье новогоднее эссе7 лайков
- 🔥Пожалуйста, примите этот исходный код и используйте Vue для разработки игры «Полив и кража овощей из муравьиного леса».66 лайков
Эта статья участвует в «Весенней рекрутинговой кампании Nuggets 2021», нажмите, чтобы просмотретьсведения о деятельности