Flutter:加载本地Html、WebView与JS交互
本次教程使用的是Flutter官方提供的WebView组件webview_flutter 2.3.1,flutter_android 2.2.1
一. WebView介绍
以下为Flutter WebView官方的介绍,在Android
采用原生的WebView
实现,在IOS
上采用WKWebView
实现。可以看出Flutter目前没有自己的WebView引擎
,可能若干年后会开发出属于Flutter的引擎,所以遇到问题多看Plugin源码。
On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.
目前Flutter WebView提供的功能较少,文档中没写到的,可以理解为暂时不支持,如果就想做,建议修改Plugin代码。如果想换内核,比如Android端换腾讯X5内核,也可以修改Plugin端代码(修改Plugin代码只会修改本地对应版本的缓存,修改不能提交到Git)。本文就有修改Plugin代码需求,请往下看。
由于我本人是Android
出身,所以更多的是从Android开发的视角来说明。
二. WebView使用
添加依赖
dependencies: webview_flutter: ^2.3.1
引用包
import 'package:webview_flutter/webview_flutter.dart';
webview_flutter
要求android minSdkVersion 19
1. 加载URL
WebView(initialUrl: "https://flutterchina.club/")
2. 加载本地文件
本地文件index.html
在Flutter项目的路径为./assets/index.html
。
2.1 Android加载本地文件
Android WebView本身支持加载本地文件,上述路径在Android APK中的路径为android_asset/flutter_assets/assets/index.html
,所以代码如下:
String url = "";
if (Platform.isAndroid) {url = "file:///android_asset/flutter_assets/assets/index.html";
}
...
WebView(initialUrl: url)
2.2 IOS加载本地文件
IOS WebView Plugin本身不支持加载本地文件,需要修改Plugin FlutterWebView.m
代码,Plugin源码如下:
- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary<NSString*, NSString*>*)headers {NSURL* nsUrl = [NSURL URLWithString:url];if (!nsUrl) {return false;}NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:nsUrl];[request setAllHTTPHeaderFields:headers];[_webView loadRequest:request];return true;
}
修改后IOS Plugin代码如下:
- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary<NSString*, NSString*>*)headers {NSURL* nsUrl = [NSURL URLWithString:url];NSLog(@"webview_flutter: %@", nsUrl);NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:nsUrl];[request setAllHTTPHeaderFields:headers];if([url hasPrefix:@"http"]) {[_webView loadRequest:request];}else{if (@available(iOS 9.0, *)) {NSURL *findUrl = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/Frameworks/App.framework/flutter_assets/webres/%@", [[NSBundle mainBundle] bundlePath], @"index.html"]];NSLog(@"Debug >>>> %@", findUrl);NSString *loadUrl = [findUrl.absoluteString stringByReplacingOccurrencesOfString:@"index.html" withString:url];NSURL * url = [NSURL URLWithString:loadUrl];NSLog(@"Debug >>>> load url %@", url);[_webView loadFileURL:url allowingReadAccessToURL:[url URLByDeletingLastPathComponent]];} else {// Fallback on earlier versionsNSLog(@"webview_flutter: loadFileUrl error");}}return true;
}
Flutter代码如下:
String url = "";
if (Platform.isIOS) {url = "file://Frameworks/App.framework/flutter_assets/assets/index.html";
}
...
WebView(initialUrl: url)
由于Flutter Dependencies 依赖版本规则问题,
webview_flutter_wkwebview
可能不定期升级,请以官方代码FlutterWebView.m为准,如果代码不一致,请按照以上思路修改代码。
三. WebView详细说明
1. WebView
使用起来很简单,看一下WebView
的完整参数,以下是整理简写的伪代码:
WebView(onWebViewCreated : void Function(WebViewController controller),initialUrl : String?,javascriptMode : JavascriptMode = JavascriptMode.disabled,javascriptChannels : Set<JavascriptChannel>?,navigationDelegate : NavigationDelegate?,gestureRecognizers : Set<Factory<OneSequenceGestureRecognizer>>?,onPageStarted : (void Function(String url))?,onPageFinished : (void Function(String url))?,onProgress : (void Function(int progress))?,onWebResourceError : (void Function(WebResourceError error))?,debuggingEnabled : bool = false,gestureNavigationEnabled : bool = false,userAgent : String?,zoomEnabled : bool = true,initialMediaPlaybackPolicy : AutoMediaPlaybackPolicy = AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,allowsInlineMediaPlayback : bool = false,)
onWebViewCreated: 创建WebView时调用,返回
WebViewController
对象。initialUrl: WebView加载的URL,也可以指定本地文件,如
assets/index.html
- 在
Android
上的路径file:///android_asset/flutter_assets/assets/index.html
, - 在
IOS
上的路径file://Frameworks/App.framework/flutter_assets/assets/index.html
(由于IOS端不支持加载本地HTML,所以需要修改IOS端Plugin代码)。
- 在
javascriptMode: 是否启用
JavaScript
,默认为JavascriptMode.disabled
- JavascriptMode.disabled: 禁用
JavaScript
- JavascriptMode.unrestricted: 启用
JavaScript
- JavascriptMode.disabled: 禁用
javascriptChannels :
JavaScript
调用Flutter的方法渠道配置,常用方式。navigationDelegate : WebView导航拦截,点击链接跳转时触发。可以通过拦截指定特征的URL,用作与
JavaScript
交互。(个人不推荐使用:1. 不安全 2. HTTP1.1以下有长度限制)目前发现设置
javascriptChannels
后,navigationDelegate
不会再触发,原因不得而知。gestureRecognizers: 处理WebView与Wideget嵌套时的手势交互。
onPageStarted: 页面开始加载时触发,可以用来显示进度条。
onPageFinished: 页面加载结束时触发,可以隐藏进度条。
onProgress: 加载进度。
onWebResourceError: 资源加载失败时触发,返回的数据因平台而异(就是包装了原生平台的错误信息)。
debuggingEnabled: 调试开关。
Android
可以使用Chrome
调试WebView加载,使用方法IOS
可以使用Safari
调试。
gestureNavigationEnabled: 是否开始手势返回功能,默认关闭,只在IOS上有效。
userAgent: HTTP请求头
User Agent
配置。zoomEnabled: 是否开启手势缩放,默认开始。
如果要关闭手势,在IOS上必须设置
javascriptMode = JavascriptMode.unrestricted
才会生效。initialMediaPlaybackPolicy: 媒体播放设置,默认为
AutoMediaPlaybackPolicy.require_user_action_for_all_media_types
。- AutoMediaPlaybackPolicy.require_user_action_for_all_media_types:需要用户同意后才可以使用媒体播放器。
- AutoMediaPlaybackPolicy.always_allow:总是允许播放媒体。
allowsInlineMediaPlayback: 控制IOS是否允许在HTML5上嵌入媒体播放器,在Android上默认允许。
2. WebViewController
下面看一下WebViewController
的伪代码:
class WebViewController {Future<void> loadUrl(String url, {Map<String, String>? headers})Future<String?> currentUrl()Future<bool> canGoBack()Future<bool> canGoForward() Future<void> goBack()Future<void> goForward()Future<void> reload()Future<void> clearCache()@Deprecated('Use [runJavascript] or [runJavascriptReturningResult]')Future<String> evaluateJavascript(String javascriptString)Future<void> runJavascript(String javaScriptString)Future<String> runJavascriptReturningResult(String javaScriptString)Future<String?> getTitle()Future<void> scrollTo(int x, int y)Future<void> scrollBy(int x, int y)Future<int> getScrollX()Future<int> getScrollY()
}
loadUrl : 加载新页面
currentUrl : 获取当前URL
canGoBack : 是否可以回退
canGoForward : 是否可以前进
goBack : 回退(如果不可回退,就不执行任何操作)
goForward : 前进(如果不可前进,就不执行任何操作)
reload : 重新加载/刷新
clearCache : 清除缓存
evaluateJavascript : 调用
JavaScript
方法,已过时,使用runJavascript/runJavascriptReturningResult代替runJavascript : 无返回值的调用
JavaScript
方法runJavascriptReturningResult : 有返回值的调用
JavaScript
方法getTitle : 获取HTML标题
scrollTo : 滑动到X、Y位置
scrollBy : 在当前位置上滑动X、Y长度
getScrollX : 获取X轴滑动长度,单位:pixels
getScrollY : 获取Y轴滑动长度,单位:pixels
3. Cookie
Cookie
目前只支持删除,方法有以下两个:
WebView.platform.clearCookies();
CookieManager().clearCookies();
四. WebView与JS交互
1. Flutter调用JS方法
JS代码如下,分别有一个无返回值和一个有返回值的方法。
<script>function flutterCallJsMethod(message){alert(message);return "我是JS返回的Result";}function flutterCallJsMethodNoResult(message){alert(message);}
</script>
Flutter端调用代码如下:
///调用有返回值JS方法,并打印结果
_controller.runJavascriptReturningResult("flutterCallJsMethod('Flutter调用了JS')").then((value) {Fluttertoast.showToast(msg: value.toString());
});///调用无返回值JS方法
_controller.runJavascript("flutterCallJsMethodNoResult('Flutter调用了JS')");
evaluateJavascript:方法已经弃用。
2. JS调用Flutter方法
Flutter提供了简单的支持JS调用的方法和参数,也可以通过修改Plugin
实现自定义方法和参数。
2.1 默认方法
Flutter端代码如下
WebView(
...
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: {JavascriptChannel(name: "toast",onMessageReceived: (message) {String result = message.message;...}),
},
...
)
javascriptChannels
:表示JS可以调用Flutter的对象集合
name
:表示映射的对象名
onMessageReceived
:为JS传过来的参数
以上代码在Android
端的实现为
webView.addJavascriptInterface(new JsInterface(), "toast");
...
public class JsInterface {@JavascriptInterfacepublic void postMessage(String message) {...}
}
JavaScript调用代码如下
<script>function jsCallFlutter(){toast.postMessage("JS调用Flutter postMessage");}
</script>
name:toast
: 这个值是三端公共定义的。
postMessage
: 这个方法是Flutter Plugin内部默认定义好的一个方法。之所以叫这个名字是为了更好的兼容IOS
。
IOS WebKit
提供了一个默认的name:postMessage
,参考文档
The user content controller uses this parameter to define a JavaScript function for your message handler in all frames in the specified content world.
The name of this function is window.webkit.messageHandlers.<name>.postMessage(<messageBody>), where <name> corresponds to the value of this parameter.
For example, if you specify the string MyFunction, the user content controller defines the window.webkit.messageHandlers.MyFunction.postMessage() function in JavaScript.
2.2 自定义方法和参数
自定义方法名和参数,需要修改Plugin代码。
JS端代码如下
<script>function jsCallFlutter2(){jscomm.toLocalEvent("JS调用Flutter", "callNative");}
</script>
Flutter端代码如下
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: {...JavascriptChannel(name: "jscomm",onMessageReceived: (message) {dynamic result = json.decode(message.message);String event = result["event"];String data = result["data"];}),
},
以上代码在Android
端的实现为
webView.addJavascriptInterface(new JsInterface(), "jscomm");
...
public class JsInterface {@JavascriptInterfacepublic void toLocalEvent(String event,String data) {}
}
修改Flutter Plugin代码:JavaScriptChannel.java
//默认实现的方法
@JavascriptInterface
public void postMessage(final String message) {Runnable postMessageRunnable =new Runnable() {@Overridepublic void run() {HashMap<String, String> arguments = new HashMap<>();arguments.put("channel", javaScriptChannelName);arguments.put("message", message);methodChannel.invokeMethod("javascriptChannelMessage", arguments);}};if (platformThreadHandler.getLooper() == Looper.myLooper()) {postMessageRunnable.run();} else {platformThreadHandler.post(postMessageRunnable);}
}//新增加的方法
@JavascriptInterface
public void toLocalEvent(final String event, final String data) {Runnable postMessageRunnable =new Runnable() {@Overridepublic void run() {JSONObject jsonObject = new JSONObject();try {jsonObject.put("event", event);jsonObject.put("data", data);} catch (JSONException e) {}HashMap<String, String> arguments = new HashMap<>();arguments.put("channel", javaScriptChannelName);arguments.put("message", jsonObject.toString());methodChannel.invokeMethod("javascriptChannelMessage", arguments);}};if (platformThreadHandler.getLooper() == Looper.myLooper()) {postMessageRunnable.run();} else {platformThreadHandler.post(postMessageRunnable);}
}
注意:这个新增的
toLocalEvent
方法,修改的是本地缓存代码,不能提交到Git上,也就是说只有修改的那个人运行的代码有效!
以上就是这次分享的全部了,切记修改的Plugin
代码不会被提交,如果示例代码无法运行,仔细看文档。
index.html完整源码见GitHub
Flutter完整源码见GitHub
Flutter:加载本地Html、WebView与JS交互相关推荐
- Android使用webview控件加载本地html,通过Js与后台Java实现数据的传递
1.在布局文件中加WebView控件,在java中获取WebView对象. 2.加载本地html文件. webView.loadUrl("file:///android_asset/andr ...
- Flutter加载Html并实现与JS 的双向调用
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒 随时随记 每日积累 随心而过 [x2]各种系列的视频教程 ...
- flutter嵌入HTML5页面,Flutter加载Html并实现与JS 的双向调用
2019-07-20 16:01:01 早起的年轻人 阅读数 2025 收藏更多 可以用来加载 Html 页面,以实现 Android 中 WebView 或者 是 iOS 中的 UIWebView ...
- Flutter加载本地pdf文件
通过flutter预览本地的pdf文件,选了多个flutter插件后最终选择了pdfx, 首先看一下我的需求吧,左侧是所有的文件列表右侧是文件的内容,左侧比较简单我们读取指定的目录后将文件名显示出来, ...
- flutter加载本地html标签,Flutter中如何加载并预览本地的html文件的方法
直接进入主题,大概步骤如下 在 assets 创建需要访问 html 文件,如下 这里创建一个files文件夹,专门来放这些静态 html 文件. 在 pubspec.yaml 中配置访问位置 ass ...
- Flutter 加载本地图片的坑
直接取消注释发现报错 原因是 这个 assets 要和上面 user-material-design 进行对其
- flutter html 加载_Flutter 加载本地 HTML 文件
Flutter加载本地网页 1. 添加依赖到 pubspec.yaml: dependencies: webview_flutter: ^0.3.22+1 2. 将HTML文件放到assets中 3. ...
- js修改本地json文件_Flutter加载本地JSON文件教程建议收藏
今天农村老家的天气不是很好 而且外面还下雨了,每天只能坐在老家 打开电脑,看看文章,写写文章 今天我给大家带来一篇Flutter加载本地JSON文件教程 本头条核心宗旨 欢迎来到「技术刚刚好」作者,「 ...
- Flutter中举步维艰的WebView,终于实现了加载本地html
1.需求背景 实现一个不全屏的,支持加载本地html资源的webview 2.结论先行 选用了官方的webview_flutter.总结了下实践的过程,分析几个插件有如下特点: flutter_ina ...
最新文章
- javascript中select的常用操作
- navicat运行sql文件慢_SQL进阶之路——入门
- Nginx 的 Echo 模块 —— echo-nginx-module(转)
- sssp-springmvc+spring+spring-data-jpa问题总结
- 13个Python必备的知识,建议收藏
- AcWing 177. 噩梦(双向BFS)
- 一直在寻找:我亲爱的朋友。
- 非 Java、C、Python,我使用的第一门计算机语言是它!
- EPICS -- pyDevice
- Java通信之服务器生猛上手
- 薄膜收放卷张力控制问题
- Unity日历组件制作
- 局域网通信软件 飞鸽传书
- 一次Linux系统被攻击的分析过程
- 关于在word里的表格里面打公式出现换行问题
- 施一公:无论什么学科,研究生最不重要的素质就是智商
- Adobe Flash Player 版本太低无法安装
- TypeScript类
- Android图片素描效果
- 关于windows下安装wampserver服务器系统丢失msvcr100.dll及VCRUNTIME140.dll的解决办法
热门文章
- 常见的led驱动电源电路设计及特性分析
- 我们经常遇到网络不通的故障,列举出常见的故障原因,检查方法以及解决方案
- 在xsl中插入有大于、小于符号JavaScript,CSS代码的方法
- 新一代科学教育标准到底是什么?为什么开展 STEM 教育?
- caff2 与 pytorch 模型的转换--onnx
- asp.net错误解决:Unable to Validate Data in ASP.NET website
- 蓝宝石RX550 4G 640SP开核768SP
- EEG情感分析综述(三)
- linux按大小显示当前文件,linux下按文件大小排序
- 北大-算法基础 烘晾衣服POJ3104