首页 > Web开发 > 详细

Flutter-WebView使用h5

时间:2020-05-28 18:30:01      阅读:29      评论:0      收藏:0      [点我收藏+]

webview可以跳轉到h5,可以也可以自定義

#flutter官方webview
webview_flutter: ^0.3.10
 ///初始化webview显示
  Widget _showWebView(BuildContext context) {
    return WebView(
      initialUrl: widget.url,///初始化url
      javascriptMode: JavascriptMode.unrestricted,///JS执行模式
      onWebViewCreated: (WebViewController webViewController) {///在WebView创建完成后调用,只会被调用一次
        //
        //
        _controller.complete(webViewController);
      },
      javascriptChannels: <JavascriptChannel>[///JS和Flutter通信的Channel;
        _alertJavascriptChannel(context),
      ].toSet(),
      navigationDelegate: (NavigationRequest request) {//路由委托(可以通过在此处拦截url实现JS调用Flutter部分);
        ///通过拦截url来实现js与flutter交互
        if (request.url.startsWith(‘js://webview‘)) {
          Fluttertoast.showToast(msg:‘JS调用了Flutter By navigationDelegate‘);
          print(‘blocking navigation to $request}‘);
          return NavigationDecision.prevent;///阻止路由替换,不能跳转,因为这是js交互给我们发送的消息
        }

        return NavigationDecision.navigate;///允许路由替换
      },
      onPageFinished: (String url) {///页面加载完成回调
        setState(() {
          _loading = false;
        });
        print(‘Page finished loading: $url‘);
      },

    );
  }

更詳細的使用方法請訪問pub.dev

Flutter-WebView使用h5

原文:https://www.cnblogs.com/ssjf/p/12981502.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!