flutter和H5前端vue通信SDK

近期做了个项目, 部分功能在flutter上用dart无法实现, 某些SDK只提供了javascript的方法, 那么为了实现功能就需要在H5实现完逻辑之后传递到flutter

1、创建vue项目, 仅仅为了实现逻辑, 并没有对代码进行封装,凑活看

第一步:  在mounted里注册方法用于flutter端调用

第二步: 当执行完前端逻辑后调用window方法传递信息给flutter

2、flutter端发送参数并所接收内容

第一步: 注册WebViewController;

WebViewController _controller;

WebView(

        initialUrl: 'http://localhost:8080/assets/index.html',

        onWebViewCreated: (WebViewController controller) {

          _controller = controller;

        },

)

第二步:调用JS方法

_controller.runJavascript(method);

// method 为JS方法要和JS注册的方法以及参数进行对应

第三步: 接收JS传回来的执行结果:

值得注意的是:由于传递的信息较多我在传递的时候用了Key参数进行区分不同的方法

key:'account'

javascriptChannels: {

          JavascriptChannel(

              name: 'handlerName',

              onMessageReceived: (JavascriptMessage message) {

                Map<String, dynamic> msgMap = jsonDecode(message.message);

                analyseJSData(msgMap);

              })

        }),

拓展:

此项目我是把vue项目进行打包在flutter项目里面用8080端口进行启动本地服务来加载webview的