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文件:

  <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調用的函數可以有多個參數。