Flutter Web 与JS 交互, 已经Flutter web与原生交互
1.本文主要涉及两个知识点:1. JS 与Flutter 交互 2.Flutter Web 项目与原生交互(通过flutter 的dart.js 调用 js 然后由js进行调用原生,至于js与原生交互请自行百度)
说明:Flutter 调用JS 需要 import dart.js 作为支持,如果项目中一旦导入 dart.js 项目则无法运行打包App 了
提示:flutter 的 callMethod只能支持参数是string 或者number类型的
flutter 代码如下:
import 'package:flutter/material.dart'; import 'dart:js' as js; /** * 参考 * https://www.it610.com/article/1280448506485555200.htm * 官方给开发者提供了js与dart交互的api: * https://api.flutter.dev/flutter/dart-js/dart-js-library.html */ class JSHomePage extends StatefulWidget { JSHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<JSHomePage> { /** * 调用js */ void _callJS() { js.context.callMethod("alert"); } /** * 调用js */ void _jsCallFlutter() { // 等于js调用:flutter.flutterMoth(); js.context .callMethod("flutterMethod",[""]); } /** * 调用js并且传递参数 */ void _callJSAndParameter() { //等于js调用: alert("我是来自dart的方法"); js.context.callMethod("alert",["我是来自dart的方法"]); } /** * 调用js传参数返回数据 */ void _callJSAndParameterAndReturn() { //等于js调用:var a = Math.pow(3,4); var callMethod = js.context["Math"].callMethod("pow",[3,4]); js.context.callMethod("alert",[callMethod.toString()]); print("普通调用"+callMethod.toString()); } /*这里需要webView注册 *JavascriptInterface 名为Obtain,并提供getA方法 * 详细使用请百度android与js交互 */ void getNativeProperty(){ //等于js调用:Obtain。getA() var text= js.context["obtain"].callMethod("getProperty" ,["账号信息"] ); js.context.callMethod("alert",[text.toString()]); } /** * 调用日志,这里其实不必用这个了,因为fltter print,就等价于这个 */ void jsConsoleLog(){ //等于调用js: console.log("我是dart 打印的js日志") js.context['console'] .callMethod("log",["我是dart 打印的js日志"] ); } /** * flutter方法用于让js调用 */ void flutterMethod( ){ js.context.callMethod("alert",["我来自flutter"]); print("高级调用js调用flutter"); } @override Widget build(BuildContext context) { js.context["flutterMethod"]=flutterMethod; return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton(child: Text( '呼叫js', ),onPressed: _callJS,) , RaisedButton(child: Text( '呼叫js并传参数', ),onPressed: _callJSAndParameter) , RaisedButton(child: Text( '呼叫js传参数并返回数据', ),onPressed: _callJSAndParameterAndReturn) , RaisedButton(child: Text( 'js打印日志', ),onPressed: jsConsoleLog) , RaisedButton(child: Text( 'js 呼叫Flutter', ),onPressed: _jsCallFlutter) , RaisedButton(child: Text( '获取原生数据(需要客户端支持)', ),onPressed: getNativeProperty) ], ), ), ); } }
andoid 原生需要支持的代码如下 (以下代码是kotlin语言):
1 2 3 4 5 6 7 8 9 10 11 12 13 | baseweb_webview.addJavascriptInterface(object:IWebObtain{ @JavascriptInterface override fun getProperty(key:String): String { when (key) { "账号信息" -> { return "我来自Andorid账号信息" } else -> { return "我来自Andorid" } } } }, "obtain" ) |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
· 用 C# 插值字符串处理器写一个 sscanf
2017-08-14 网络工具,通过该类可以直接监听网络状态改变
2017-08-14 MyRecycleView带有上拉加载更多
2017-08-14 Activity管理类
2017-08-14 点击2次退出