如何使用谷歌交互式画布导入更多屏幕网页

Question

我想使用Interctive-Cavas通过HTML，CSS和Js自定义Google NestHub。

在示例中：https://medium.com/voice-tech-podcast/google-assistant-interactive-canvas-c83a959bdea0

conv.ask(new HtmlResponse({
url: `https://${firebaseConfig.projectId}.firebaseapp.com`,
}));

网址：https://${firebaseConfig.projectId}.firebaseapp.com显示index.html。但是我还有很多其他的html文件，例如：a.html，b.html，c.html,...想展示。

那么，该怎么做呢？请帮助我！

多谢！

Answer 1

最佳做法是将交互式画布与单页应用程序 (SPA( 一起使用。在此方案中，您的索引.html负责显示所有内容，尽管它可以从其他 URL 中提取资源。

这使您可以执行漂亮的过渡，并在后续页面加载时为用户创建不那么刺耳的体验。

但是，没有什么可以阻止您作为响应的一部分加载到不同的页面。因此，为了您的欢迎意图，您可能希望使用如下内容回复索引页面：

conv.ask(new HtmlResponse({
url: `https://${firebaseConfig.projectId}.firebaseapp.com`,
}));

而对于其他意图，您可能希望使用不同的 URL 进行回复。可能是这样的：

conv.ask(new HtmlResponse({
url: `https://${firebaseConfig.projectId}.firebaseapp.com/page1.html`,
}));

如果您使用单页模型，则可以发回数据并让页面中的 JavaScript 检测到这一点。这些数据可以是您想要的任何内容，但可能看起来像这样(假设您pageNumber变量，并name包含有用的信息放在页面上(

conv.ask(new HtmlResponse({
data: {
page: pageNumber,
userName: name
}
}));