Flutter integrates Umeng steps and a summary of some problems

Since the Flutter project uses the umeng statistics and one-click login function of the mobile phone number, but various pitfalls are encountered in the actual integration and use, and the documents and demos do not mention it. Therefore, writing this article, there are students who have encountered the same problem. You can refer to it.

Before integrating, it is best to check the documentation: https://developer.umeng.com/docs/143070/detail/425282

Integration steps:

1. Download the Smart Authentication SDK: https://devs.umeng.com/

2. Unzip the downloaded sdk and delete the example in it:

insert image description here

Then put the whole project into the root directory of your own Flutter project (the document is just the opposite, it is to put the flutter project in the root directory of the sdk, which is very bad, so it is recommended to put the sdk into the root directory of the Flutter project, similar to Android The project introduces a Module)

insert image description here

Finally, modify the gradle version under android in flutter_verify to your own gradle version:

insert image description here

Similarly, modify com.android.tools.build:gradle in build.gradle to your own version, as well as the remote repository:

insert image description here

3. Add in pubspec.yaml:

  #umeng
  umeng_common_sdk: 1.2.4
  umeng_verify_sdk:
    path: ../自己的项目根目录/flutter_verify

Then pub get and download the sdk.

4. The Android side needs to be pre-initialized in the Application:

If there is no Application in your android directory, you need to create one yourself, and then pre-initialize in onCreate:

com.umeng.commonsdk.UMConfigure.preInit(this, "appkey", "channel");

preInit will not collect any private information. The real initialization is in Flutter. After the user agrees to your own service agreement and privacy policy, start calling.

Note that if preInit is not called, the function test of umeng will not be available!

5. Initialize in Flutter:

  initUmeng() {
    
    
    UmengCommonSdk.setPageCollectionModeManual();
    UmengCommonSdk.initCommon(umengAppKey, umengAppKey, 'channel');
    UmengVerifySdk.register_android();//安卓平台必须调用
    UmengVerifySdk.setVerifySDKInfo(umengVerifySecret, umengVerifySecret);
  }

setVerifySDKInfo can use then to print whether the call is successful, if it returns true, it means success!

6. One-click login:

