使用过人气很高的flutter_webview_plugin,但是缺少2个重要的功能。也在打开多个WebView时会出错。
虽然该插件不够完整,但是使用起来很方便,封装了很多功能。如果交互不多可以用该插件。
之后使用官方的webview_flutter插件。
附:在老版本的 Flutter WebView有在Android中无法调弹出键盘的问题,在webview_flutter Version 0.3.10+2中已经修复该BUG,使用最新版的Flutter SDK (flutter _v1.7.8+hotfix.3-stable),见GitHub Issue:issues/19718
真的很好用。官方的Example也很到位哈。
使用实例:
// 定义方法
JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Toaster',
onMessageReceived: (JavascriptMessage message) {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text(message.message)),
);
});
}
// 暴露给WebView
WebView(
// ... 略
javascriptChannels: <JavascriptChannel>[
_toasterJavascriptChannel(context),
].toSet(),
)
// JS调用方法
Toaster.postMessage('弹弹乐');
WebViewController _webViewController;
WebView(
// ... 略
javascriptMode: JavascriptMode.unrestricted, // 使用JS没限制
onWebViewCreated: (WebViewController webViewController) {
// 在WebView创建完成后会产生一个 webViewController
_webViewController = webViewController;
},
)
// 之后可以调用 _webViewController 的 evaluateJavascript 属性来注入JS
_webViewController.evaluateJavascript("Toaster.postMessage('弹弹乐');");
WebView(
navigationDelegate: (NavigationRequest request) {
// 判断URL
if (request.url.startsWith('https://www.baidu.com')) {
// 做一些事情
// 阻止进入登录页面
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
);
Webview是我们前端开发从PC端演进到移动端的一个重要载体,现在大家每天使用的App,webview都发挥着它的重要性。接下来让我们从webview看世界。提到应用场景,大家最直观的能想到一些App内嵌的页面,为我们提供各种各样的交互
通常我们在自己开发的 APP 中打开网页无非两种方法: 一是跳转到系统自带的浏览器,二是使用 WebView 控件加载页面。使用 WebView 控件的好处就是可以通过各种 api 接口来定制各种行为
不聚焦问题;如果引入了fastclick,那么需要修改源码,如下;如果还有问题,尝试监听input的focus,然后延时聚焦;如果没有引入fastclick,网上找其他原因吧,还没遇到过
小程序开发中遇到的问题:小程序中嵌套了一个webview页面,webview页面中有静默授权,解决方案:通过history.pushState添加历史记录名目,history.onpopstate监听历史记录条目发生变化时,调用小程序APIwx.navigateBack
现在的App开发,或多或少都会用到Hybrid模式,到了WebView这边,经常会加载一些js文件(例如和WebView用来Native通信的bridge.js),而这些js文件不会经常发生变化,所以我们希望js在WebView里面加载一次之后
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!