Flutter：获取 HTML 页面的某些元素

Question

我最近开始使用 dart & flutter 为动物收容所开发应用程序，运行遇到了问题。

想法是有一个捐赠页面，用户可以在其中选择为狗购买食物。打开的脚手架将显示食物的图片，并从销售所述食物的网站获取一些数据，以及当前价格。图片作为资产存储在本地，但我想至少从网站上获取价格，所以它始终是最新的。

我遵循了 flutter.io 上的教程，但问题是 http.get returns 网站的整个代码，而不仅仅是我指定的部分（description_tab).我尝试查看 async & dart:convert 文档，但到目前为止我还没有发现任何有助于使用 div 标签从 HTML 站点抓取特定内容的内容。

完整代码可以在这里找到：https://github.com/kergefarkas/osszefogasaszanhuzokert

这就是我能够获取站点的整个 HTML 代码的方法：

Future<JoseraAdultActive> fetchPost() async {
  final response = await http.get(
      'https://www.petissimo.hu/kutyaknak/szarazeledelek/josera/josera-active.html');
  final json = JSON.decode(response.body);

  return new JoseraAdultActive.fromJson(json);
}

class JoseraAdultActive {
  final String description;
  final String price;

  JoseraAdultActive({this.description, this.price});

  factory JoseraAdultActive.fromJson(Map<String, dynamic> json) {
    return new JoseraAdultActive(
        description: json['description_tab'],
        price: json['product_price_from']);
  }
}

这是我要显示提取信息的地方：

new Container(
                    padding: const EdgeInsets.only(top: 10.0, right: 5.0),
                    child: new FutureBuilder<JoseraAdultActive>(
                        future: fetchPost(),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {

                            return new Text('');
                          } else if (snapshot.hasError) {
                            return new Text('Error');
                          }
                          return new CircularProgressIndicator();
                        })),

我还认为 JSON.decode 不能与 HTML 代码一起使用，但找不到任何可以替代的东西。尝试通过子字符串对其进行切片也不起作用。

提前感谢您的帮助！

Answer 1

根据 Seth 的评论，您应该可以为此使用 html 库。

应该看起来像这样：

import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart';

var document = parse(response.body);
var priceElement = document.getElementsByClassName("product_price_from");
// priceElement may have weird formatting (I see &nbsp;) so you might need to do some parsing
// here to solve that

我还建议学习正则表达式 (RegEx)，因为它们也可以用来相当简单地解决这个问题，并且对各种编程问题都很有用。这里是 a link to dart's regex documentation and a general RegEx tutorial.

也就是说，此代码将取决于 URL 变化、网站变化或关闭、该特定产品不再销售，并将使用用户数据，以及许多其他因素可能会或可能不会在你的控制之下 - 所以我对将它放入生产代码中有点怀疑，即使它只是用于避难所的应用程序。至少确保它有一个安全的回落（即回落到当前价格 11500 英尺）。

我会仔细考虑这是否真的有必要，而不是简单地每年自己更新一次 if/when 价格变化。或者，如果您的应用程序有一个服务器后端（或者甚至可以访问避难所的网站 - 您可以在避难所放置一个页面。com/donationprices/joseraadultactive 只返回“11499”），我建议将其作为一个参数该应用程序可以检索您可以更新的内容（如果您绝对希望它自动完成，请每天在服务器上运行一次任务以检索最新价格）。另外，我不知道你所在的避难所是如何运作的，但在我住的地方，他们往往会大量购买大量食物，或者在打折时购买，所以一袋食物的价格有点无关紧要——那时你可能还有一个带有袋子图片和任意价格的捐赠按钮，因为您可能会得到同样多的捐赠，而且比应用程序出现问题时多得多。

Flutter：获取 HTML 页面的某些元素

Flutter: Fetch certain elements of a HTML page

dart

flutter