Использование WebView во Flutter

Flutter

Пример кода в этой статье можно просмотреть и загрузить, ответив на «WebView» в фоновом режиме общедоступной учетной записи WeChat «01 Binary».

предисловие

Мы знаем, что при разработке нативного приложения часто возникает необходимость открыть веб-страницу, и обычно есть только два варианта:

  1. Откройте веб-страницу в приложении
  2. Откройте веб-страницу, вызвав собственный браузер системы.

Взяв в качестве примера «WeChat», первая ситуация — это когда мы читаем официальную учетную запись в WeChat, но WeChat также предоставляетOpen with BrowserЭтот вариант является вторым случаем.

image-20190807100211727

Краткое введение в WebView в Android

Для достижения первого эффекта нам нужно использоватьWebViewДавайте посмотрим, как реализовать WebView в Android.

В Android нам нужно сначала поместить элемент управления WebView в макет, а затем выполнить один за другим findViewById в соответствующем действии или фрагменте или различных пользовательских представлениях...

Ну, разработчики Android должны знать, о чем я говорю (действительно раздражает).

WebView in Flutter

Flutter WebView существует уже некоторое время.Вы можете искать более популярные плагины, выполнив поиск WebView на официальном сайте сообщества плагинов Flutter, как показано на следующем рисунке:

вwebview_flutterЭто официально поддерживаемый подключаемый модуль WebView. Функции основаны на собственных пакетах и ​​пакетах SDK Flutter, наследующих StatefulWidget, поэтому он поддерживает встраивание вflutter Widgetдерево, которое более гибкое;

flutter_webview_pluginЭто подключаемый модуль Flutter, основанный на собственной инкапсуляции WebView, который инкапсулирует некоторые из собственных базовых API-интерфейсов и предоставляет их для вызовов Flutter, поэтому его нельзя встроить в дерево виджетов Flutter, поэтому сначала необходимо выполнить переход в интерфейсе. а затем возвращается после возвращения.Для повторной инициализации, поэтому отображение будет очень ограничительным;

interactive_webviewосновывается наwebview_flutterИнкапсулированный плагин Flutter, поэтому основные функции в основном такие же, как у официального WebView;

В первые дни разработки Flutter в 2018 году официальныйwebview_flutterПроблем с плагином много, но к счастью официал не сдался.Сейчас в плагине исправлено много ошибок, а базовые функции постоянно улучшаются 👏.

flutter_webview_pluginПлагин негибок в использовании из-за своих характеристик, поэтому в этой статье я выберу официальный.webview_flutterКак плагин WebView для загрузки веб-страниц.

использовать

webview_flutterАдрес плагина: 👉https://pub.flutter-io.cn/packages/webview_flutter.

пакет гида

Как и в любом пакете Flutter, нам нужноpubspec.ymlсерединаdependenciesприсоединиться кwebview_flutterпакет

dependencies:
  webview_flutter: ^0.3.10+4

Затем нажмите на появившуюся панель вкладокPackages get, или введите в терминалеFlutter package get, последовательность показана на следующем рисунке:

Создать новый виджет

Затем мы создаем новый WebViewWidget, который получает два параметра: заголовок страницы браузера и URL-адрес страницы просмотра, которую я назову какBrowser, и хранится вbrowser.dartв файле.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class Browser extends StatelessWidget {
  const Browser({Key key, this.url, this.title}) : super(key: key);

  final String url;
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

использовать эту страницу

Здесь мы используем новую страницу для хранения WebView, поэтому, когда мы хотим ее использовать, нам просто нужно перейти на страницу и передать заголовок и URL-адрес. здесь сRaisedButtonизonPressed()Пример

onPressed: () {
  Navigator.of(context)
      .push(new MaterialPageRoute(builder: (_) {
    return new Browser(
      url: "https://flutter-io.cn/",
      title: "Flutter 中文社区",
    );
  }));
}

Кстати не забывайте быть в Раннере модуля IOSinfo.plistДобавьте в файл:

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

В противном случае этот пакет не сможет работать на устройствах iOS!

Эффект операции показан на следующем рисунке:

Это лишь краткое введение в использование веб-просмотра во Flutter. Расширенные функции, такие как взаимодействие с JavaScript, не представлены. Заинтересованные читатели могут найти информацию и прочитать самостоятельно.

Это закончилось?

На самом деле, к тому времени, когда мы сюда доберемся, все должно закончиться, но я обнаружил очень серьезную проблему во время использования.Если наш URL-адрес HTTP вместо HTTPS, то его можно запустить только на устройствах ниже Android 9.0 (iOS также невозможно) .

Белый экран при работе на iOS или на устройстве Android 9.0+сеть::ERR_CLEARTEXT_NOT_PERMITTEDошибка.

На самом деле причина очень проста, потому что и iOS, и Android 9.0+ имеют некоторые ограничения на не-HTTPS-запросы, вот мое решение.

iOS

Нам нужен Runner в модуле IOSinfo.plistДобавьте в файл следующие поля:

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

затем выполнитьflutter cleanПосле повторного запуска вы можете получить доступ к веб-странице HTTP.

Android

Извините, на самом деле я не нашел способ получить доступ к веб-сайтам HTTP через веб-просмотр флаттера на Android 9.0+, Я пишу здесь, чтобы надеяться, что если мои читатели найдут решение, пожалуйста, оставьте сообщение в области комментариев. . Вот несколько решений, которые я пробовал.

На самом деле, если это AndroidРоднойЕсть несколько решений для решения проблемы ограничения HTTP:

  1. Переключиться на HTTPS
  2. БудуtargetSdkVersionИзмените номер версии ниже 28
  3. существуетAndroidManifest.xmlфайл добавленandroid:usesCleartextTraffic="true"элемент конфигурации

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

Второе решение невозможно во Flutter, поскольку для запуска Flutter требуется Android SDK 28 или выше.

Я также попробовал третий способ, но он не сработал.

Я проверил много информации, и нашел способ сохранить страну через кривую, то есть определить веб-страницу, к которой осуществляется доступ, если это HTTPS, использовать для доступа к ней WebView, а если это HTTP, вызвать третью -партийный браузер для доступа к нему.

Ну, этот подход не подходит для оценки.

Я отправил вопросы по проблемам StackOverflow и Flutter, и я буду продолжать обновлять, если в будущем будет решение.

Суммировать

В общем, с постоянными обновлениями Google для элемента управления WebView его опыт становится все лучше и лучше, и его проще использовать, чем собственный WebView.Если у вас есть идея использовать WebView в своем приложении, вы можете попробовать 😊

Пример кода в этой статье можно просмотреть и загрузить, ответив на «WebView» в фоновом режиме общедоступной учетной записи WeChat «01 Binary».

Ссылаться на

  1. Как использовать WebView во Flutter? - Заметки об экспериментах Android-инженера с маленькой девочкой
  2. WebViews во Flutter — потрясающий прорыв!
  3. Android 9: Cleartext HTTP traffic not permitted in webview