是否可以从Flutter网页链接显示链接预览?

我正在考虑在flutter web上开发一个电子商务应用程序，使用Navigator 2.0，可能是beamer。

我希望人们能够分享颤振网络链接，并在社交网络上显示预览。这可能吗?

只是为了澄清:我不希望在我的web应用程序上显示其他网站的预览。我想在社交网络上显示我的flutter web应用程序链接的预览。这可能吗?

元标签是html文件的一部分，作为对"标签预览解析器"的响应，Flutter提供静态html文件(index.html)和动态js，

如果你想在所有请求中只包含元数据响应，那么你可以修改你的web源代码下的index.html文件。

但是如果您需要根据用户所在的页面创建动态元数据，则需要为每个请求提供动态HTML页面，如下所示。

从我所尝试的，我不能做到这一点，但我必须修改每个请求的html响应，查看这篇文章:https://almog.io/blog/dynamic-open-graph-meta-tags-flutter-web.

我还包括了我的部分代码(它托管在firebase主机上):

exports.dynamicMetaTagsUpdate = functions.https.onRequest(async (request, response) => {
let html = fs.readFileSync("./index.html", "utf8");
let id = request.path.split("/").pop()
try {
let metaStart = html.indexOf("<!--  META TAGS START-->")
let metaEnd = html.indexOf("META END")
let start = html.substring(0, metaStart);
let injected = await getMetatags(id);
let end = html.substring(metaEnd, html.length);
return response.send(start + injected + end);
} catch (e) {
console.log(e);
return response.send(html);
}
});

js函数getMetatags(id)是一个函数，返回我需要包含在响应html中的元集字符串，例如:

<meta property="og:type" content="website">
<meta property="og:title" content="${author}">
<meta property="og:description" content="${description}">
<meta property="og:image" content="${image}">

结果，html响应看起来像这样:

<!DOCTYPE html>
<html>
<head>

<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="app name">
<link rel="apple-touch-icon" href="icons/Icon-192.png">

<!--  META TAGS START-->
<title>app name</title>
<meta name="description"
content="1234 56789 0123">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="app name">
<meta itemprop="description"
content="1234 56789 0123">
<meta itemprop="image"
content="https://website.com/image.jpeg">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://website.com">
<meta property="og:type" content="website">
<meta property="og:title" content="app name">
<meta property="og:description"
content="1234 56789 0123">
<meta property="og:image"
content="https://website.com/image.jpeg">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="app name">
<meta name="twitter:description"
content="1234 56789 0123">
<meta name="twitter:image"
content="https://website.com/image.jpeg">
<!--  META TAGS END-->

<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = '4168871932';
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>

您可以通过apple引用此文档，并在index.html文件中使用它。这种元数据是最常用的添加预览链接的方式。每当你在社交媒体上发帖或在消息中发送链接时，它都会显示预览。

是的，你可以使用这个库:这是指向库的链接

你可以在MaterialApp或脚手架中使用名为AnyLinkPreview的Widget。

是的，你可以使用AnyLinkPreview解决这个问题的包。在这种情况下，需要将此包添加到您的项目中，然后根据需要使用AnyLinkPreview小部件。

例如,

final String _url =
"https://speakerdeck.com/themsaid/the-power-of-laravel-queues";
Widget getLinkPreview ()
{
return Container(
child : AnyLinkPreview(
link: _url,
displayDirection: UIDirection.UIDirectionHorizontal,
cache: Duration(hours: 1),
backgroundColor: Colors.grey[300],
errorWidget: Container(
color: Colors.grey[300],
child: Text('Oops!'),
),
errorImage: _errorImage,
),
);
}

注意-如果你需要显示一个预览链接列表，那么你可以使用ListView小部件中的AnyLinkPreview小部件。

社交网络在html页眉中使用特殊的开放图形标签(og:title, og:image…)来构建链接预览。

Flutter web应用程序是单页应用程序，这意味着如果你总是想要预览到你的应用程序的根链接或应用程序内的任何链接，你可以简单地在web/index.html部分设置这些标签。

如果你想为不同的航线有不同的预览。这有点棘手。您需要动态地生成og标记。这不能在js中完成，因为社交网络机器人不运行javascript。你需要创建一个云函数，它将运行在服务器端，并根据路由重写页头。

更多信息在这里:https://almog.io/blog/dynamic-open-graph-meta-tags-flutter-web

相关内容

最新更新

热门标签：