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?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?.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 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 Webview与H5通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • react native与webview通信的示例代码

    WebView是ReactNative中的组件 , 它可以创建一个原生的WebView,可以用于访问一个网页. 有时候我们需要在RN与WebView之间进行通信,或者进行数据传递,或者发送消息通知.这时候就要用以下知识了. 一:WebView向RN端发送数据: 首先,我们构建一个webview: <WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage

  • VsCode之使用WebView通信详解

    之前我在这篇文章VsCode插件开发之插件初步通信 通过插件完成通信,这回我还是通过插件,只不过方式主要以在ts文件里面使用webview来进行通信. 另外在此声明,一定要好好看仔细看官方文档,国内关于VsCode相关的开发,少之又少,虽然有一个叫小茗同学写的相对较全面,但是大家可以仔细看,其实他的内容大多也来自官方,同时有部分也加上自己的理解和想法.个人建议,关于VsCode插件相关的,最好是跑一跑VsCode相关官方例子,这样有助于对VsCode插件开发有一个大致的思路和全局认识,换言之有一

  • Flutter使用JsBridge方式处理Webview与H5通信的方法

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

  • 微信小程序webView嵌入H5的方法实例

    前言 微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了.在这之前,我们在小程序中没有办法整合我们已有的HTML程序(比如HTML5文章系统,商城系统等),只能使用小程序的方式重新开发一套,现在有了<web-view>就可以方便的集成这些网页系统,为我们减少了可观的工作量. tips:个人类型的小程序暂不支持web-viwe引用H5,同时需要在小

  • iOS webview捕获H5按钮方法示例代码

    前言 本文主要给大家介绍了关于iOS webview捕获H5按钮的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下: 实现iOS webview捕获使用H5中按钮的点击方法,可以使用JSContext. 1.在工程中Linked Frameworks and Libraries中加入JavaScriptCore.framework 2.在使用的地方#import <JavaScriptCore/JavaScriptCore.h> 3.实现webview的代理方

  • Angular下H5上传图片的方法(可多张上传)

    最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码 angular.module('myApp') .directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $tim

  • Android APP之WebView校验SSL证书的方法

    Android系统的碎片化很严重,并且手机日期不正确.手机根证书异常.com.google.android.webview BUG等各种原因,都会导致WebViewClient无法访问HTTPS站点.SSL错误的处理方式十分关键,如果处理不当,可能导致中间人攻击,黑客窃听数据,进而引发安全事故. 严谨地处理onReceivedSslError尤为重要.请参考以下代码,原理是:如果webview报告SSL错误,程序将会对服务器证书进行强校验,如果服务器传入证书的指纹(sha256)与记录值一致,说

  • Android编程实现WebView全屏播放的方法(附源码)

    本文实例讲述了Android编程实现WebView全屏播放的方法.分享给大家供大家参考,具体如下: 最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧. 首先写布局文件activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

  • 详解react-native WebView 返回处理(非回调方法可解决)

    1.前言 项目中有些页面内容是变更比较频繁的,这些页面我们会考虑用 网页 来解决. 在RN项目中提供一个公用的Web页,如果是网页内容,就跳转到这个界面展示. 此时会有一个问题是,网页会有一级页面,二级页面,这就会设计到导航栏返回键的处理(以及在Android上返回键的处理). 这个问题,在RN官网就可找到解决方式.就是用 onNavigationStateChange 这个回调方法记录当前的导航状态,从而判断是返回上一级页面还是退出这个网页,回到App的其他界面. 但是,当网页的实现是Reac

  • android webView截图的4种方法

    android 在webView里面截图大概有四种方式,具体内容如下 1.获取到DecorView然后将DecorView转换成bitmap然后写入到文件里面. View view = getWindow().getDecorView(); Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitma

  • 对pandas写入读取h5文件的方法详解

    1.引言 通过参考相关博客对hdf5格式简要介绍. hdf5在存储的是支持压缩,使用的方式是blosc,这个是速度最快的也是pandas默认支持的. 使用压缩可以提磁盘利用率,节省空间. 开启压缩也没有什么劣势,只会慢一点点. 压缩在小数据量的时候优势不明显,数据量大了才有优势. 同时发现hdf读取文件的时候只能是一次写,写的时候可以append,可以put,但是写完成了之后关闭文件,就不能再写了, 会覆盖. 另外,为什么单独说pandas,主要因为本人目前对于h5py这个包的理解不是很深入,不

  • 小程序跳转H5页面的方法步骤

    小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态.小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现在已经有超过150万的开发者加入到了小程序的开发,与我们一起共同发力推动小程序的发展,小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,小程序还在许多城市实现了支持地铁.公交服务.小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升. 因此小程序

随机推荐