Как общаться между нативным и нативным веб-представлениями с помощью веб-приложения флаттера? - PullRequest
Новая
       2

Как общаться между нативным и нативным веб-представлениями с помощью веб-приложения флаттера?

0 голосов
/ 23 марта 2020

Android позволяет указать интерфейс Javascript, который будет служить мостом между веб-представлением и кодом Android. Точно так же iOS предоставляет метод UiWebView stringByEvaluatingJavaScriptFromString, который позволяет взаимодействовать с базовым веб-представлением.

Но проблема заключается в том, что, как только мы создаем веб-приложение флаттера и говорим, что включаем его как часть веб-представления в android, Тогда всякий раз, когда необходимо установить связь, есть некоторое количество кода, который мы должны написать как на стороне android, так и на стороне javascript вручную.

После редактирования кода javascript, сгенерированного из веб-приложения флаттера Сборка нецелесообразна, нам нужен способ установить sh канал связи со стороны флаттера, который будет общаться с нативной стороной, используя тот же тип моста javascript, что и выше. Это будет что-то похожее на каналы методов при непосредственном использовании приложения флаттера.

Итак, как бы мы внедрили или добавили наш собственный код javascript из флаттера, чтобы он был добавлен во время компиляции? файл js?

1 Ответ

0 голосов
/ 24 марта 2020

Вы можете создать канал веб-сообщений на стороне android (iOS имеет эквивалент).

Здесь описано, как это сделать:

Как вы используете WebMessagePort в качестве альтернативы addJavascriptInterface ()?

Краткая настройка на стороне javascript выглядит следующим образом - вам нужно реализовать это в dart html: 

const channel = new MessageChannel();
var nativeJsPortOne = channel.port1;
var nativeJsPortTwo = channel.port2;
window.addEventListener('message', function(event) {
    if (event.data != 'capturePort') {
        nativeJsPortOne.postMessage(event.data)
    } else if (event.data == 'capturePort') {
        /* The following three lines form Android class 'WebViewCallBackDemo' capture the port and assign it to nativeJsPortTwo
        var destPort = arrayOf(nativeToJsPorts[1])
        nativeToJsPorts[0].setWebMessageCallback(nativeToJs!!)
        WebViewCompat.postWebMessage(webView, WebMessageCompat("capturePort", destPort), Uri.EMPTY) */
        if (event.ports[0] != null) {
            nativeJsPortTwo = event.ports[0]
        }
    }
}, false);

nativeJsPortOne.addEventListener('message', function(event) {
    alert(event.data);
}, false);

nativeJsPortTwo.addEventListener('message', function(event) {
    alert(event.data);
}, false);
nativeJsPortOne.start();
nativeJsPortTwo.start();

Ниже приведено аналогичное решение для прослушивания с использованием Eventlistener в окне во флаттере: 

    window.onMessage.listen((onData) {
  print(onData.toString());

  MessageEvent messageEvent = onData;

  for (Property property in properties) {
    if (messageEvent.data["id"] == property.id) {

          });
    } else if (messageEvent.data["northEastLng"] != null) {
      print(messageEvent.data["northEastLat"]);

      if (double.parse(messageEvent.data["northEastLat"]) == bounds.northEast.lat && double.parse(messageEvent.data["northEastLng"]) == bounds.northEast.lng){
        return;
      }

      LatLng southWest = new LatLng(double.parse(messageEvent.data["southWestLat"]), double.parse(messageEvent.data["southWestLng"]));
      LatLng northEast = new LatLng(double.parse(messageEvent.data["northEastLat"]), double.parse(messageEvent.data["northEastLng"]));
      LatLngBounds incomingBounds = new LatLngBounds(southWest, northEast);
      if (incomingBounds == bounds) {
        return;
      }
      bounds = incomingBounds;
      _propertyListPresenter.filterBounds(bounds);
    }
  }
});
...