如何在 Flutter 和 JavaScript 之間創建通信橋？

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我在之前的一篇"},{"type":"link","attrs":{"href":"https:\/\/medium.com\/free-code-camp\/how-to-build-cross-origin-communication-bridges-in-ios-and-andriod-7baef82b3f02?ref=hackernoon.com","title":"","type":null},"content":[{"type":"text","text":"文章"}]},{"type":"text","text":"中解釋瞭如何在Android和iOS中創建通信橋，作爲後續，我認爲解釋一下如何在Flutter中創建通信橋也是一個不錯的想法。雖然這可能看起來是一件很簡單的事情，但你很快就會意識到，要使這個功能正常工作需要一些工作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先，重要的是意識到（在撰寫本文時）Flutter還"},{"type":"text","marks":[{"type":"strong"}],"text":"沒有"},{"type":"text","text":"內置對嵌入式WebView的支持。這意味着，在Kotlin或Swift中的本地應用程序中你可以實例化一個WebView組件，而在Flutter中你不能直接將WebView組件添加到你的應用程序中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在創建一個新的Flutter項目後，我們需要使用"},{"type":"link","attrs":{"href":"https:\/\/pub.dev\/packages\/webview_flutter?ref=hackernoon.com","title":"","type":null},"content":[{"type":"text","text":"webview_flutter包"}]},{"type":"text","text":"來使得能夠使用WebView。我們會向pubspec.yaml文件中添加依賴："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"dependencies:\n flutter:\n sdk: flutter\n webview_flutter: ^1.0.7"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後，我們需要運行"},{"type":"text","marks":[{"type":"strong"}],"text":"Pub get"},{"type":"text","text":"或者在終端中："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"flutter pub get"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 然後，我們需要在main.dart文件中導入這個包："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"import 'package:webview_flutter\/webview_flutter.dart';"}]}]}