本文主要介绍flutterweb如何调用js完成一些特定的功能,比如定位、三方支付等。本文使用定位来介绍。
官方给开发者提供了js与dart交互的api:
https://api.flutter.dev/flutter/dart-js/dart-js-library.html
在使用时引入:
import 'dart:js' as js;
首先 flutter端:
1.在web文件夹下创建js文件:
location.js实现如下:
function getLocation () {
// 百度地图API功能
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var geoc = new BMap.Geocoder();
geoc.getLocation(r.point, function(rs){
var addComp = rs.addressComponents;
locationSuccess(r.point.lng,r.point.lat,addComp.province , addComp.city , addComp.district ,addComp.street ,addComp.streetNumber);
});
}
else {
return null;
}
},{enableHighAccuracy: true})
}
其中locationSuccess是flutter端的一个函数。
在index.html中引入我们的js文件:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EwfacWSKrCMCUiX1O40wMZc3cYHhItsX"></script>
<script src="js/location.js" type="application/javascript"></script>
<script src="main.dart.js" type="application/javascript"></script>
我们用到的其他的js最好是放到main.dart.js上面
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EwfacWSKrCMCUiX1O40wMZc3cYHhItsX"></script>
这个是百度地图的js依赖。
2.flutter跟js的交互:
//将dart方法传给js,通过js调用locationSuccess来实现js与dart的通信
js.context["locationSuccess"]=locationSuccess;
//调用js的函数来执行想要的操作
js.context.callMethod("getLocation");
这里 callMethod在dart:js中定义如下:
/// Calls [method] on the JavaScript object with the arguments [args] and
/// returns the result.
///
/// The type of [method] must be either [String] or [num].
external dynamic callMethod(method, [List args]);
通过注释可以看到callMethod可以传两个参数,一个是js 的函数名称,一个是参数,参数的类型只能是String或者num。
callMethod 是可以用一个参数来接收返回值,使用场景是,js的函数有返回值。例如:
function check () {
return "now wifi";
}
在flutter里可以使用如下代码来接收js的返回值:
var result=js.context.callMethod("getLocation");
println(result);
dart中回调函数定义如下:
void locationSuccess(lng,lat,province , city , district ,street ,streetNumber){
println(lng.toString()+","+lat.toString()+","+city.toString()+","+district.toString()+","+street.toString()+streetNumber);
}
dart提供给js调用的函数可以有多个参数。