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通信内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!
- Linux服务器的进程查看命令详解
- 另类SEO分享:利用JS封装iframe躲过搜索引擎的抓取
- Linux :MAC 地址克隆方法
- 解决WordPress修改数据库表前缀后无法登陆的问题
- 解决启用WP-Super-Cache后出现的几个问题
- Shell下制作自解压安装包,实现脚本的简单加密
- WordPress(Twenty Ten主题)文章副标题修改教程
- ipvsadm启动报错解决办法,另附ipvsadm详细参数
- Linux:mv 命令的10个实用例子
- Linux优化方法收集与整理
- 常用MySQL语句搜集整理
- ASM 翻译系列第十二弹:ASM Internal amdu - ASM Metadata Dump Utility
- 分享一个Linux无法创建文件夹,但是目录权限却显示正常的问题和解决
- 桌面白屏(Active故障)修复批处理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- WTForm的URLXSS谈开源组件的安全性
- 谈一谈复杂的正则表达式分析
- Linux 用户名、主机添加背景色
- percona-toolkit大表操作DDL使用 2.1. 数据库字符集修改2.2. 数据库建库、授权操作2.3. 数据库建表、插入数据4.1. 添加表字段【
- PHPMailer 代码执行漏洞(CVE-2016-10033)分析(含通用POC)
- linux 平均负载 load average 的含义【转】
- zookeeper-01 概述
- zookeeper-02 部署
- zookeeper-03 命令行操作
- java连接zookeeper服务器出现“KeeperErrorCode = ConnectionLoss for ...”
- Linux 内存使用率
- CentOS7.4下编译Hadoop-2.7.6
- VMware安装CentOS6
- VMware安装CentOS7 3.1 主机名修改3.2 网卡名修改3.3 ifconfig安装
- VMware网络设置