Flutter Web 调用JS实现一些特定功能

本文主要介绍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文件:

我们用到的其他的js最好是放到main.dart.js上面

这个是百度地图的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调用的函数可以有多个参数。