前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter webView的使用及与js交互

Flutter webView的使用及与js交互

作者头像
Qson
发布2022-04-11 18:33:33
6.2K0
发布2022-04-11 18:33:33
举报
文章被收录于专栏:Hi Flutter

对于Flutter开发,使用webView显示h5页面也是非常常见的,网上也有很多相关帖子,刚好最近接触了,这里对此做个总结。主要介绍下目前Flutter常用的webView使用,以及与js的交互

Flutter常见的webView插件: webview_flutterflutter_webview_plugin 在iOS中底层调用的是WKWebView,在Android中底层调用的是WebView。

webview_flutter插件 的使用

  • 添加依赖 dependencies: webview_flutter: ^0.3.21
  • 拉取依赖库 flutter pub get
  • 导包 import 'package:webview_flutter/webview_flutter.dart';
代码语言:javascript
复制
Widget build(BuildContext context) {
    return Container(
      child: WebView(
      initialUrl: url,
      javascriptMode: JavascriptMode.unrestricted,
      javascriptChannels: javascriptChannels1,
      gestureNavigationEnabled: true,
    ),
    );
  }

flutter_webview_plugin插件 的使用

  • 添加依赖 dependencies: flutter_webview_plugin: ^0.3.11
  • 拉取依赖库 flutter pub get
  • 导包 import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
代码语言:javascript
复制
Widget build(BuildContext context) {
    return Container(
      child: WebviewScaffold(
        url: url,
        withJavascript: true,
        supportMultipleWindows: true,
        withLocalStorage: true,
        javascriptChannels: javascriptChannels,
      ),
    );
  }

注意:2个插件使用时,iOS需要在项目info.plist文件中加入如下配置

代码语言:javascript
复制
<key>io.flutter.embedded_views_preview</key>
        <true/>

这个不添加 h5页面加载不出来

代码语言:javascript
复制
<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

如果是http协议,需要配置这个

JS掉起Flutter互

做过原生webView交互的都知道,js和原生交互的处理方式,js掉起Flutter除了可以像js掉安卓、ios原生那样调用外,

  • JS掉起原生 js代码如下:
代码语言:javascript
复制
 if (isIOS == false) {
    window.android.postStatus({
        message: "js调用了flutter",
    });
} else {
     window.webkit.messageHandlers.postStatus.postMessage({
        message: "js调用了flutter",
    });
}

还可以使用另外一种比较方便的方式调用。

代码语言:javascript
复制
function flutterShowToast() {
    postStatus.postMessage("message from JS...");
  }

postStatus就是方法名,传递的参数可以是字符串,数据多可以使用json字符串,切记 方法名必须和接收处一致。

本文示例中的html js交互采用的是原生方式,不过建议大家使用后面这种js调用方式,安卓和iOS都统一,省钱了判断平台的麻烦。

  • Flutter代码写法
代码语言:javascript
复制
_jsCallNativeChannel() {
    return <JavascriptChannel>[
      _jsCallNativeJavascriptChannel(context),
    ].toSet();
  }

  _jsCallNativeJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: "postStatus",
        onMessageReceived: (JavascriptMessage message) {
          print("Js call native :${message.message}");
        });
  }

JavascriptChannel即一个js调用Flutter的通道,可以有多个通道。name是方法名,和js端对应,回调了一个 JavascriptMessage 对象,接收来自 JS 的回调信息。目前这里边只有一个 message(String) 属性。只支持 String 类型的参数,数据过多的话可以考虑 JSON 的 String 类型参数

本demo完整的代码已上传github,地址在下面

代码语言:javascript
复制
插件地址:
https://pub.dev/packages?q=webview_flutter ;
https://pub.dev/packages/flutter_webview_plugin
本文源码:
https://github.com/Qson8/flutter_webview_demo.git
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-05-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Hi Flutter 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档