flutter--webview_flutter的使用

webview_flutter

在应用内置组件中加载网页

dependencies:
   webview_flutter: ^2.0.9

/// 初始化webview
  initWebView() {
    return WebView(
    	//是否允许js执行
        javascriptMode: JavascriptMode.unrestricted,
        //JS和Flutter通信的Channel
        javascriptChannels: <JavascriptChannel>{
          _toasterJavascriptChannel(context)
        },
        //路由委托（可以通过在此处拦截url实现JS调用Flutter部分）
        navigationDelegate: (NavigationRequest request) {
          print('allowing navigation to $request');
          return NavigationDecision.navigate;
        },
        //手势监听
        gestureNavigationEnabled: true,
        initialUrl:
            "https://www.callmysoft.com/",
        //加载进度
        onProgress: (int progress) {
          print("WebView is loading (progress : $progress%)");
        });
  }

flutter 与 js 进行交互

flutter

// 监听webview返回值
  dubPay(JavascriptMessage resp) {
    this.dubPayRes = DubPayModel.fromJson(jsonDecode(resp.message));
    print(jsonDecode(resp.message));
    setState(() {
      priceNum = num.parse(this.dubPayRes.price);
    });
  }
  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(name: 'pay', onMessageReceived: dubPay);
  }

web

$(".dubPay_list li").click(function(){
      $(this).addClass("list_active").siblings("li").removeClass("list_active");
      var dubPid = $(this).attr("data-Pid");
      var dubPrice =  $(this).find("p a").text();
      var val = {
        p_id:dubPid,
        price:dubPrice
      }
      pay.postMessage(JSON.stringify(val))
    })

这样就实现了flutter与网页的数据传输了