【Flutter】FlutterWeb与Js交互_flutter web 与js

Flutterweb与android原生进行交互，需要用到js作为中转（flutter知识有限，目前只知道需要js作为中转），所以需要js调用flutter，flutter调用js。

Flutter调用Js

• Flutter代码

import 'dart:convert';
import 'dart:js' as js;

class Utils {
  static Map<String, dynamic> getSearchData() {
    //调用Js的方法
    var result = js.context.callMethod("getSearchData");
    return jsonDecode(result);
  }
}

1
2
3
4
5
6
7
8
9
10
11

• js定义的方法

function getSearchData(){
	//searchData是android原生传递过来的namespace，
	//searchData.getSearchData()是android原生定义的方法
    var result = searchData.getSearchData();
    return result;
}
1
2
3
4
5
6

上述searchData是android原生传递过来的namespace，searchData.getSearchData()是android原生定义的方法，android原生与Js交互可以看：Flutter】Android原生WebView（非Flutter WebView）与FlutterWeb交互

Js调用Flutter

• Flutter中的代码

    //提供给js调用的方法
    js.context["invokeJs"] = () {
       print("Js调用到了flutter!");
    };
1
2
3
4

• Js调用该方法

function getSearchData(){
    var result = searchData.getSearchData();
    //js调用Flutter的方法
    window.invokeJs();
    return result;
}
1
2
3
4
5
6

组合

使用上述两个组合，可以做到Flutter调用Js的方法，然后Js回调Flutter的方法。

• Flutter代码

import 'dart:convert';
import 'dart:js' as js;

typedef Success = void Function(String result);

class Utils {
  static Map<String, dynamic> getSearchData(Success success) {
    //提供给js调用的方法
    js.context["invokeJs"] = (text) {
      // print("Js调用到了flutter!");
      // success("Js调用到了flutter!");
      success.call("Js调用到了flutter!$text");
    };

    //调用Js的方法
    var result = js.context.callMethod("getSearchData");
    return jsonDecode(result);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• Js定义方法

function getSearchData(){
	//searchData原生定义的namespace，
	//getSearchData是@JavascriptInterface标记的方法
    var result = searchData.getSearchData();
    var text = "js入参"
    //调用Flutter定义的方法
    window.invokeJs(text);
    return result;
}
1
2
3
4
5
6
7
8
9

• 使用

    var result = Utils.getSearchData((text) {
      print("Flutter内部回调：$text");
    });
1
2
3