flutter webView 使用以及与 js 互操作

最新推荐文章于 2024-08-19 19:15:19 发布

lzyprime

最新推荐文章于 2024-08-19 19:15:19 发布

阅读量2.8k

点赞数 1

分类专栏： flutter 文章标签： flutter android ios

本文链接：https://blog.csdn.net/prime_liu/article/details/104701756

版权

这篇博客介绍了如何在 Flutter 应用中使用 webview_flutter 插件，并实现 Flutter 与 JavaScript 的互操作。作者提供了封装互操作的方法，包括 Flutter 调用 JS 接收返回值以及 JS 调用 Flutter 的过程。通过建立 JavascriptChannel 和处理回调函数，实现了跨平台的数据传递。

摘要由CSDN通过智能技术生成

lzyprime 博客 (github)
创建时间：2020.03.06
qq及邮箱：2383518170

λ:

仓库地址：https://github.com/lzyprime/flutter_demos/tree/flutter_webview_demo

git clone -b flutter_webview_demo https://github.com/lzyprime/flutter_demos.git

插件： webview_flutter ，目前版本：^0.3.19+9
由于要兼顾 Android 和 Ios 两个平台的webView, js 调用native时无法直接返回数据，所以通过回调的形式曲线救国：接到js请求后，处理数据，然后主动调用js相关函数。
flutter 调用js 可以监听返回值

主要参数和方法

官方的example或者跳到源码一看便知

// 构造函数  
const WebView({
    Key key,
    this.onWebViewCreated, //webView创建完成后的回调函数， WebViewCreatedCallback(WebViewController controller)，会返回 webViewController
    this.initialUrl, //要加载的url地址
    this.javascriptMode = JavascriptMode.disabled, //js是否执行，默认值为不执行, JavascriptMode.unrestricted执行。不能为空
    this.javascriptChannels, // js 调用 flutter 时的处理者们，set<JavascriptChannel>。 所有JavascriptChannel的name不允许重复
    this.navigationDelegate, // 拦截请求并处理，详情请查看源码
    this.gestureRecognizers, // 手势监听与处理，详情请查看源码
    this.onPageStarted,  // 开始加载时的回调，PageStartedCallback(String url)
    this.onPageFinished, // 加载结束的回调，PageFinishedCallback(String url)
  
  /// 剩余参数英文直译即可，详情请查看源码
    this.debuggingEnabled = false,
    this.gestureNavigationEnabled = false,
    this.userAgent,
    this.initialMediaPlaybackPolicy =
        AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
  })  : assert(javascriptMode != null),
        assert(initialMediaPlaybackPolicy != null),
        super(key: key);

webViewController:

onWebViewCreated 会返回当前webView的controller, 官方给的example里的做法是定义一个Completer<WebViewController> 实现延迟初始化：

class _WebViewPageState extends State<WebViewPage> {
  final _controller = Completer<WebViewController>();
  ....
  WebView(
        ....
        onWebViewCreated: (controller) {
            _controller.complete(controller);
        },
  )
  ....
}

之后对WebViewController 的调用通过 _controller.future 来实现，类型是Future<WebViewController>, 所以全都是异步调用:

_controller.future.then((controller){
  ...
})
  // 或
 FutureBuilder(
  future: _controller.future,
  builder: (BuildContext context,AsyncSnapshot<WebViewController> controller){
    return (Widget)
  }
)

主要函数：

// loadUrl，currentUrl，canGoBack ... 等函数
// 查看源码，看函数名和注释便知功能

///其中，js互操作常用：
Future<String> evaluateJavascript("js 代码") // 执行js, 并且可以接收 js 执行的返回值

JavascriptChannel

  JavascriptChannel({
    @required this.name, // js 调用时的变量名，
    // 如name="Print", js可以通过 Print.postMessage(msg) 调用flutter
    // 请求会在 onMessageReceived 函数中处理
    
    @required this.onMessageReceived, // 处理js 请求
    // typedef