Webview cầu javascript
Ngày đăng:
14/01/2023
Trả lời:
0
Lượt xem:
103
Cầu nối để JavaScript giao tiếp với webview_flutter Show
Đặc trưng
Cách sử dụngTrước khi sử dụng gói này, bạn cần thiết lập với Flutter và JavaScript Chớp cánhTrước hết, thêm flutter pub add webview_javascript_bridge Và sau đó tạo cá thể cầu nối và init late final _bridge = WebViewJavaScriptBridge(); late WebViewController _webviewController = WebViewController() // your code ..addJavaScriptChannel( webviewJavaScriptBridgeChannel, onMessageReceived: _bridge.receiveMessage, ) // your code @override void initState() { super.initState(); // your code _bridge.updateWebViewController(_webviewController); // your code } Cuối cùng, đừng quên thêm trình xử lý tin nhắn của bạn cho JavaScript, chẳng hạn như Toaster @override void initState() { super.initState(); /// add handler _bridge.addMessageHandler(ClosureMessageHandler( resolver: (message, controller) => message.action == "toaster", handler: (message, controller) { // TODO: show the toaster print(message); return null; }, )); } JavaScriptTrước hết, hãy cài đặt gói late final _bridge = WebViewJavaScriptBridge(); late WebViewController _webviewController = WebViewController() // your code ..addJavaScriptChannel( webviewJavaScriptBridgeChannel, onMessageReceived: _bridge.receiveMessage, ) // your code @override void initState() { super.initState(); // your code _bridge.updateWebViewController(_webviewController); // your code }0. Chỉ cần chạy
hoặc với npm
Tiếp theo, nhập late final _bridge = WebViewJavaScriptBridge(); late WebViewController _webviewController = WebViewController() // your code ..addJavaScriptChannel( webviewJavaScriptBridgeChannel, onMessageReceived: _bridge.receiveMessage, ) // your code @override void initState() { super.initState(); // your code _bridge.updateWebViewController(_webviewController); // your code }1 theo nhu cầu của bạn import webViewJavaScriptBridge from 'webview-javascript-bridge'; Cuối cùng là gửi tin nhắn ________số 8_______ Nếu bạn sử dụng TypeScript, hãy xem ví dụ để biết thêm chi tiết ❗️Mẹo1. Imp của BridgeJavascriptMessageHandler trong Flutter late final _bridge = WebViewJavaScriptBridge(); late WebViewController _webviewController = WebViewController() // your code ..addJavaScriptChannel( webviewJavaScriptBridgeChannel, onMessageReceived: _bridge.receiveMessage, ) // your code @override void initState() { super.initState(); // your code _bridge.updateWebViewController(_webviewController); // your code }2 trả về loại late final _bridge = WebViewJavaScriptBridge(); late WebViewController _webviewController = WebViewController() // your code ..addJavaScriptChannel( webviewJavaScriptBridgeChannel, onMessageReceived: _bridge.receiveMessage, ) // your code @override void initState() { super.initState(); // your code _bridge.updateWebViewController(_webviewController); // your code }3_bridge.addMessageHandler( ClosureMessageHandler( resolver: (m, c) => m.action == "toaster", handler: (m, c) { // ❗️❗️❗️❗️ return "this value will response to JavaScript, and it must be jsonable"; }, ), ); 2. Bạn sẽ nhận được một ngoại lệ, nếu một hàm JavaScript trả về late final _bridge = WebViewJavaScriptBridge(); late WebViewController _webviewController = WebViewController() // your code ..addJavaScriptChannel( webviewJavaScriptBridgeChannel, onMessageReceived: _bridge.receiveMessage, ) // your code @override void initState() { super.initState(); // your code _bridge.updateWebViewController(_webviewController); // your code }4 hoặc late final _bridge = WebViewJavaScriptBridge(); late WebViewController _webviewController = WebViewController() // your code ..addJavaScriptChannel( webviewJavaScriptBridgeChannel, onMessageReceived: _bridge.receiveMessage, ) // your code @override void initState() { super.initState(); // your code _bridge.updateWebViewController(_webviewController); // your code }5final ret = await _bridge.sendMessage(function:"aJavaScriptFunctionReturningNullOrUndefined"); ////// ⬆️ will be empty string. |