正文
关于flutterwebviewjs的信息
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
Flutter WebView 和 JS交互
ios/Runner/Info.plist中添加
javascriptMode: JavascriptMode.unrestricted:允许和js交互
webview_flutter滑动存在卡顿问题的完美解决方法
1.webview_flutter
2.flutter_inappwebview
3.flutter_webview_plugin
笔者最近发现webview_flutter在Android端嵌套带有较长的Webview页面时偶欧会存在卡顿问题表现为加速向下滑动到页面底部,然后从底部慢慢像上滑就不起作用了,体验很不好,经过一天的排查和实验发现是webview_flutter插件自己的问题,用原生嵌套WebView并没有问题,后来改成flutter_webview_plugin问题可以解决,但是flutter_webview_plugin插件并不是基于flutter渲染的并不能在嵌套webview的页面自定义flutter样式层,后来发现使用flutter_inappwebview插件能够完美解决问题。推荐你们用flutter_inappwebview。
Flutter中webview添加图片的长按操作
开发过程工我们会用webview显示一些活动或是变动比较频繁的页面,若是webview中包含图片,一般会有保存图片的需求,我们可以采用js交互的形式获取图片的url,话不多说直接看操作
获取点击位置的element,中的src值,即可
补充问题
1、在安卓设备上发现长按手势并没有调用,翻看 webview_flutter 发现需要设置安卓的类型,展示webview之前设置
2、获取到的url也就是开始返回的value值,安卓会带有”“,需要自行去掉
九、Flutter之webview
Flutter的webview常用的第三方库有 flutter_webview_plugin 、 webview_flutter ,后者的文档较少,暂先学习flutter_webview_plugin。
添加依赖
导入包
iOS端info.plist配置,其中NSAppTransportSecurity节点是为了支持http协议
一个简单的demo
要监听链接跳转的话,实现onUrlChanged即可
添加依赖
导入包
iOS端info.plist配置
一个简单的demo
但是在webview里点击链接跳转的时候,测试机有时会跳转到系统浏览器上,并且点击文本框无法弹出键盘,交互性很弱。
二者共同的缺点是与javascript难以交互,目前只能实现Flutter-JS传递信息,还没找到可以进行完美交互的第三方库。并且一些常见的协议还不支持,比如拨号和调用摄像头等,期待后续完善。
flutter 与webview (vue)交互
flutter与webview交互
因为web端项目用的是vue框架 按照网上的教程flutter端调用js端方法不管用:
flutter端
web端
后来发现是vue的方法不会暴露给app使用 需要把方法名暴露给window
FlutterWeb 和 WebView 原生交互调用
需要创建两个工程,一个是FlutterWeb工程最终打包成Web页面,一个是Flutter原生工程承载一个WebView用来加载Web页面。这样做的好处在于只需要一种语言开发iOS和Android不用对接两次,可以直接使用社区Flutter原生工程的插件,只需要封装给Web调用。
FlutterWeb工程pubspec.yaml添加依赖
Flutter原生工程pubspec.yaml添加依赖
创建一个 toast_channel.dart,定义一个类实现 JavascriptChannel 重写name指定channel名称和onMessageReceived指定调用函数
在WebView的 javascriptChannels 配置上定义的Channel
创建一个 native_channel.dart ,定义一个外部函数通过 @JS("调用的channel和函数名") 注解指定调用的原生函数(JavascriptChannel固定名称为postMessage)
需要使用的地方直接调用
创建一个 js_function.dart,存放被原生调用的函数名称
将要提供给原生调用的函数,通过 js.context[原生调用名称] = 函数 开放给外部调用
如果在FlutterWeb工程要使用这个函数也可以使用@JS注解
WebView 创建时会回调 onWebViewCreated 获得 WebViewController ,WebViewController 调用 runJavascript 会执行JS函数无返回值,调用 runJavascriptReturningResult 会执行JS函数有返回值。
FutureBuilder获取WebViewController, 需要使用的地方直接调用
使用 HTML,CSS,Canvas 和 SVG 元素来渲染。
缺点:会存在不同平台效果不一样。
优点:不加载canvaskit默认使用系统字体,加载过程没有多余开销。
需要用到wasm,WebAssembly 要求需要浏览器支持,WebView Android需要最低需要57,Safari iOS 需要最低需要 11。
缺点:canvaskit 有7m大默认地址在国外首次加载耗时;中文会加载字体库默认地址在国外加载慢。
优点:性能更好,渲染效果一致。
--web-renderer=auto 默认移动端浏览器选择 HTML,桌面端浏览器选择 CanvasKit。
--web-renderer=html 使用 HTML 渲染器
--web-renderer=canvaskit 使用 CanvasKit 渲染器
综上所诉推荐移动端使用HTML渲染更合适,在编译和打包时指定渲染器 --web-renderer=html 。
--debug 模式构建的 Web 应用没有被压缩,且 Tree-shaking 没有执行。
--profile 模式构建的 Web 应用没有被压缩,但 Tree-shaking 执行了。
--release 模式构建的 Web 应用被压缩了,并且 Tree-shaking 执行了
运行命令
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --profile
打包命令
flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --release
flutterwebviewjs的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于、flutterwebviewjs的信息别忘了在本站进行查找喔。