Fluwx:讓在Flutter中使用微信SDK成爲可能

前言

以前有了解的小夥伴可能已經看過Fluwx的一篇文章，不過那個時候Fluwx仍是不太成熟。如今Fluwx的主體功能已通過成了。若是你正在或想開發一個Flutter項目但苦於沒法使用微信分享、登陸，那麼Fluwx可能正是你所要尋找的。
儘管Fluwx旨在減化工做量，但在使用Fluwx以前，我仍是強烈建議先閱讀微信SDK官方文檔，這有助於瞭解一些概念，有利於調試問題。
Fluwx傳送門。

目前功能

• 文本分享。
• 網站分享。
• 圖片分享。
• 音樂分享。
• 視頻分享。
• 小程序分享。
• 發送Auth認證。
• 支付。

技術參數

Android部分使用到了kotlin-1.2.60。如下是Android部分所涉及到的技術:

api 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:5.1.4'
 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'

其中Luban是用來圖片壓縮的。
iOS部分涉及到的技術：

s.dependency 'WechatOpenSDK','~> 1.8.2'

Flutter版本信息

Flutter 0.7.5 • channel dev • https://github.com/flutter/fl...

Framework • revision eab5cd9853 (4 days ago) • 2018-08-30 14:47:04 -0700

Engine • revision dc7b5eb89d

Tools • Dart 2.1.0-dev.3.0.flutter-760a9690c2

引入

在pubspec.yaml文件中添加以下代碼：

dependencies:
  fluwx: ^0.1.3

添加完成後不要忘記flutter packages get。

初始化

使用Fluwx前，須要進行初始化操做：

Fluwx.registerApp(RegisterModel(appId: "your app id", doOnAndroid: true, doOnIOS: true));

• appId：在微信平臺申請的appId。
• doOnAndroid:是否在android平臺上執行此操做。
• doOnIOS:是否在平臺上執行此操做。

每個字段都是非必須的，可是若是不傳appId或doOnAndroid: false或者doOnIOS: false，請務必手動註冊WXApi以保證Fluwx正常工做。
註冊完成後，請在使用Fluwx前在對應平臺添加以下代碼：
Android上：

FluwxShareHandler.setWXApi(wxapi)

iOS上：

isWeChatRegistered = YES;

注意：儘管能夠經過 Fluwx完成微信註冊，但一些操做依然須要在對應平臺進行設置，如配置iOS的URLSchema，Android上的WXEntryActivity等，不然 Fluwx沒法正常工做。

如何發起分享

很遺憾，Fluwx並非支持全部的分享類型。目前僅支持文本、圖片、網址

音樂、視頻以及小程序的分享。其餘分享將在將來版本獲得支持。

注意：目前分享中涉及到圖片的地方僅支持 png和 jpg，支持網絡圖片及 assets圖片。

使用 assets圖片須要添加 assets://。

也能夠在 assets圖片添加 ?package=package_name以讀取指定包的圖片。

將來可能支持 file://,目前以 file://圖片不會作任何處理。

若是不指定schema或者schema錯誤,將會被處理爲網絡圖片，請謹慎。

因爲微信的限制，通常的縮略圖要小於32k(小程序的縮略圖要小於120k)，因此在使用縮略的時候

頗有必要使用一張合格的縮略圖，不然 Fluwx進行壓縮，其結果可能並非你所預期的。

分享去處

絕大部分分享能夠分享到會話，朋友圈，收藏（小程序目前只能分享到會話）。默認分享到會話：

///[WeChatScene.SESSION]會話
    ///[WeChatScene.TIMELINE]朋友圈
    ///[WeChatScene.FAVORITE]收藏
    enum WeChatScene {
      SESSION,
      TIMELINE,
      FAVORITE
      }

分享文本

fluwx.share(WeChatShareTextModel(
      text: "text from fluwx",
      transaction: "transaction}",//僅在android上有效，下同。
      scene: scene
    ));

分享圖片

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

注意：若是不指定 thumbnail，那麼 Fluwx將嘗試從 image中獲取縮略圖。

分享音樂

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

    fluwx.share(model);

音樂的分享有兩種：musicUrl和musicLowBandUrl。這兩種形式是不共存的，若是
都兩者都進行了賦值，那麼只會讀取musicUrl。

分享視頻

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

視頻的分享有兩種：videoUrl和videoLowBandUrl。這兩種形式是不共存的，若是
都兩者都進行了賦值，那麼只會讀取videoUrl。

分享小程序

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

miniProgramType僅支持三種:

• MINI_PROGRAM_TYPE_RELEASE
• MINI_PROGRAM_TYPE_TEST
• MINI_PROGRAM_TYPE_PREVIEW

發送Auth認證

對於微信登陸，Fluwx只實現了第一步，即獲取code，若要獲取access_token請在服務器端完成。

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

發起支付

每一個參數的意義請參考官方文檔：

Fluwx fluwx = new Fluwx();
fluwx.pay(WeChatPayModel(
                  appId: 'wxd930ea5d5a258f4f', 
                  partnerId: '1900000109',
                  prepayId: '1101000000140415649af9fc314aa427',
                  packageValue: 'Sign=WXPay',
                  nonceStr: '1101000000140429eb40476f8896f4c9',
                  timeStamp: '1398746574',
                  sign: '7FFECB600D7157C5AA49810D2D8F28BC2811827B',
                  signType: '選填',
                  extData: '選填'
                ));

微信回調

當fluwx發起分享、支付或登陸請求都會有返回值，但這並非微信回調的值：

{
      "platform":"Android",//或者iOS
       result:true //或者false，取決於WXApi.sendRequest()的結果
     }

因爲微信的回調是異步的，咱們須要從response中監聽：

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

從微信回調的值爲WeChatResponse，其實type字段爲枚舉：

enum WeChatResponseType {
    SHARE,
    AUTH,
    PAYMENT }

result爲微信回傳的值，其類型爲Map，具體返回值請參閱微信官方文檔，但均額外包含一個
platform字段，其值爲android或者iOS，以便開發者做差別化處理。
但微信的回調也要根據平臺的不一樣進行差別化處理(若是你不須要回調，請忽略)。

Android

因爲機制問題，Android端須要在WXEntryActivity或WXPayEntryActivity中添加以下代碼：

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

你也能夠直接繼承FluwxWXEntryActivity。
WXEntryActivity和WXPayEntryActivity建立規則請參閱官方文檔。具體能夠參考example wxapi
，也不要忘記在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"/>

iOS

在你的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]];
}

結束

以上就是Fluwx的使用方法，但願對大夥有所幫助。另外還有一個支付寶支付項目tobias正在開發當中。
但願你們能夠關注JarvanMo和OpenFlutter。