我正在尝试使用Alexa创作工具创建幻灯片(2-3张图像)。我使用APL Pager做到了这一点，它一次一个地显示一系列组件。问题是，为了从图像A切换到图像B..C，我必须触摸屏幕并向左/向右滑动。我想让这种情况自动发生，并有alexa切换图像在一定时间内，似乎这可以使用APL autopage实现，但由于某种原因，这是不工作😩
我做了什么
- 使用APL分页设置APL
- 将auto页面添加到APL文档中
- 组件Id
- 延迟
在尝试模拟后，直接在回波显示5中，它仍然只在触摸显示器时触发。
也尝试:
- 直接在alexa处理程序中添加标准命令(自动寻呼机)，但响应相同。
有些疑惑如果我把命令放在api文档中有关系吗?json[1]文件或直接在处理程序当我调用。adddirective [2]..唯一的区别我看到，如果我想要的内容或持续时间是动态的，我应该把它直接在后端代码(index.js)对吗?
[1]
{
"type": "APL",
"version": "1.4",
"settings": {},
"theme": "light",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"commands": [
{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}
],
[2]
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token:'arrugas',
document: physiolift,
commands: [{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}]
});
}
预期输出
让Alexa (echo show 5)像旋转木马一样显示一系列图像(不需要触摸屏幕)
我的代码APL文档
{
"type":"APL",
"version":"1.4",
"settings":{
},
"theme":"light",
"import":[
],
"resources":[
],
"styles":{
},
"onMount":[
],
"graphics":{
},
"commands":[
{
"type":"AutoPage",
"componentId":"fisrtpager",
"duration":1000,
"delay":500
}
],
"layouts":{
},
"mainTemplate":{
"parameters":[
"payload"
],
"items":[
{
"type":"Pager",
"id":"fisrtpager",
"width":"100%",
"height":"100%",
"items":[
{
"type":"Image",
"width":"100%",
"height":"100%",
"scale":"best-fill",
"source":"https://dyl80ryjxr1ke.cloudfront.net/external_assets/hero_examples/hair_beach_v1785392215/original.jpeg",
"align":"center"
},
{
"type":"Image",
"width":"100%",
"height":"100%",
"source":"https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
"scale":"best-fill"
},
{
"type":"Text",
"text":"Just text content shown on page #3",
"textAlign":"center"
}
],
"navigation":"wrap"
}
]
}
}
index.js
// somewhere inside the intent im invoking
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
// Create Render Directive.
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token:'arrugas',
document: require('./documents/ImageTest.json')
});
}
speakOutput += ' just saying somthing'
return handlerInput.responseBuilder
.speak(speakOutput)
.reprompt('just saying something else')
.getResponse();
将命令添加到"onMount"事件处理程序。下面是修改后的代码，它正好满足了您的需求:
{
"type": "APL",
"version": "1.4",
"settings": {},
"theme": "light",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Pager",
"id": "fisrtpager",
"width": "100%",
"height": "100%",
"items": [
{
"type": "Image",
"width": "100%",
"height": "100%",
"scale": "best-fill",
"source": "https://dyl80ryjxr1ke.cloudfront.net/external_assets/hero_examples/hair_beach_v1785392215/original.jpeg",
"align": "center"
},
{
"type": "Image",
"width": "100%",
"height": "100%",
"source": "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
"scale": "best-fill"
},
{
"type": "Text",
"text": "Just text content shown on page #3",
"textAlign": "center"
}
],
"navigation": "none",
"onMount": [{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}]
}
]
}
}
要从后端代码动态更新此特性，您可以执行以下操作:
// check if device supports APL
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
// Create Render Directive.
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token: "dialogManagementPagerDoc",
document: require('./PATH-TO/YOUR-APL-FILE.json')
})
.addDirective({
type: "Alexa.Presentation.APL.ExecuteCommands",
token: "dialogManagementPagerDoc",
commands: [
{
type: "AutoPage",
componentId: "YOUR_PAGER_ID",
delay: 1000,
duration: 5000
}
]
});
}