Flutter 第三方SDK集成(友盟统计，极光推送，百度地图)

2022-06-29 15:45:08 浏览数 (1)

友盟统计

Flutter SDK集成
  • 首先创建一个项目，接着去友盟工作台添加应用。添加成功后会得到AppKey。
集成友盟 Flutter SDK
  • 下载Demo,Demo地址：https://developer.umeng.com/api/sdk/customDownload?platform=flutter&location=internal&packages=["flutteranalytics"]&components=["flutteranalyticsname"]
  • 将Demo中的flutter文件夹(注意：是flutter不是Flutter)复制到自己Flutter项目的根目录中，重命名为umeng_sdk。删除umeng_sdk中的example文件夹。
  • 在自己Flutter项目的pubspec.yaml中引入插件 Pub get。
代码语言：javascript复制
umeng_sdk:
 path: ./umeng_sdk/
  • 修改umeng_sdk文件夹下iOS目录下的umeng_sdandroidk.podspec文件。
代码语言：javascript复制
  //对应版本号去umeng_sdk/android/libs目录下对应版本
  s.dependency 'UMCCommon' ,  '2.1.8'
  s.dependency 'UMCAnalytics', '8.1.4'
  • 在你自己Flutter项目的main.dart示例代码中，在_incrementCounter加入以下代码
代码语言：javascript复制
  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter  ;
    });
//    UmengSdk.onEvent('myevent', {'name':'jack', 'age':18, 'male':true});
    // 取消用户账号
    UmengSdk.onProfileSignOff();
    // 如果需要使用页面统计，则先打开该设置
    UmengSdk.setPageCollectionModeManual();
    // 进入页面统计
    UmengSdk.onPageStart("MyApp");
    // 离开页面统计
    UmengSdk.onPageEnd("MyApp");
    // 错误发送
    UmengSdk.reportError("后台程序执行时间过长");
  }
  • 在自己项目的ios/AppDelegate.m中加入iOS的初始化代码
代码语言：javascript复制
#import "GeneratedPluginRegistrant.h"
#import <UMCommonLog/UMCommonLogHeaders.h>
#import <UMCommon/UMConfigure.h>
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [UMCommonLogManager setUpUMCommonLogManager];
    [UMConfigure setLogEnabled:YES];
    [UMConfigure initWithAppkey:@"5861e5daf5ade41326001eab" channel:@"App Store"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
Android 配置
  • 在AndroidManifest.xml设置权限、添加MainApplication/MyActivity、设置Appkey和Channel。
代码语言：javascript复制
public class MainApplication extends FlutterApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        //App Key会在新建应用成功时产生，App Channel自己命名
        UMConfigure.init(this, "Your App Key", "Your App Channel", UMConfigure.DEVICE_TYPE_PHONE, null);
        UMConfigure.setLogEnabled(true);
    }
}

Channel命名规则。

1.可以由英文字母、阿拉伯数字、下划线、中划线、空格、括号组成，可以含汉字以及其他明文字符，但是不建议使用中文命名，会出现乱码。

2.首尾字符不可以为空格。

3.不要使用纯数字作为渠道ID。

4.最多256个字符。

5.”unknown” 及其各种大小写形式，作为友盟保留的字段，不可以作为渠道名。

代码语言：javascript复制
<manifest>
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
  <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
      <!--修改为新建的Application-->
    <application android:name=".MainApplication" ...>
  </application>
  ...
</manifest>

MainActivity

代码语言：javascript复制
public class MainActivity extends FlutterActivity {
    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        com.example.umeng_sdk.UmengSdkPlugin.setContext(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        MobclickAgent.onPause(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        MobclickAgent.onResume(this);
    }
}
  • 关闭混淆：参考：https://developer.umeng.com/docs/119267/detail/121466
iOS 配置
  • 无需操作，如需手动集成请查看https://developer.umeng.com/docs/119267/detail/119508
  • 最后，运行项目友盟工作台就可以看到有一个用户了。
  • Demo地址：https://developer.umeng.com/sdk/flutter?refer=UApp#

极光推送

Flutter SDK集成
  • 首先去友盟工作台添加一个应用。添加成功后会得到AppKey。接着去设置推送设置，将新建项目的包名填入。
  • 在自己项目的pubspec.yaml 文件中加入以下代码 Pub get。
代码语言：javascript复制
jpush_flutter: 0.5.5
Android 配置
  • 在 /android/app/build.gradle 文件中添加下列代码。
代码语言：javascript复制
android: {
  ....
  defaultConfig {
    applicationId "替换成自己应用 ID"
    ...
    ndk {
	//选择要添加的对应 cpu 类型的 .so 库。
	abiFilters 'armeabi', 'armeabi-v7a', 'x86', 'x86_64', 'mips', 'mips64', 'arm64-v8a',        
    }

    manifestPlaceholders = [
        JPUSH_PKGNAME : applicationId,
        JPUSH_APPKEY : "appkey", // NOTE: JPush 上注册的包名对应的 Appkey.
        JPUSH_CHANNEL : "developer-default", //暂时填写默认值即可.
    ]
  }    
}
iOS配置
  • 在 xcode8 之后需要点开推送选项： TARGETS -> Capabilities -> Push Notification 设为 on 状态。
  • 在main.dart中添加如下代码。
代码语言：javascript复制
 String debugLable = 'Unknown';
  final JPush jpush = new JPush();
  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String platformVersion;

