# Lo que quiero ? Cuando se ejecuta la función send_message() del código vue (para la vista web), imprime los mensajes enviados por vue en la aplicación Flutter
# ¿Problema? en el proyecto vue (para Webview) ocurrió el error 'WebViewBridge' no está definido no-undef
(cf, "WebViewBridge" es el nombre de JavascriptInterface para Android)
# ¿Qué probé? 1er. Proyecto Vue (main.js)
import Vue from 'vue' import App from './App.vue' import routes from './router.js' import VueRouter from 'vue-router' // ★for Global js import ★ import message from 'message'; Vue.config.productionTip = false // ★Register a function that sends a message to Native as a plug-in.★ Vue.use(message); Vue.use(VueRouter) // ★Add the function to the window object.★ window.sendMessage = message; const router = new VueRouter({ mode: 'history', routes // short for routes: routes }) new Vue({ router, render: h => h(App) }).$mount('#app')
Proyecto Vue (enviar mensaje.vue)
methods: { send_message(message){ WebViewBridge.showMessage(message) }
2do. proyecto flutter (main.dart)
import 'dart:async'; import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp( MaterialApp( title: 'Navigator', initialRoute: '/my', routes: { "/my": (context) => MyApp(), }, ), ); class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return Scaffold( appBar: Text("test") // ★Here !★ body: WebView( initialUrl: "http://****:8080/", javascriptMode: JavascriptMode.unrestricted, //A named channel for receiving messaged from JavaScript code running inside a web view javascriptChannels: <JavascriptChannel>{ _webToApp(context), } ) ); } } JavascriptChannel _webToApp(BuildContext context) { return JavascriptChannel( name: 'WebViewBridge', // for Android // A callback that's invoked when a message is received through the channel. onMessageReceived: (JavascriptMessage message) { showAlertDialog(message.message, context); //} }); }
Use el script en Index.html en el proyecto vue