fluwx_logo.png

preface

If you know Fluwx before, you may have read an article about Fluwx, but at that time Fluwx was still not mature. Now the main function of Fluwx has been completed. If you are or want to develop a Flutter project but are unable to share or log in using wechat, Fluwx may be just what you are looking for. Although Fluwx is designed to reduce the workload, I strongly recommend reading the official wechat SDK documentation before using Fluwx. This will help you understand some concepts and debug problems.

The current function

  • Text sharing.
  • Website sharing.
  • Photo sharing.
  • Music sharing.
  • Video sharing.
  • Applets share.
  • Send Auth authentication.

Technical parameters

The Android part uses Kotlin-1.2.60. Here are the technologies involved in the Android section:

API 'com. Tencent. Mm. Opensdk: wechat - SDK - android - with - the mta: 5.1.4 ensuring' implementation 'org. Jetbrains. Kotlinx: kotlinx coroutines -- core: 0.24.0' implementation 'org. Jetbrains. Kotlinx: kotlinx coroutines - android: 0.24.0' implementation 'top. Zibin: Luban: 1.1.8' implementation 'com. Squareup. Okhttp3: okhttp: 3.11.0'Copy the code

Luban is used for image compression. Technologies covered in the iOS section:

Spyware doctor ependency 'WechatOpenSDK', '~ > 1.8.2'Copy the code

Flutter Version Information

Flutter 0.7.5 • channel dev • github.com/flutter/flu… Engine • DC7B5EB89D Tools • Dart 2.1.0 – dev. 3.0 a9690c2 flutter – 760

The introduction of

Add the following code to the pubspec.yaml file:

Dependencies: fluwx: ^ 0.1.3Copy the code

Don’t forget the flutter Packages get after adding.

Initialize the

Before using Fluwx, perform the following initialization operations:

Fluwx.registerApp(RegisterModel(appId: "your app id", doOnAndroid: true, doOnIOS: true));
Copy the code
  • appId: appId applied on wechat platform.
  • doOnAndroid: Indicates whether to perform this operation on the Android platform.
  • doOnIOS: Indicates whether to perform this operation on the platform. </br>

    Each field is optional, but if not passedappIdordoOnAndroid: falseordoOnIOS: false, please register manuallyWXApiIn order to make sureFluwxWorking normally.

    After registration, please useFluwxAdd the following code to the corresponding platform before:

    On Android:
FluwxShareHandler.setWXApi(wxapi)
Copy the code

IOS:

isWeChatRegistered = YES;
Copy the code

Note: Although wechat registration can be completed through Fluwx, some operations still need to be set on the corresponding platform, such as configuring URLSchema on iOS and WXEntryActivity on Android, otherwise Fluwx cannot work properly.

How to Initiate sharing

Unfortunately, Fluwx does not support all types of sharing. Currently, only text, pictures, website music, video and small programs can be shared. Additional sharing will be supported in future releases.

Note: At present, only PNG and JPG are supported when sharing pictures, and network pictures and assets pictures are supported. To use assets images, add assets://. You can also add? Package =package_name to read the picture of the specified package. file:// may be supported in the future. Currently, file:// images don’t do anything. If no schema is specified or the schema is incorrect, the network image will be processed with caution. Due to the limitation of wechat, the general thumbnail is less than 32K (thumbnail of small program is less than 120K), so it is necessary to use a qualified thumbnail when using thumbnails, otherwise Fluwx compression, the results may not be what you expect.

Share the place

Most of the sharing can be shared to the session, circle of friends, favorites (small program can only share to the session). Default share to session:

//[wechatScene. SESSION] //[wechatScene. TIMELINE] friends ///[wechatScene. FAVORITE] Favorites enum WeChatScene {SESSION, TIMELINE, FAVORITE }Copy the code

Share the text

