Flutter处理Webview与H5通信的常用方式

terry 2年前 (2023-09-23) 阅读数 70 #移动小程序

跨平台移动开发作为移动开发的重要组成部分，是移动开发者必须掌握的技能，也是自我提升的重要手段。 Flutter作为Google推出的跨平台技术解决方案，拥有诸多优势，已经或正在被移动应用开发领域的大量开发者使用。最近的2019年，我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用程序。对于移动应用开发来说，Flutter几乎可以满足所有的业务开发需求，所以现在正是学习Flutter的最佳时机。

众所周知，使用Flutter进行项目开发时，不可避免的要加载H5页面。移动开发中打开H5页面需要使用WebView组件。同时，为了与H5端交换数据，有时需要使用JS Bridge来实现客户端与H5之间的通信。另外，Hybrid开发模式还需要Webview和JS之间频繁交互。

安装

本文使用Flutter官方的webview_flutter组件。最新版本是0.3.19+9。使用前，添加webview_flutter插件依赖，如下所示。

webview_flutter: 0.3.19+9
复制代码

然后使用flag packages get命令将插件拉取到本地并保留依赖。由于加载WebView需要使用网络，所以Android中也必须添加网络权限。打开 android/app/src/main/AndroidManifest.xml 文件夹，然后添加以下代码。

<uses-permission android:name="android.permission.INTERNET"/>
复制代码

由于 iOS 在 9.0 版本中默认启用了 Https，因此要运行 Http 网页，请在 ios/Runner/Info.plist 文件中添加以下代码。

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
复制代码

基本上，使用

开源WebView组件。 WebView组件的构造函数如下。

const WebView({
    Key key,
    this.onWebViewCreated,
    this.initialUrl,
    this.javascriptMode = JavascriptMode.disabled,
    this.javascriptChannels,
    this.navigationDelegate,
    this.gestureRecognizers,
    this.onPageStarted,
    this.onPageFinished,
    this.debuggingEnabled = false,
    this.gestureNavigationEnabled = false,
    this.userAgent,
    this.initialMediaPlaybackPolicy =
        AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
  })  : assert(javascriptMode != null),
        assert(initialMediaPlaybackPolicy != null),
        super(key: key);
复制代码

其中，比较常见的属性含义如下：

onWebViewCreated：WebView创建后调用，且只会调用一次；
initialUrl：初始加载的URL；
javascriptMode：JS执行模式（是否允许JS执行）；
javascriptChannels：JS 和 Flutter 之间通信的通道；
navigationDelegate：路由委托（JS可以通过拦截这里的URL来调用Flutter部分）；
gestureRecognizers：手势监控；
onPageFinished：WebView加载时回调。 import 'dart:async';

使用Webview加载网页时，经常需要与JS进行交互，即JS调用Flutter，Flutter调用JS。 Flutter调用JS比较简单，直接调用_controller.evaluateJavascript()函数即可。JS给Flutter打电话有点困难。之所以比较麻烦是因为javascriptChannels库只支持字符串类型，而JS的方法是固定的，即只能使用postMessage方法。这对于iOS来说是没有问题的，但是对于Android来说如果有问题，当然也可以通过更改源码来实现。

JS 调用 Flutter

javascriptChannels 方法

javascriptChannels 方法也是推荐的方法，主要用于 JS 向 Flutter 传输数据。例如，有以下JS代码。

<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
   Toast.postMessage("JS调用了Flutter");  
}
复制代码

使用postMessage方法。 Toast 是一个已定义的名称。接收时必须使用此名称。 Flutter页面的代码如下。

WebView(
     javascriptChannels: <JavascriptChannel>[ 
        _alertJavascriptChannel(context),
   ].toSet(),
)

JavascriptChannel _alertJavascriptChannel(BuildContext context) {
  return JavascriptChannel(
      name: 'Toast',
      onMessageReceived: (JavascriptMessage message) {
        showToast(message.message);
      });
}

复制代码

navigationDelegate

另外还有一种方式是navigationDelegate，主要是在网页加载时进行拦截，比如下面的JS协议。

document.location = "js://webview?arg1=111&args2=222";
复制代码

对应的Flutter代码如下。

navigationDelegate: (NavigationRequest request) {
  if (request.url.startsWith('js://webview')) {  
    showToast('JS调用了Flutter By navigationDelegate'); 
    print('blocking navigation to $request}');
    Navigator.push(context,
        new MaterialPageRoute(builder: (context) => new testNav()));
    return NavigationDecision.prevent;
  }
  print('allowing navigation to $request');
  return NavigationDecision.navigate;    //必须有
},
复制代码