umeng provides two ways, one is a pop-up box, the other is to enter a new ui page, I use the second one myself, and encapsulate a method (since only the Android platform is considered at present, the following methods belong to Android , ios can refer to the demo):

    UMCustomModel uiConfig = UMCustomModel();
    uiConfig.isAutorotate = false;
    uiConfig.navIsHidden = true;
    uiConfig.prefersStatusBarHidden = false;
    uiConfig.backgroundImage = "page_background_color";
    uiConfig.logoIsHidden = true;
    uiConfig.sloganIsHidden = true;
    uiConfig.numberColor = Colors.black.value;
    uiConfig.numberFont = 20;
    uiConfig.numberFrame = [10, 200, -1, -1];
    uiConfig.loginBtnText = ["手机号一键登录", Colors.white.value, 20];
    uiConfig.loginBtnBgImg_android = "login_btn_bg";
    uiConfig.autoHideLoginLoading = false;
    uiConfig.loginBtnFrame = [10, -1, -1, -1, -1];
    uiConfig.checkBoxImages = ["unchecked", "checked"];
    uiConfig.checkBoxIsChecked = false;
    uiConfig.checkBoxIsHidden = false;
    uiConfig.checkBoxWH = 15;
    uiConfig.privacyOne = ["《服务协议》", agreementUrl];
    uiConfig.privacyTwo = ["《隐私政策》", privacyUrl];
    uiConfig.privacyConectTexts = ["& ", "、"];
    uiConfig.privacyColors = [Colors.red.value, Colors.blue.value];
    uiConfig.privacyAlignment = UMTextAlignment.Center;
    uiConfig.privacyPreText = "";
    uiConfig.privacySufText = "";
    uiConfig.privacyOperatorPreText = "《";
    uiConfig.privacyOperatorSufText = "》";
    uiConfig.privacyOperatorIndex = 1;
    uiConfig.privacyFont = 12;
    uiConfig.privacyFrame = [10, -1, 10, -1];
    uiConfig.changeBtnTitle = ["账号密码登录", Colors.blue.value, 14];
    uiConfig.changeBtnIsHidden = false;
    uiConfig.changeBtnFrame = [-1, 320, -1, -1];
    uiConfig.protocolAction_android = "com.aliqin.mytel.protocolWeb";
    uiConfig.privacyNavColor = Colors.red.value;
    uiConfig.privacyNavTitleFont = 16;
    uiConfig.privacyNavTitleColor = Colors.blue.value;
    uiConfig.privacyNavBackImage = "icon_back";

    UMCustomWidget customButton = UMCustomWidget("button1", UMCustomWidgetType.button);
    customButton.title = "";
    customButton.left = 0;
    customButton.top = 0;
    customButton.width = 0;
    customButton.height = 0;
    customButton.backgroundColor = Colors.red.value;
    customButton.titleColor = Colors.black.value;
    customButton.isClickEnable = false;
    customButton.btnBackgroundResource_android = "btn_selector";
    customButton.rootViewId = UMRootViewId.body;

    UMCustomWidget customTextView = UMCustomWidget("textView", UMCustomWidgetType.textView);
    customTextView.left = 0;
    customTextView.top = 0;
    customTextView.width = 0;
    customTextView.height = 0;
    customTextView.title = "";
    customTextView.rootViewId = UMRootViewId.number;
    uiConfig.customWidget = [customButton.toJsonMap(), customTextView.toJsonMap()];

    UmengVerifySdk.getLoginTokenWithTimeout(3, uiConfig);

Renderings:

insert image description here

The UmengVerifySdk.checkEnvAvailable() method can detect whether one-click login is currently supported!

The click event of the protocol can be monitored by setting a callback:

    UmengVerifySdk.setUIClickCallback_android((result) {
    
    
      showLog("setUIClickCallback_android: ${jsonDecode(result["jsonString"])["url"]}");
    });

It should be noted that you cannot directly jump to the flutter web page here, because the one-click login page of umeng is at the top level of the entire application and will cover your flutter page, which can only be written to jump to the native WebActivity.

The click event of the one-click login button:

    UmengVerifySdk.setTokenResultCallback_android((result) {
    
    
      showLog("setTokenResultCallback_android: $result");
      if (result["code"] == "600000") {
    
    
        UmengVerifySdk.quitLoginPage_android();
        if (result["token"] != null) {
    
    
          oneKeyLogin(result["token"]);
        }
      }
    });

Summary of some problems of Android integration:

1. Can't get VerifyId?

When the document was integrated for the first time, the umeng_common_sdk version was 1.2.3, but I couldn’t get it. Finally, it was upgraded to 1.2.4, so it’s not clear whether this problem is a version problem or something else? If you can't get it, you can try to clear the cache, uninstall and reinstall the app, upgrade the version, etc.

2. When the official package is opened, an error is reported: "Theme.AppCompat.Light.NoActionBar not found"

This problem should be that the sdk uses the theme of appcompat, but the document does not mention anything, it is simply a pit.

As a solution, add dependencies to build.gradle under flutter_verify:

 api 'androidx.appcompat:appcompat:1.4.1'

3. After installing the official package, an error is reported: "SDK initialization failed, please check whether the umeng-asms-1.2x.aar library is integrated"

\Because Flutter opens the official package by default, the reason is that flutter confuses umeng's sdk, so create a proguard-rules.pro file under flutter_verify, and configure it in build.gradle:

-keep class com.umeng.** {*;}

insert image description here

This issue is not mentioned in the official documentation...

Summary of several issues of IOS integration:

to be continued…

Guess you like

Origin blog.csdn.net/baiyuliang2013/article/details/131256717