Fluwx. share(WeChatShareTextModel(text: "text from Fluwx ", transaction: "transaction}",// only valid on Android, same below. scene: scene ));Copy the code

Share photos

 fluwx.share(WeChatShareImageModel(
        image: _imagePath,
        thumbnail: _thumbnail,
        transaction: _imagePath,
        scene: scene,
        description: "image"));
Copy the code

Note: If you do not specify thumbnail, Fluwx will try to get the thumbnail from the image.

Share the music

  var model = WeChatShareMusicModel(
      title: _title,
      description: _description,
      transaction: "music",
      musicUrl: _musicUrl,
      musicLowBandUrl: _musicLowBandUrl
    );

    fluwx.share(model);
Copy the code

There are two kinds of music sharing: musicUrl and musicLowBandUrl. The two forms do not coexist, and if both are assigned, only musicUrl will be read.

Share video

   var model = new WeChatShareVideoModel(
     videoUrl: _videoUrl,
     transaction: "video",
     videoLowBandUrl: _videoLowBandUrl,
     thumbnail: _thumnail,
     description: _description,
     title: _title
   );
   fluwx.share(model);
Copy the code

There are two kinds of video sharing: videoUrl and videoLowBandUrl. The two forms do not coexist, and if both are assigned, only videoUrl will be read.

Share applets

 var model =new WeChatShareMiniProgramModel(
      webPageUrl: _webPageUrl,
      miniProgramType: WeChatShareMiniProgramModel.MINI_PROGRAM_TYPE_RELEASE,
      userName: _userName,
      title: _title,
      description: _description,
      thumbnail: _thumbnail
    );
    fluwx.share(model);
Copy the code

MiniProgramType supports only three types:

  • MINI_PROGRAM_TYPE_RELEASE
  • MINI_PROGRAM_TYPE_TEST
  • MINI_PROGRAM_TYPE_PREVIEW

Send Auth authentication

For wechat login, Fluwx only realizes the first step, that is, obtaining code. To obtain access_token, please complete it on the server side.

   fluwx.sendAuth(WeChatSendAuthModel(
      scope: "snsapi_userinfo",
      state:"wechat_sdk_demo_test",
    ));
Copy the code

Initiate payment

Please refer to the official documentation for the meaning of each parameter:

Fluwx fluwx = new Fluwx(); fluwx.pay(WeChatPayModel( appId: 'wxd930ea5d5a258f4f', partnerId: '1900000109', prepayId: '1101000000140415649af9fc314aa427', packageValue: 'Sign=WXPay', nonceStr: '1101000000140429eb40476f8896f4c9', timeStamp: '1398746574', sign: 'seven ffecb600d7157c5aa49810d2d8f28bc2811827b, signType:' optional 'extData:' optional '));Copy the code

WeChat callback

When FluwX initiates a share, payment or login request, it will return a value, but this is not the value of wechat callback:

{"platform":"Android",// or iOS result:true // or false, depending on the result of wxapi.sendrequest ()}Copy the code

Since wechat’s callback is asynchronous, we need to listen from response:

    _fluwx.response.listen((response){
      //do something
    });
Copy the code

WeChatResponse = WeChatResponse;

enum WeChatResponseType {
    SHARE,
    AUTH,
    PAYMENT }
Copy the code

Result is the value returned by wechat, and its type is Map. For the specific returned value, please refer to the official wechat document. However, there is an additional platform field with the value of Android or iOS, so as to facilitate differentiated processing by developers. However, wechat callback should also be differentiated according to the platform (if you don’t need a callback, please ignore it).

Android

Due to mechanical issues, you need to add the following code to WXEntryActivity or WXPayEntryActivity on Android:

   override fun onResp(resp: BaseResp) {
        FluwxResponseHandler.handleResponse(resp)
   }
Copy the code

You can also inherit FluwxWXEntryActivity directly. See the official documentation for WXEntryActivity and WXPayEntryActivity creation rules. For details, see The example wxAPI, and don’t forget to register in androidmanifest.mxl:

     <activity
            android:name="your.package.name.registered.on.wechat.wxapi.WXEntryActivity"
            android:theme="@style/DisablePreviewTheme"
            android:exported="true"
            android:launchMode="singleTop"/>
     <activity
            android:name="your.package.name.registered.on.wechat.wxapi.WXPayEntryActivity"
            android:theme="@style/DisablePreviewTheme"
            android:exported="true"
            android:launchMode="singleTop"/>

Copy the code

iOS

Override the following methods in your appdelegate.m:

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
    return [WXApi handleOpenURL:url delegate:[FluwxResponseHandler responseHandler]];
}

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options{
  return [WXApi handleOpenURL:url delegate:[FluwxResponseHandler responseHandler]];
}
Copy the code

The end of the

The above is Fluwx use method, I hope to help everyone. Another Alipay payment project, Tobias, is under development. Please keep an eye on JarvanMo and OpenFlutter.