Блог

Я использую webview_flutter pacakge В этом веб-представлении, где он показывает брошюру с товарами, такими как овощи, товары и т. Д., Когда вы нажимаете на элемент из брошюры, появляется всплывающая информация о том, что это функциональность здесь, в приложении, поэтому я пытаюсь сделать, я могу показать брошюру в приложениис flutter webview, но есть вызов функции js showAndroidToast(id) , когда я нажимаю на элемент, он вызывает функцию и возвращает некоторые данные, он работает с чистым приложением для Android, поэтому мы копируем приложение для flutter для ios, но я не могу получить доступ к функции, которую она возвращает после ошибки при нажатии на элемент

Ошибка, которую я получаю при создании webview

 D/WebView (16639): evaluateJavascript=showAndroidToast()
I/chromium(16639): [INFO:CONSOLE(1)] "Uncaught ReferenceError: showAndroidToast is not defined", source: https://flyerbin.com/flyer/pick-of-the-day-3398 (1)
  

Ошибка после того, как я щелкнул элемент в брошюре

 I/BufferQueueProducer(16639): [SurfaceTexture-0-16639-4](this:0x9924e000,id:4,api:1,p:255,c:16639) queueBuffer: fps=3.65 dur=1097.05 max=742.36 min=33.99
I/chromium(16639): [INFO:CONSOLE(1)] "ReferenceError: webkit is not defined", source: https://assets.flyerbin.com/public/1602490675000/js/api.js (1)
  

Js-функция на сервере

Код

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


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  WebViewController _controller;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;

          _controller.loadUrl('${baseUrl}flyer/$flyer_id');
        },
        onPageFinished: (String url) {
          _controller?.evaluateJavascript('showAndroidToast("Android")')?.then((result) {
         
            print("data"   result);
          });
        },
      ),
    );
  }
}
  

Наконец, разобрался, вам нужно другое условие в javascript для доступа к данным для flutter

Webview используя канал javascript, вы можете получить доступ к функции js, для flutter там для доступа к данным, в функции js есть небольшое изменение, что я и сделал здесь, если клавиша Flutter, она вернет идентификатор выбранного элемента.

Веб-просмотр

 WebView(
            initialUrl: 'https://example.com/',
            javascriptMode: JavascriptMode.unrestricted,
            javascriptChannels: Set.from([
              JavascriptChannel(
                  name: "Flutter",
                  onMessageReceived: (JavascriptMessage message) {
                    getSingleItem(message.message);
                  }),
            
            ]),
            onWebViewCreated: (WebViewController webViewController) {
              _controller = webViewController;
              _controller.loadUrl('${Urls.baseUrl}flyer/${flyer_id}');
            },
            onPageFinished: (finish)  {
              setState(() {
                isLoading = false;
              });
            },
            gestureNavigationEnabled: true,

          ),
  

Используйте данные для другой функции

 void getSingleItem(String id) async{

in this function you can do whatever you want,means that with data we got from the javascript function you can show a data to alert box with flutter...etc

}
  

Изменения в функции JavaScript

Есть ли какой-либо способ вызвать postMessage и вернуть данные из кода dart в js?

пример:

 var x = Print.postMessage('Hello World being called from Javascript code'); 
alert(x);