zoukankan      html  css  js  c++  java
  • Flutter-WebView使用h5

    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

  • 相关阅读:
    npm start报错
    npm install 错误
    vue父子组件间传值
    vue-devtools安装过程的坑
    用js进行排序
    筛选表格数据
    基于ElementUI封装可复用的表格组件
    小程序头部滑动切换
    DisneyDiffuse解析
    基于URP的ScreenSpaceDecal的实现(其实和URP没啥关系)
  • 原文地址:https://www.cnblogs.com/ssjf/p/12981502.html
Copyright © 2011-2022 走看看