Flutter使用JsBridge方式处理Webview与H5通信
- 发表于
- flutter
使用Flutter进行项目开发加载H5页面时，打开H5页面需要使用WebView组件。同时，为了和H5页面进行数据交换，有时候还需要借助JSBridge来实现客户端与H5之间的通讯。除此之外，Hybrid开发模式也需要Webview与JS做频繁的交互。下面是实现方法。
安装
本文使用的是Flutter官方的webview_flutter组件，目前的最新版本是0.3.19+9。使用前需要先添加webview_flutter插件依赖，如下所示。
|
1 |
webview_flutter: 0.3.19+9 |
然后，使用flutter packages get命令将插件拉取到本地并保持依赖。由于加载WebView需要使用网络，所以还需要在android中添加网络权限。打开目录android/app/src/main/AndroidManifest.xml，然后添加如下代码即可。
|
1 |
<uses-permission android:name="android.permission.INTERNET"/> |
由于iOS在9.0版本默认开启了Https，所以要运行Http的网页，还需要在ios/Runner/Info.plist文件中添加如下代码。
|
1 2 |
<key>io.flutter.embedded_views_preview</key> <string>YES</string> |
基本使用
打开WebView组件的源码，WebView组件的构造函数如下所示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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代码。
|
1 2 3 4 |
<button onclick="callFlutter()">callFlutter</button> function callFlutter(){ Toast.postMessage("JS调用了Flutter"); } |
使用postMessage方式 Toast 是定义好的名称，在接受的时候要拿这个名字 去接收，Flutter端的代码如下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
WebView( javascriptChannels: <JavascriptChannel>[ _alertJavascriptChannel(context), ].toSet(), ) JavascriptChannel _alertJavascriptChannel(BuildContext context) { return JavascriptChannel( name: 'Toast', onMessageReceived: (JavascriptMessage message) { showToast(message.message); }); } |
navigationDelegate
除此之外，另一种方式是navigationDelegate，主要是加载网页的时候进行拦截，例如有下面的JS协议。
|
1 |
document.location = "js://webview?arg1=111&args2=222"<em>;</em> |
对应的Flutter代码如下。
|
1 2 3 4 5 6 7 8 9 10 11 |
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; <em>//必须有</em> }, |
其中，NavigationDecision.prevent表示阻止路由替换，NavigationDecision.navigate表示允许路由替换。
JSBridge
除此之外，我们还可以自己开发JSBridge，并建立一套通用规范。首先，需要与H5开发约定协议，建立Model。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
class JsBridge { String method; <em>// 方法名</em> Map data; <em>// 传递数据</em> Function success; <em>// 执行成功回调</em> Function error; <em>// 执行失败回调</em> JsBridge(this.method, this.data, this.success, this.error); <em>/// jsonEncode方法中会调用实体类的这个方法。如果实体类中没有这个方法，会报错。</em> 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，如下所示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class JsBridgeUtil { <em>/// 将json字符串转化成对象</em> static JsBridge parseJson(String jsonStr) { JsBridge jsBridgeModel = JsBridge.fromMap(jsonDecode(jsonStr)); return jsBridgeModel; } <em>/// 向H5开发接口调用</em> static executeMethod(context, JsBridge jsBridge) async{ if (jsBridge.method == 'openWeChatApp') { <em>/// 先检测是否已安装微信</em> bool _isWechatInstalled = await fluwx.isWeChatInstalled(); if (!_isWechatInstalled) { toast.show(context, '您没有安装微信'); jsBridge.error?.call(); return; } fluwx.openWeChatApp(); jsBridge.success?.call(); } } } |
为了让我们封装得WebView变得更加通用，可以对Webview进行封装，如下所示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
final String url; final String title; WebViewController webViewController; <em>// 添加一个controller</em> 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', <em>// 与h5 端的一致 不然收不到消息</em> 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) { <em>// 解决切换页面时弹框显示异常问题</em> 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", <em>// h5 可以通过navigator.userAgent判断当前环境</em> javascriptMode: JavascriptMode.unrestricted, <em>// 启用 js交互，默认不启用JavascriptMode.disabled</em> javascriptChannels: <JavascriptChannel>[ _JsBridge(context) <em>// 与h5 通信</em> ].toSet(), ); }), ); } } |
当JS需要调用Flutter时，直接调用JsBridge即可，如下所示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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通信
所有媒体，可在保留署名、
原文连接的情况下转载，若非则不得使用我方内容。
