Kin*_* Pu 6 flutter flutter-web
我正在考虑在 flutter web 上开发一个电子商务应用程序，使用 Navigator 2.0，也许是 beamer。
我希望人们能够分享 flutter web 链接并在社交网络上显示预览。这可能吗？
只是为了澄清：我不想在我的网络应用程序上显示其他网站的预览。我想在社交网络上显示我的 flutter web 应用程序链接的预览。那可能吗？
Meta 标签是 html 文件的一部分，作为对“mata 标签预览解析器”的响应，Flutter 提供静态 html 文件 ( index.html) 和动态 js，
如果您只想包含所有请求的元数据响应，那么您只需修改 Web 源代码下的 index.html 文件即可。
但如果您需要根据用户所在的页面创建动态元数据，则需要为每个请求提供动态 html 页面，如下所示。
从我的尝试来看，我无法从 flutter 端做到这一点，但我必须修改每个请求的 html 响应，查看这篇文章： https: //almog.io/blog/dynamic-open-graph-元标签-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>
| 归档时间： |
|
| 查看次数： |
4413 次 |
| 最近记录： |