#我想要什么? 执行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);
//}
});
}