Flutter如何使用JsBridge方式处理Webview与H5通信

发布时间：2020-08-04 13:46:41 作者：小猪
来源：亿速云阅读：224

这篇文章主要讲解了Flutter如何使用JsBridge方式处理Webview与H5通信，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

目前，移动跨平台开发作为移动开发的重要组成部分，是移动开发者必须掌握的技能，也是自我提升的重要手段。作为Google推出的跨平台技术方案，Flutter具有诸多的优势，已经或正在被广大开发者应用在移动应用开发中。在过去的2019年，我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用，对于移动应用开发来说，Flutter能够满足几乎所有的业务开发需求，所以，学习Flutter正当时。

众所周知，使用Flutter进行项目开发时，就免不了要加载H5页面，在移动开发中打开H5页面需要使用WebView组件。同时，为了和H5页面进行数据交换，有时候还需要借助JSBridge来实现客户端与H5之间的通讯。除此之外，Hybrid开发模式也需要Webview与JS做频繁的交互。

安装

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

webview_flutter: 0.3.19+9

然后，使用flutter 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：初始load的url；
javascriptMode：JS执行模式（是否允许JS执行）；
javascriptChannels：JS和Flutter通信的Channel；
navigationDelegate：路由委托（可以通过在此处拦截url实现JS调用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&#63;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表示允许路由替换。

JSBridge

除此之外，我们还可以自己开发JSBridge，并建立一套通用规范。首先，需要与H5开发约定协议，建立Model。

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提供了打开微信App的接口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&#63;.call();
  return;
  }
  fluwx.openWeChatApp();
  jsBridge.success&#63;.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', // 与h6 端的一致 不然收不到消息
  onMessageReceived: (JavascriptMessage msg) async{
  String jsonStr = msg.message;
  JsBridgeUtil.executeMethod(JsBridgeUtil.parseJson(jsonStr));
  });

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  backgroundColor: isPhone &#63; Colors.white : Color(Config.foxColors.bg),
  appBar: AppBar(
  backgroundColor: isPhone &#63; 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", // h6 可以通过navigator.userAgent判断当前环境
    javascriptMode: JavascriptMode.unrestricted, // 启用 js交互，默认不启用JavascriptMode.disabled
    javascriptChannels: <JavascriptChannel>[
    _JsBridge(context) // 与h6 通信
    ].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 src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></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>

看完上述内容，是不是对Flutter如何使用JsBridge方式处理Webview与H5通信有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。

Flutter如何使用JsBridge方式处理Webview与H5通信

相关阅读