Flutter OGP数据提取插件ogp_data_extract的使用

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

Flutter OGP数据提取插件ogp_data_extract的使用

简介

ogp_data_extract 是一个简单的Dart库，用于从网页中提取Open Graph协议元数据。此库允许你检索在 “The Open Graph protocol” 中定义的元数据项。

开始使用

添加依赖

首先，在你的项目的 pubspec.yaml 文件中添加对 ogp_data_extract 的依赖：

dependencies:
  ogp_data_extract: ^0.2.x

然后，根据你使用的环境（Dart或Flutter），安装该包：

  • 使用Dart：

    $ dart pub get

  • 使用Flutter：

    $ flutter pub get

结构

这个库支持以下Open Graph协议元数据字段的提取，具体字段请参考 Open Graph协议文档：

  • url
  • type
  • title
  • description
  • image
  • imageSecureUrl
  • imageType
  • imageWidth
  • imageHeight
  • imageAlt
  • siteName
  • determiner
  • locale
  • localeAlternate
  • latitude
  • longitude
  • streetAddress
  • locality
  • region
  • postalCode
  • countryName
  • email
  • phoneNumber
  • faxNumber
  • video
  • videoSecureUrl
  • videoHeight
  • videoWidth
  • videoType
  • audio
  • audioSecureUrl
  • audioTitle
  • audioArtist
  • audioAlbum
  • audioType
  • fbAdmins
  • fbAppId
  • twitterCard
  • twitterSite

使用方法

解析给定URL的OgpData

你可以通过下面的例子来为特定的URL提取Open Graph元数据：

import 'package:flutter/foundation.dart';
import 'package:ogp_data_extract/ogp_data_extract.dart';

void main() async {
  const String url = 'https://pub.dev/';
  final OgpData? ogpData = await OgpDataExtract.execute(url);
  if (kDebugMode) {
    print(ogpData?.url); // https://pub.dev/
    print(ogpData?.type); // website
    print(ogpData?.title); // The official repository for Dart and Flutter packages.
    print(ogpData?.description); // Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.
    print(ogpData?.image); // https://pub.dev/static/img/pub-dev-icon-cover-image.png?hash=vg86r2r3mbs62hiv4ldop0ife5um2g5g
    print(ogpData?.siteName); // Dart packages
  }
}

指定解析时的User-Agent

你可以为请求指定一个自定义的User-Agent字符串，这对于针对特定设备或环境非常有用：

void main() async {
  const String url = 'https://pub.dev/';
  const String userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1';
  final OgpData? ogpData = await OgpDataExtract.execute(url, userAgent: userAgent);
  print(ogpData);
}

手动使用解析器

如果你已经有了网页的HTML内容，可以使用如下方法手动解析：

import 'package:http/http.dart' as http;
import 'package:ogp_data_extract/ogp_data_extract.dart';

void main() async {
  const String url = 'https://pub.dev/';
  final http.Response response = await http.get(Uri.parse(url));
  final Document? document = OgpDataExtract.toDocument(response);
  final OgpData ogpData = OgpDataParser(document).parse();
  print(ogpData);
}

获取网页的Favicon

除了Open Graph协议的提取，此库还提供了一个实用工具来获取给定网页的所有可用Favicon URL：

void main() async {
  const String url = 'https://pub.dev/';
  final List<String?> favicons = await OgpDataExtract.fetchFavicon(url);
  print(favicons); // Example output: ['/favicon.ico?hash=nk4nss8c7444fg0chird9erqef2vkhb8']
}

这个方法会解析网页中的 <link> 标签以找到所有与图标相关的元数据，并返回一个Favicon URL列表。

致谢

这个库受到了 metadata_fetch 的启发，但它是专门为Open Graph协议提取设计的。


更多关于Flutter OGP数据提取插件ogp_data_extract的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter OGP数据提取插件ogp_data_extract的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用ogp_data_extract插件来提取OGP（Open Graph Protocol）数据的示例代码。

首先，确保你的Flutter项目已经配置好，并且已经添加了ogp_data_extract依赖。你可以通过以下步骤添加依赖：

  1. 打开你的Flutter项目的pubspec.yaml文件。
  2. 在dependencies部分添加ogp_data_extract：
dependencies:
  flutter:
    sdk: flutter
  ogp_data_extract: ^最新版本号  # 请替换为最新的版本号
  1. 运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用ogp_data_extract插件来提取OGP数据。以下是一个完整的示例代码：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  OGPData? ogpData;
  String? url;
  bool isLoading = false;

  void _fetchOGPData(String url) async {
    setState(() {
      isLoading = true;
    });

    try {
      ogpData = await OGPDataExtractor().extractFromUrl(url);
    } catch (e) {
      print('Error fetching OGP data: $e');
      ogpData = null;
    }

    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OGP Data Extractor Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  labelText: 'Enter URL',
                ),
                onChanged: (value) {
                  url = value;
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: url != null ? () => _fetchOGPData(url!) : null,
                child: Text('Fetch OGP Data'),
              ),
              SizedBox(height: 16),
              if (isLoading)
                CircularProgressIndicator(),
              if (ogpData != null)
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Title: ${ogpData!.title}'),
                    Text('Description: ${ogpData!.description}'),
                    Text('Type: ${ogpData!.type}'),
                    Text('Image URL: ${ogpData!.image}'),
                    Text('URL: ${ogpData!.url}'),
                    // 你可以根据需要添加更多的OGP字段
                  ],
                ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，用户可以输入一个URL，然后点击按钮来提取该URL的OGP数据。提取到的数据会显示在界面上。

请注意，OGPData类中可能包含多个字段，例如title、description、type、image和url等，具体取决于OGP标签在网页中的定义。你可以根据需要访问这些字段。

确保在实际应用中处理可能出现的错误和异常情况，例如网络问题或无效的URL。

回到顶部