    try {
      jpush.addEventHandler(
          onReceiveNotification: (Map<String, dynamic> message) async {
            setState(() {
              debugLable = "flutter onReceiveNotification: $message";
            });
          }, onOpenNotification: (Map<String, dynamic> message) async {
        setState(() {
          debugLable = "flutter onOpenNotification: $message";
        });
      }, onReceiveMessage: (Map<String, dynamic> message) async {
        setState(() {
          debugLable = "flutter onReceiveMessage: $message";
        });
      }, onReceiveNotificationAuthorization:
          (Map<String, dynamic> message) async {
        setState(() {
          debugLable = "flutter onReceiveNotificationAuthorization: $message";
        });
      });
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    jpush.setup(
      appKey: "your AppKey", //你自己应用的 AppKey
      channel: "theChannel",
      production: false,
      debug: true,
    );
    jpush.applyPushAuthority(
        new NotificationSettingsIOS(sound: true, alert: true, badge: true));

    // Platform messages may fail, so we use a try/catch PlatformException.
    jpush.getRegistrationID().then((rid) {
      setState(() {
        debugLable = "flutter getRegistrationID: $rid";
      });
    });

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      debugLable = platformVersion;
    });
  }
  • 最后在极光推送后台消息推送模块发送通知或自定义消息，打开手机通知栏可查看到。在推送后台也可查看推送历史，是否成功。
  • Demo地址：https://github.com/jpush/jpush-flutter-plugin

百度地图

  • 首先创建一个项目，接着去百度地图开发平台创建一个应用。
  • 指定应用类型为Android SDK时开发版SHA1和发布版SHA1获取

开发版SHA1获取

  • 用Android Studio打开项目Android目录，点击右上角侧边栏gradle，进入到android/app/android，双击signingReport，就会得到开发版SHA1。

发布版SHA1获取

  • 操作方法参考：http://lbsyun.baidu.com/index.php?title=FAQ/SHA1

指定应用类型为iOS SDK时安全码获取(Bundle Identifier)

安全码获取

  • 参考http://lbsyun.baidu.com/index.php?title=iossdk/guide/create-project/ak
设置Android和iOS端API_Key
  • 在Android目录清单文件的application节点中设置Android端AK，添加如下代码
代码语言：javascript复制
<meta-data
    android:name="com.baidu.lbsapi.API_KEY"
    android:value="开发者申请的AK" />
  • 在dart文件中，通过对外接口setApiKey设置iOS端AK，可参考百度定位Flutter插件Demo。代码如下。
代码语言：javascript复制
@override
void initState() {
  super.initState();

  _locationPlugin.requestPermission();
  //动态申请定位权限

  LocationFlutterPlugin.setApiKey("开发者申请的AK");
  //设置iOS端AK, Android端AK可以直接在清单文件中配置
}
定位
Flutter SDK 集成
  • 在自己项目的pubspec.yaml文件添加如下代码。Pub get。
代码语言：javascript复制
flutter_bmflocation: ^1.0.2
  • 对于iOS端需要手动部署百度iOS定位SDK，步骤参考：http://lbsyun.baidu.com/index.php?title=ios-locsdk/guide/create-project/manual-create
  • 在main.dart中添加如下代码。
代码语言：javascript复制
Map<String, Object> _loationResult;
  BaiduLocation _baiduLocation; // 定位结果

  StreamSubscription<Map<String, Object>> _locationListener;

  LocationFlutterPlugin _locationPlugin = new LocationFlutterPlugin();

  @override
  void initState() {
    super.initState();

    /// 动态申请定位权限
    _locationPlugin.requestPermission();

    /// 设置ios端ak, android端ak可以直接在清单文件中配置
    LocationFlutterPlugin.setApiKey("百度地图开放平台申请的ios端ak");

    _locationListener = _locationPlugin
        .onResultCallback()
        .listen((Map<String, Object> result) {
      setState(() {
        _loationResult = result;
        try {
          _baiduLocation = BaiduLocation.fromMap(result); // 将原生端返回的定位结果信息存储在定位结果类中
        } catch (e) {
          print(e);
        }
      });
    });

  }

  @override
  void dispose() {
    super.dispose();
    if (null != _locationListener) {
      _locationListener.cancel(); // 停止定位
    }
  }
