javascript - Webview（vue.js 网站）~Flutter 通讯

Question

#我想要什么？ 执行vue代码(for webview)的send_message()函数时，在Flutter App中打印vue发送的消息

＃ 问题？ 在 vue 项目（用于 Webview）中发生错误 'WebViewBridge' 未定义 no-undef

（cf，“WebViewBridge”是 Android 的 JavascriptInterface 名称）

# 我尝试了什么？ 第一个。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')

Vue项目（sendmessage.vue）

  methods: {

    send_message(message){
     WebViewBridge.showMessage(message)
    }

第二。颤振项目（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);

        //}
      });
}