Flutter 分享到微信并通过分享链接跳回 APP

参考文章：[Flutter]微信分享并从分享链接跳回APP指定页面 作者：huos08

Flutter 中使用到的插件：

1. fluwx: 2.0.7 : 包含分享链接、文本、图片等到微信，还有微信支付。
2. uni_links: 0.4.0 : 通过链接可以激活应用程序，并且可能包含一些信息，可以使用这些信息来加载应用程序的特定部分或继续进行网站。

微信分享

使用 fluwx: 2.0.7 实现微信分享。

依赖配置

dependencies:
  # 微信支付
  fluwx: 2.0.7

Android 配置

不需要特殊配置

IOS 配置

需要配置 universalLink ，参考 文档 以便了解如何生成通用链接，你也可以学习到怎么在iOS工程中添加URL schema，怎么添加LSApplicationQueriesSchemes。这很重要。

Flutter 使用

注册微信sdk，如果用于ios，必须指定 universalLink

import 'package:fluwx/fluwx.dart' as fluwx;
@override
void initState() {
    fluwx.registerWxApi(
        appId: your wechat appid,
        doOnAndroid: true,
        doOnIOS: true,
        universalLink: your universal link
    );
}

以分享网页链接到好友为例：

fluwx.shareToWeChat(fluwx.WeChatShareWebPageModel(
  your web url,
  title: your title,
  description: your desc,
  thumbnail: fluwx.WeChatImage.network(your image url),
));

至此，已经实现从 APP 分享到微信，下一步将从微信点击分享后的链接，唤起APP并直接打开指定页面。

通过分享链接跳回 APP

使用 uni_links 实现

依赖配置

dependencies:
  uni_links: 0.4.0

Android 配置

android/app/src/main/AndroidManifest.xml

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <meta-data
        android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
        android:value="true" />
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
    <!--这里是需要添加的部分-->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:scheme="yourScheme"
            android:host="yourHost"
        />
    </intent-filter>
    <!--这里是需要添加的部分结束位置-->
</activity>

IOS 配置

参考 uni_links 文档

Flutter 使用

在 APP 登录后的主页面对 URI 进行解析，并跳转到对应页面，如：

class MainPage extends StatefulWidget {
  @override
    State<StatefulWidget> createState() => MainPageState();
}
class MainPageState extends State<MainPage> {
  StreamSubscription _sub;
  Uri _latestUri;
  // This widget is the root of your application.
  @override
  void initState() {
    super.initState();
    initPlatformState();
  }
  @override
  void dispose() {
    if (_sub != null) _sub.cancel();
    super.dispose();
  }
  Future<void> initPlatformState() async {
    _sub = getLinksStream().listen((String link) {
      debugPrint('got link: $link');
      try {
        if (link != null) _latestUri = Uri.parse(link);
        _parseUriAndGetWaresInfoAndTurn();
      } on FormatException catch (e) {
        debugPrint("[getLinksStream.listen] FormatException: $e");
      }
    }, onError: (err) {
      debugPrint('got err: $err');
      _latestUri = null;
    });
    String initialLink;
    Uri initialUri;
    try {
      initialLink = await getInitialLink();
      print('initial link: $initialLink');
      if (initialLink != null) initialUri = Uri.parse(initialLink);
    } on FormatException catch (e) {
      debugPrint("[getInitialLink] FormatException: $e");
      initialLink = 'Failed to parse the initial link as Uri.';
      initialUri = null;
      return ;
    } catch (e) {
      debugPrint("[getInitialLink] failed: $e");
      return ;
    }
    _latestUri = initialUri;
    final queryParams = _latestUri?.queryParametersAll?.entries?.toList();
    String pageType;
    String id;
    if (queryParams != null) {
      for (var param in queryParams) {
        if (param.key == 'type') {
          pageType = param.value.length > 0 ? param.value[0] : null;
        }
        if (param.key == 'id') {
          id = param.value.length > 0 ? param.value[0] : null;
        }
      }
    }
    // 这里是根据你自己的 type, id 做相应的跳转页面，下面是个例子
    if (pageType == "wares") {
      Navigator.pushNamed(context, yourPath, arguments: {'id': id});
    }
  }
  @override
  Widget build(BuildContext context) {
    // 你自己的 build 函数
  }
}

中转页面

一个简单的中转页面：

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
  <head>
      <meta http-equiv=Content-Type content="text/html;charset=utf-8">
      <title>Your Title</title>
  </head>
  <body>
      <style>
          #mobliestart{font-size:40px;}
      </style>
      <a href='yourScheme://yourHost?type=report&id=1' id="mobliestart">点击打开APP</a>
      <script type="text/javascript"> 
          function applink(){   
              window.location = 'yourScheme://yourHost?type=report&id=1'; 
          }
          applink();
      </script>
  </body>
</html>

中转页面设置了自动跳转和点击跳转，由于微信浏览器对scheme link的限制，ios和Android都需要点击右上角的‘浏览器中打开’。

完