其中，NavigationDecision.prevent 表示阻止路由替换，NavigationDecision.navigate 表示允许路由替换。

JS桥

另外，我们也可以自己开发JS桥，建立一套通用的规范。首先，你必须与H5开发达成一致并建立模型。

class JsBridge {
  String method; // 方法名
  Map data; // 传递数据
  Function success; // 执行成功回调
  Function error; // 执行失败回调

  JsBridge(this.method, this.data, this.success, this.error);

  /// jsonEncode方法中会调用实体类的这个方法。如果实体类中没有这个方法，会报错。
  Map toJson() {
    Map map = new Map();
    map["method"] = this.method;
    map["data"] = this.data;
    map["success"] = this.success;
    map["error"] = this.error;
    return map;
  }
 
  static JsBridge fromMap(Map<String, dynamic> map) {
    JsBridge jsonModel =  new JsBridge(map['method'], map['data'], map['success'], map['error']);
    return jsonModel;
  }

  @override
  String toString() {
    return "JsBridge: {method: $method, data: $data, success: $success, error: $error}";
  }
}
复制代码

然后内部处理接收到的H5方法。例如，H5客户端提供了openWeChatApp接口用于打开微信应用，如下所示。

class JsBridgeUtil {
  /// 将json字符串转化成对象
  static JsBridge parseJson(String jsonStr) {
    JsBridge jsBridgeModel = JsBridge.fromMap(jsonDecode(jsonStr));
    return jsBridgeModel;
  }

  /// 向H5开发接口调用
  static executeMethod(context, JsBridge jsBridge) async{
    if (jsBridge.method == 'openWeChatApp') {
      /// 先检测是否已安装微信
      bool _isWechatInstalled = await fluwx.isWeChatInstalled();
      if (!_isWechatInstalled) {
        toast.show(context, '您没有安装微信');
        jsBridge.error?.call();
        return;
      }
      fluwx.openWeChatApp();
      jsBridge.success?.call();
    }
  }
}
复制代码

为了让我们包裹的webview更加通用，我们可以如下所示包裹webview。

  final String url;
  final String title;
  WebViewController webViewController; // 添加一个controller
  final PrivacyProtocolDialog privacyProtocolDialog;

  Webview({Key key, this.url, this.title = '', this.privacyProtocolDialog})
      : super(key: key);

  @override
  WebViewState createState() => WebViewState();
}

class WebViewState extends State<Webview> {
  bool isPhone = Adapter.isPhone();
  JavascriptChannel _JsBridge(BuildContext context) => JavascriptChannel(
      name: 'FoxApp', // 与h5 端的一致 不然收不到消息
      onMessageReceived: (JavascriptMessage msg) async{
        String jsonStr = msg.message;
        JsBridgeUtil.executeMethod(JsBridgeUtil.parseJson(jsonStr));
      });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: isPhone ? Colors.white : Color(Config.foxColors.bg),
      appBar: AppBar(
        backgroundColor: isPhone ? null : Color(Config.foxColors.bg),
        leading: AppIcon(Config.foxImages.backGreyUrl,
            callback: (){
              Navigator.of(context).pop(true);
              if (widget.privacyProtocolDialog != null) { // 解决切换页面时弹框显示异常问题
                privacyProtocolDialog.show(context);
              }
            }),
        title: Text(widget.title),
        centerTitle: true,
        elevation: 0,
      ),
      body: StoreConnector<AppState, UserState>(
          converter: (store) => store.state.userState,
          builder: (context, userState) {
            return WebView(
              initialUrl: widget.url,
              userAgent:"Mozilla/5.0 FoxApp", // h5 可以通过navigator.userAgent判断当前环境
              javascriptMode: JavascriptMode.unrestricted, // 启用 js交互，默认不启用JavascriptMode.disabled
              javascriptChannels: <JavascriptChannel>[
                _JsBridge(context) // 与h5 通信
              ].toSet(),
            );
          }),

    );
  }
}
复制代码

当JS需要调用Flutter时，可以直接调用JsBridge，如下图。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script ></script>
<body>
coming baby!
<script>
var str = navigator.userAgent;
if (str.includes('FoxApp')) {
FoxApp.postMessage(JSON.stringify({method:"openWeChatApp"}));
} else {
$('body').html('<p>hello world</p>');
}
</script>
</body>
</html>

作者：香之红
链接：https://juejin.im/post/5e8805486fb9a03c52683bb1
来源：掘金归属作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。