Эта статья была впервые опубликована в публичном аккаунте WeChat.Flutter那些事, Несанкционированное воспроизведение строго запрещено. Спасибо за ваше сотрудничество.
Сегодня ежегодный Праздник середины осени. Прежде всего, я желаю всем участникам Праздника середины осени счастливой семьи. Надеюсь, вы все хорошо повеселитесь и хорошо покушаете. Спасибо всем за вашу сильную поддержку этой общедоступной учетной записи в течение столь долгого времени. Также большое спасибо за ваши ценные комментарии. Для меня большая честь встретить так много прекрасных друзей. В дополнение к хорошей еде и питью, не забывайте прекращать учебу, приходите сюда, чтобы вас ждали последние галантереи.
Утром 10 сентября 2019 года по пекинскому времени Google официально объявила оФлаттер версии 1.9, а затем я впервые столкнулся с последним контентом Flutter и столкнулся с множеством ям. Здесь я написал блог, чтобы поделиться им с вами, надеюсь, вы сможете избежать окольных путей. Если вам это нравится, следите за моим блогом.
Прежде всего, я нарисовал здесь блок-схему и выложил ее для того, чтобы все сначала посмотрели, ознакомились с ней и помогли всем быстрее освоить весь процесс.
1. Смените ветку и обновитесь до последней версии
Рекомендуется использовать ветку master. использоватьflutter upgradeкоманда для обновления до последней версии.
2. Используйте командуflutter run -d chromeПервый опыт был ошибочным.
Я создал новый проектflutter_demo, тогда я бегуflutter run -d chrome, но нет ответа.
В чем проблема? Я открыл Google Chrome, и ничего не произошло.
3. Решения
Шаг 1. Запуститеflutter config --enable-webзапустите эту команду по умолчанию, чтобы реализовать веб-поддержку Flutter.
Если это окна, команда выглядит так:
потом на компC:\Users\Administrator\AppData\Roamingгенерация путиflutter_settingsФайл (Администратор — имя вашего компьютера), который вы можете открыть в текстовом редакторе, выглядит так:
{
"enable-web": true
}
Скриншот пути, как показано на следующем рисунке:
Если это Mac, вам нужно запустить его только один раз
~/.flutter_settingsЭта команда, если такого файла нет, автоматически создаст этот файл, а затем скопирует следующую конфигурацию вflutter_settingsФайл может быть:
{
"enable-web": true
}
Шаг 2. Запуститеflutter run -d chromeкоманда автоматически загрузит необходимый веб-SDK
Шаг 3. Выполните командуflutter create .(Примечание: не забывайте про точку сзади, это большая яма. )
Шаг 4. Запустите снова в это времяflutter run -d chromeВы можете автоматически запускать код Flutter в браузере.
Вот скриншот браузера:
Суммировать
1. Бегиflutter config --enable-webЗаказ
2. Выполните командуflutter create .(Не забудьте точку сзади, это большая дыра.)
3. Чтобы создать любой проект Flutter в будущем, просто выполнитеflutter run -d chromeКоманду можно запустить в браузере.
В-четвертых, сгенерируйте релизную версию веб-файла.
воплощать в жизньflutter build webКоманда может скомпилировать файл dart в файлы html, js и css, а затем развернуть его на веб-сайте.
Использование командной строки выглядит следующим образом:
Файлы, необходимые для компиляции сгенерированного веба, находятся в корневом каталоге проекта.build/webВнутри, как показано в красной рамке на следующем рисунке:
5. Разверните на веб-сайте
(1) Ямы и решения, обнаруженные во время развертывания
Вопрос 1: Страница не может быть открыта при развертывании на веб-страницу, она всегда пуста, и ее можно запустить только при локальной отладке.
Я обнаружил, что при развертывании на GitHub или внешнем веб-сайте я не мог открыть веб-страницу Позже я увидел корневой путь проекта.build/webВнутри естьmain.dart.js.mapдокумент. который представил местныйflutter_web_sdkФайлы, связанные с каталогом. Затем я иду по пути, где находится соответствующий файл.
◆ Решение проблемы 1:
Найдите путь установки Flutter (например, мойE:/develop/flutter), затем откройтеbin/cache/flutter_web_sdk/flutter_web_sdk/, который будет находиться внутри этого слояflutter_web_sdkСкопируйте все содержимое папки в项目根目录/build/webвнутри, затем повторитеflutter build webВот и все. (PS: не знаю, почему там две папки с одинаковым названием? Это большая дыра...)
Какой каталог копировать, смотрите на следующем рисунке:
Проблема 2: FileSystemException: Ошибка удаления, путь = '.dart_tool/build/flutter_web' (Ошибка ОС: каталог не пуст, errno = 145)
◆ Решение проблемы 2:
удалить корневой каталог проекта.dart_toolsфайл и повторите командуflutter build webВот и все.
(3) Вопрос 3: Flutter Web не поддерживает компоненты, которые напрямую переходят на внешние веб-страницы.
Кнопка во Flutter хочет перейти на веб-страницу, я используюurl_launcherПерейти на внешнюю веб-страницу, если используетсяflutter build webСкомпилированная страница не действует в браузере.
Я уже уведомил официальнуюissues, официальные сотрудники сказали, что будут поддерживать и улучшать эту функцию в кратчайшие сроки, а также поблагодарили за отзыв.
(2) Страница веб-сайта
Здесь мы просто демонстрируем небольшую функцию калькулятора (код взят из официального образца), а здесь просто демонстрация преобразования кода калькулятора в функцию Flutter Web.
Демонстрационная страница:Для любви Android.GitHub.IO/flutter_…
Домашняя страница GitHub:GitHub.com/A для любви и…
(3) Пример графической демонстрации страницы веб-сайта в формате gif.
Более интересные галантереи, добро пожаловать, чтобы обратить внимание на публичный аккаунт WeChatFlutter那些事.