Flutter WebView Communication（web with vue.js）

Question

＃我尝试过的

1. 我在vscode中使用vue.js制作了一个网页，然后将网页部署到localhost：8080
2. 在Android Studio中制作了一个本机应用程序，并带有
3. 从WebView到Flutter Aptial App

＃＃＃＃＃＃问题？

当我在WebView中单击BTN以将消息发送到Flutter应用程序时 在V-ON处理程序中发生错误：“ TypeError：无法读取NULL的属性（读取'Postmessage'）”

＃＃＃Web代码（vscode中的vue.js）

1。 main.js

import Vue from 'vue'
import App from './App.vue'
import message from './message'; 

Vue.config.productionTip = false

Vue.use(message);
window.sendMessage = message; 

new Vue({
  render: h => h(App)
}).$mount('#app')

2. message.js

const sendMessage = (message) => {

    if (userAgent.indexOf('android') !== -1) {
      return WebViewBridge.postMessage(message);;

    } else if (userAgent.indexOf('iphone') !== -1 || userAgent.indexOf('ipad') !== -1) {
      return window.webkit.messageHandlers.webViewMessageHandler.postMessage(message);

    } else { 
       return window.opener.postMessage(message);
    }
  }
export default {sendMessage}

3. app.vue

<template>
  <div class="main">
    <div class="btn" @click="toast()">communicate!</div>
  </div>
</template>

<script>
import message from "../src/message.js"

export default {
  name: 'App',
  methods:{
    toast(){
      console.log("message to Flutter App!")
      message.sendMessage("hello")
    }
  },
};
</script>
<style>
.main{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: antiquewhite;
}
.btn{
  background-color: black;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
}
</style>

＃flutter代码（在Android Studio）

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: EmptyAppBar(), 
        body: WebView(
          //userAgent: "random", //Add this to resolve issue
            initialUrl: "http://myipaddress:8080/",
            javascriptMode: JavascriptMode.unrestricted,
            //A named channel for receiving messaged from JavaScript code running inside a web view
            javascriptChannels: <JavascriptChannel>{
              _webToApp(context),
            }
        )
    );
  }
}

// Webview Native commuication
JavascriptChannel _webToApp(BuildContext context) {
  return JavascriptChannel(
      name: 'WebViewBridge',
      // A callback that's invoked when a message is received through the channel.
      onMessageReceived: (JavascriptMessage message) {
        print('javascript run');


      });
}

Answer 1

AS-IS

WebViewBridge.postMessage（消息）;

to-be

// eslint-disable-next-line

窗口.webviewbridge.postmessage（message）;