突破边界！Flutter带你征服JavaScript世界！ |
您所在的位置：网站首页 › 我的消息页面 › 突破边界！Flutter带你征服JavaScript世界！ |
突破边界！Flutter带你征服JavaScript世界！
|
嗨，我是甜瓜看代码。在本篇文章中，我将向你介绍如何使用最新版本（4.2.2）的webview_flutter库与JavaScript进行互动。我们将探索如何将消息从js传递给Flutter页面，以及一些其他有趣的扩展内容。 安装与设置首先，我们需要确保已经安装了最新版本的webview_flutter库。在你的pubspec.yaml文件中，将其添加为依赖项： dependencies: flutter: sdk: flutter webview_flutter: ^4.2.2确保运行flutter packages get来获取最新的库。 接下来，让我们设置一些必要的权限。在Android上，我们需要添加INTERNET权限到AndroidManifest.xml文件中： 在iOS上，我们需要在Info.plist文件中添加App Transport Security（ATS）例外，以允许HTTP请求： NSAppTransportSecurity NSAllowsArbitraryLoads一旦设置完成，我们就可以开始构建与JavaScript交互的应用程序了。 创建Webview首先，让我们创建一个基本的WebViewPage，以显示一个简单的网页,这里我显示了自己掘金的主页。我们将使用WebViewController配合WebViewWidget小部件来实现这一点。让我们看看下面的代码： class WebViewPage extends StatefulWidget { const WebViewPage({super.key}); @override State createState() => _WebViewPageState(); } class _WebViewPageState extends State { late final WebViewController mController; @override void initState() { mController = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..loadRequest(Uri.parse('https://juejin.cn/user/3593662442508760')); super.initState(); } @override Widget build(BuildContext context) { return Column( children: [Expanded(child: WebViewWidget(controller: mController))], ); } }在上述代码中，我们创建了一个名为WebViewPage的小部件。在build方法中，我们使用WebViewWidget来创建一个基本的应用程序界面。 WebViewWidget小部件是我们实际用于显示网页的地方。我们将mController初始化时设置的URI属性设置为你希望显示的网页URL。javascriptMode属性被设置为JavascriptMode.unrestricted，以便启用与JavaScript的交互。 现在，如果你运行应用程序，你应该能够看到我的掘金主页啦。不过这里还有点小问题，或许我们可以使用SafeArea包裹一下以防止页面顶到状态栏下方去了。SafeArea的介绍在我的另外一篇文章中Flutter SafeArea：不再为异形屏适配而担心。 好的，现在让我们来实现与JavaScript的互动吧！我们将学习如何获取网页高度以及在网页中调用Flutter页面。 const htmlString = ''' body { background-color: white; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } 甜瓜看代码 const resizeObserver = new ResizeObserver(entries => Js.postMessage("来自Js的甜瓜")) resizeObserver.observe(document.body) '''; class WebViewPage extends StatefulWidget { const WebViewPage({super.key}); @override State createState() => _WebViewPageState(); } class _WebViewPageState extends State { late final WebViewController mController; @override void initState() { mController = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..addJavaScriptChannel('Js', onMessageReceived: (message){ print('收到来自js的消息是：${message.message}'); }) ..loadHtmlString(htmlString); super.initState(); } @override Widget build(BuildContext context) { return Column( children: [Expanded(child: WebViewWidget(controller: mController))], ); } }让我们看看我们所做的更改： 在WebViewWidget中加载的不再是一个url对应的网页，而是一个html字符串，字符串中定义ResizeObserver实体并通过方法名为Js来传递消息； 在WebViewController的javascriptChannels属性中，我们创建了一个名为Js的JavascriptChannel，并定义了其onMessageReceived回调。当网页通过该通道发送消息时，我们将调用方法获取到JS传递过来的JavaScriptMessage对象。现在，当网页中调用Js.postMessage("来自Js的甜瓜")时，我们将在Flutter端收到消息。这为我们提供了一种与网页交互的方式，以执行更复杂的操作。 除了js与Flutter页面传递消息之外，webview_flutter库还提供了许多其他有用的功能。以下是一些你可能感兴趣的扩展： 拦截URL加载：你可以使用WebViewController的setNavigationDelegate属性来拦截网页加载请求，并根据你的需求决定是否允许加载特定URL。 处理网页表单提交：你可以使用WebView的setNavigationDelegate属性来捕获网页表单提交的动作，并采取相应的操作。 这只是webview_flutter库提供的一些功能的示例。你可查看webview_flutter以获取更多信息，并发现其他有趣的功能。 总结在本篇文章中，我们探索了如何使用webview_flutter库与JavaScript进行互动。我们学习了如何js与Flutter页面传递消息，并简要介绍了其他一些扩展功能。希望这篇文章对你有所帮助，并能够让你更好地与JavaScript进行互动。 希望本篇文章对你有所帮助，这里是甜瓜看代码，期待你的关注。 |
【本文地址】
今日新闻 |
推荐新闻 |