flutter与H5通信

概述

纵向显示 graph TD; ，横向则 graph LR;

graph LR;
    A(Flutter与H5通信的几种方式)-->B1(JS向Flutter传递数据);
    B1(JS向Flutter传递数据)-.->C1(通过URL方式);
    B1(JS向Flutter传递数据)-.->C2(通过javascriptChannels方式)
    A(Flutter与H5通信的几种方式)-->B2(Flutter向JS传递数据);
    B2(Flutter向JS传递数据)-- 线条说明1 -->C3(通过URL的方式);
    B2(Flutter向JS传递数据)-->|线条说明2|C4(通过runJavascript的方式);

JS向Flutter传递数据

通过 URL 传递数据

1. H5 页面内，使用 js 修改 url
2. WebView 中，处理URL，发起URL请求
3. Flutter 中，通过 navigationDelegate 拦截 URL跳转然后解析获取数据

Flutter向JS传递数据

通过 URL

1. Flutter 中，在 WebViewController 中通过 loadRequest 流向 WebView
2. 在 WebView 中处理 URL 发起 URL 请求
3. 在 H5 中获取 URL 解析 URL 中的数据