代码语言：javascript复制
/// 启动定位
  void _startLocation() {
    if (null != _locationPlugin) {
      _setLocOption();
      _locationPlugin.startLocation();
    }
  }

  /// 停止定位
  void _stopLocation() {
    if (null != _locationPlugin) {
      _locationPlugin.stopLocation();
    }
  }
  /// 设置android端和ios端定位参数
  void _setLocOption() {
    /// android 端设置定位参数
    BaiduLocationAndroidOption androidOption = new BaiduLocationAndroidOption();
    androidOption.setCoorType("bd09ll"); // 设置返回的位置坐标系类型
    androidOption.setIsNeedAltitude(true); // 设置是否需要返回海拔高度信息
    androidOption.setIsNeedAddres(true); // 设置是否需要返回地址信息
    androidOption.setIsNeedLocationPoiList(true); // 设置是否需要返回周边poi信息
    androidOption.setIsNeedNewVersionRgc(true); // 设置是否需要返回最新版本rgc信息
    androidOption.setIsNeedLocationDescribe(true); // 设置是否需要返回位置描述
    androidOption.setOpenGps(true); // 设置是否需要使用gps
    androidOption.setLocationMode(LocationMode.Hight_Accuracy); // 设置定位模式
    androidOption.setScanspan(1000); // 设置发起定位请求时间间隔

    Map androidMap = androidOption.getMap();

    /// ios 端设置定位参数
    BaiduLocationIOSOption iosOption = new BaiduLocationIOSOption();
    iosOption.setIsNeedNewVersionRgc(true); // 设置是否需要返回最新版本rgc信息
    iosOption.setBMKLocationCoordinateType("BMKLocationCoordinateTypeBMK09LL"); // 设置返回的位置坐标系类型
    iosOption.setActivityType("CLActivityTypeAutomotiveNavigation"); // 设置应用位置类型
    iosOption.setLocationTimeout(10); // 设置位置获取超时时间
    iosOption.setDesiredAccuracy("kCLLocationAccuracyBest");  // 设置预期精度参数
    iosOption.setReGeocodeTimeout(10); // 设置获取地址信息超时时间
    iosOption.setDistanceFilter(100); // 设置定位最小更新距离
    iosOption.setAllowsBackgroundLocationUpdates(true); // 是否允许后台定位
    iosOption.setPauseLocUpdateAutomatically(true); //  定位是否会被系统自动暂停

    Map iosMap = iosOption.getMap();

    _locationPlugin.prepareLoc(androidMap, iosMap);
  }
地图
Flutter SDK集成
  • 在自己项目的pubspec.yaml文件添加如下代码。Pub get。
代码语言：javascript复制
  # 百度地图
  flutter_bmfmap:  ^1.0.2
  # 计算工具
  flutter_bmfutils: ^1.0.2
Android配置
  • 在Android环境下初始化地图SDK，新建一个自定义的Application，在AndroidManifest.xml文件中声明该Application，代码如下。
代码语言：javascript复制
public class MyApplication extends BmfMapApplication{
    @Override
    public void onCreate() {
        super.onCreate();
    }
}
  • Android端在app的build.gradle中android内添加如下代码。
代码语言：javascript复制
 sourceSets {
        main {
            jniLibs.srcDirs 'jnilibs'
        }
    }

    packagingOptions{
        pickFirst 'lib/armeabi-v7a/libapp.so'
        pickFirst 'lib/armeabi/libapp.so'
        pickFirst 'lib/arm64-v8a/libapp.so'
        pickFirst 'lib/x86/libapp.so'
    }
  • 在main.dart中添加如下代码。
代码语言：javascript复制
///BMFMapOptions构造，BMFMapOptions包含了创建地图所需要的各种状态参数
///经纬度需要自己通过定位获取，参考定位集成。默认为(39.917215, 116.380341);
BMFMapOptions mapOptions = BMFMapOptions(
        center: BMFCoordinate(39.917215, 116.380341),
        zoomLevel: 12,
        mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0));
代码语言：javascript复制
///地图Flutter Widget构造，BMFMapWidget是地图Flutter插件封装的一个支持AndroidView和UiKitView的Widget。
Container(
      height: screenSize.height,
      width: screenSize.width,
      child: BMFMapWidget(
        onBMFMapCreated: (controller) {
          onBMFMapCreated(controller);
        },
        mapOptions: mapOptions,
      ),
    );
  • 定位Demo地址：https://mapopen-website-wiki.bj.bcebos.com/flutter/bdmap_loc_flutter_plugin_demo.zip
  • 地图Demo地址：https://mapopen-website-wiki.bj.bcebos.com/flutter/baidumap_flutter_demo.zip
ide sdk flutter ios android

0 人点赞