Flutter & H5页面混合开发指北

大家好，我是多喝热水。

最近在写 Flutter，简单聊一聊在 Flutter 中如何去集成H5页面，读完这篇文章你可以了解以下内容：

1）如何在 Flutter 中加载 H5？

2）Flutter 和 H5 如何进行通信？

前言

要在 Flutter 中混入 H5 页面，首先我们需要一个 webview 来加载这个 H5，这里需要用到 flutter_inappwebview（https://pub.dev/packages/flutter_inappwebview）依赖，这个算是 Flutter 中比较优质的三方 webview 库了，功能比较全面：

使用场景

什么场景下用 webview 性价比最高？说说我的看法：

1）经常会需要变动的页面，比如活动页，H5 有天然的热更新优势

2）不存在大量的逻辑交互，且已经有一套现成的 H5 页面，可以直接套用，避免重复造轮子

实战案例

比如编程导航的网页端会员页面已经适配了移动端，那我们其实没有必要重新写一套，直接拿过来就能用了，只需要解决 Flutter 和 H5 之间的通信问题即可：

所以总结一下，我们需要做以下几件事情：

1）安装 flutter_inappwebview

2）加载 webview

3）在 webview 中种上 Cookie（如果有的话）

4）Flutter 与 H5 通信的事件绑定（H5发射事件，flutter监听事件）

安装 flutter_inappwebview

▼
bash
复制代码
flutter pub add flutter_inappwebview

加载 webview

这里我们主要关注的点是 onWebViewCreated 这个钩子，因为在 webview 创建完成后就可以对事件进行监听（监听来自 H5 发射的事件）

▼
dart
复制代码
InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri("https://codefather.cn/vip")),
  onWebViewCreated: onWebViewCreated,
)

Cookie 种植

1）我们需要拿到 App 中的 Cookie（ token 同理），然后给指定地址种植上，这里我们会用到 CookieManager 来种植 Cookie，如下：

▼
dart
复制代码
// 在 onWebViewCreated 钩子中调用
void onWebViewCreated(InAppWebViewController controller) {
  setCookies();
}

setCookies() {
  // 1. 实例化
  final CookieManager cookieManager = CookieManager.instance();
  // 2. 获取 App 中的所有 cookie
  final cookies = getCookies();
  cookies.forEach((key, value) async {
    await cookieManager.setCookie(
      url: WebUri("https://codefather.cn/vip"),
      name: key,
      value: value,
      domain: Global.cookieDomain,
      path: "/api",
      isSecure: true,
      maxAge: 3600,
    );
  })
}

事件监听（来自H5）

这里我们以开通会员按钮举例，预期是点击开通会员，弹出"我要开通会员！！！的提示。

1）Flutter端的监听代码如下

▼
dart
复制代码
void onWebViewCreated(InAppWebViewController controller) {
  // 1. Cookie设置
  setCookies();
  // 2. 加入会员按钮点击监听
  onJoinVip();
}

void onJoinVip() {
  _controller?.addJavaScriptHandler(
    handlerName: "joinVipHandler", // 监听加入会员事件
    callback: (arguments) {
      showToast("我要开通会员！！！");
    },
  );
}

2）H5端的代码如下

通过 flutter_inappwebview 加载的网页我们可以拿到 flutter_inappwebview 对象，那么我们可以对 window.flutter_inappwebview 做判断，如果它存在我们就认为它是在 flutter 端加载的网页，如果为空，则是走的正常的网页加载，伪代码如下：

▼
js
复制代码
function h5JoinVip() {
  if (window.flutter_inappwebview) {
    // 发射一个加入会员的事件，让flutter去处理这个支付请求
    window.flutter_inappwebview.callHandler('joinVipHandler');
  } else {
    H5pay(); // 走h5的支付
  }
}

效果展示

效果已经有了，剩下的就是在 Flutter 中去处理支付流程（但这不是本篇文章的重点）：

感兴趣的小伙伴可以自己尝试一下，最近会开一个 Flutter 专栏，写一些 Flutter 相关的文章，感兴趣的小伙伴可以关注一波，也欢迎关注我的公众号「程序员热水」，我会分享一些前端相关的知识碎片。

往期文章：

前言