189 8069 5689

flutter注入js,Flutter入门

flutter 与webview (vue)交互

flutter与webview交互

创新互联是一家集网站建设,绛县企业网站建设,绛县品牌网站建设,网站定制,绛县网站建设报价,网络营销,网络优化,绛县网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

因为web端项目用的是vue框架 按照网上的教程flutter端调用js端方法不管用:

flutter端

web端

后来发现是vue的方法不会暴露给app使用 需要把方法名暴露给window

学js还是直接flutter

js先学在学Flutter

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

Flutter组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用组件(widget)构建你的UI。组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变,组件会重构它的描述(description),Flutter会对比之前的描述,以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

九、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传递信息,还没找到可以进行完美交互的第三方库。并且一些常见的协议还不支持,比如拨号和调用摄像头等,期待后续完善。

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

使用Flutter + V8/JsCore开发小程序引擎(一)

众所周知,小程序是由HTML标签来开发原生组件,那么首先需要将HTML做解析,这里我们将HTML通过node脚本解析成JSON字符串,再用Dart来解析JSON,映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果,后续再详细介绍。

为了高效解析,直接用flutter的组件名在HTML文件上开发

直接使用flutter的组件

模仿微信小程序的Api,cc对应是微信小程序的wx

以上HTML中的例子

《使用Flutter + V8/JsCore开发小程序引擎(二)》

《使用Flutter + V8/JsCore开发小程序引擎(三)》

【Flutter】利用Future封装出js中的Promise

前端的同学对 Promise 肯定都很熟悉,而 Future 便是 dart 中 Promise ,但方法名称和使用方式还是有些许的差异的。

下面我们尝试,利用 Future 封装出js中我们熟悉的 Promise 。

使用示例

Promise.all , Promise.race , Promise.resolve , Promise.reject

Promise.allSettled 方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果,不管是 fulfilled 还是 rejected ,包装实例才会结束。该方法由 ES2020 引入

Promise.any() 方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只要参数实例有一个变成 fulfilled 状态,包装实例就会变成 fulfilled 状态;如果所有参数实例都变成 rejected 状态,包装实例就会变成 rejected 状态。该方法目前是一个第三阶段的 提案 。

Promise.any() 跟 Promise.race() 方法很像,只有一点不同,就是不会因为某个 Promise 变成 rejected 状态而结束。

顺便把 延迟函数 也封装一下,毕竟毫秒延迟的使用频率是最高的。


本文名称:flutter注入js,Flutter入门
本文网址:http://cdxtjz.cn/article/phehhp.html

其他资讯