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语言):
baseweb_webview.addJavascriptInterface(object:IWebObtain{ @JavascriptInterface override fun getProperty(key:String): String { when (key) { "账号信息" -> { return "我来自Andorid账号信息" } else -> { return "我来自Andorid" } } } }, "obtain")