Flutter Facebook应用链接跳转插件facebook_applinks的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter Facebook应用链接跳转插件facebook_applinks的使用

Android

AndroidManifest.xml 文件中添加以下配置:

<application>
    <meta-data
        android:name="facebook_applinks"
        android:value="${FACEBOOK_APP_LINKS}" />

    <activity android:name=".MainActivity">
        <!-- facebook applinks -->
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <data android:scheme="${FACEBOOK_APP_LINKS}" />
        </intent-filter>
    </activity>
</application>

build.gradle 文件中添加占位符:

android {
    defaultConfig {
        manifestPlaceholders = [
                FACEBOOK_APP_LINKS : "your facebook app link scheme",
        ]
    }
}

iOS

app.xcconfig 文件中添加以下配置:

FACEBOOK_APP_LINKS=your facebook app link scheme

Info.plist 文件中添加以下配置:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>facebook_applinks</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>$(FACEBOOK_APP_LINKS)</string>
        </array>
    </dict>
</array>

Flutter

pubspec.yaml 文件中添加依赖:

dependencies:
  facebook_applinks:
    git:
      url: https://github.com/rxreader/flutter_facebook.git
      path: facebook_applinks

或者直接指定版本号:

dependencies:
  facebook_applinks: ^${latestVersion}

完整示例Demo

以下是一个完整的示例Demo,展示了如何使用 facebook_applinks 插件。

import 'dart:convert';

import 'package:facebook_applinks/facebook_applinks.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Facebook AppLinks'),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              title: const Text('获取延迟应用链接'),
              onTap: () async {
                try {
                  final DeferredAppLink link = await FacebookApplinks.instance.fetchDeferredAppLink();
                  print('链接: ${json.encode(link)}');
                } on PlatformException catch (e) {
                  print(e);
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter Facebook应用链接跳转插件facebook_applinks的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Facebook应用链接跳转插件facebook_applinks的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用facebook_applinks插件来实现Facebook应用链接跳转的示例代码。首先,你需要确保你的Flutter项目中已经添加了facebook_applinks插件。如果还没有添加,可以通过以下命令添加:

flutter pub add facebook_applinks

添加完插件后,你需要按照以下步骤配置和使用它。

1. 配置Android和iOS项目

Android

android/app/src/main/AndroidManifest.xml中添加必要的Facebook配置:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application
        ... >
        
        <!-- Facebook App Links -->
        <meta-data
            android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id" />
        
        <activity
            android:name="com.facebook.FacebookActivity"
            android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" />

        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <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="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
    </application>

</manifest>

确保在strings.xml中定义了facebook_app_idfb_login_protocol_scheme

<resources>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
    <string name="fb_login_protocol_scheme">fbYOUR_FACEBOOK_APP_ID</string>
</resources>

iOS

ios/Runner/Info.plist中添加必要的Facebook配置:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>Your App Name</string>

2. 使用facebook_applinks插件

在你的Flutter代码中,你可以这样使用facebook_applinks插件来处理Facebook应用链接:

import 'package:flutter/material.dart';
import 'package:facebook_applinks/facebook_applinks.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Facebook App Links Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Tap the button to open a Facebook App Link'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _openFacebookAppLink,
                child: Text('Open Facebook App Link'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _openFacebookAppLink() async {
    try {
      // Replace with your actual Facebook App Link URL
      String appLinkUrl = 'https://l.facebook.com/l.php?u=https%3A%2F%2Fwww.example.com%2F&h=AT3Nz90E_SNK69HkR9j4_Y2k_oJ5lZ_S&s=1';
      bool isOpened = await FacebookAppLinks.openURL(appLinkUrl);
      
      if (isOpened) {
        print('App link opened successfully.');
      } else {
        print('Failed to open app link.');
      }
    } catch (e) {
      print('Error opening Facebook app link: $e');
    }
  }
}

在上面的代码中,我们定义了一个按钮,当点击按钮时,会尝试打开指定的Facebook应用链接。如果链接成功打开,则会在控制台打印成功信息;如果失败,则打印错误信息。

请确保将YOUR_FACEBOOK_APP_ID替换为你的实际Facebook应用ID,并将appLinkUrl替换为你要打开的实际Facebook应用链接URL。

这样,你就可以在Flutter应用中实现Facebook应用链接的跳转功能了。

回到顶部