1

我正在尝试使用 Alexa 创作工具创建幻灯片放映（2-3 张图像）。我已经设法使用APL Pager来做到这一点，它一次显示一系列组件。问题是为了从图像 A 切换到图像 B..CI 必须触摸屏幕并向左/向右滑动。我想让这自动发生并在一定时间内让alexa swicth图像，这似乎可以使用APL autopage来实现，但由于某种原因这不起作用

我做了什么

  • 使用 APL 寻呼机设置 APL
  • 将自动页面添加到 APL 文档
    • 组件 ID
    • 期间
    • 延迟

在尝试模拟并直接在 echo show 5 中之后，它仍然仅在触摸显示屏时触发。

也试过：

  • 直接在 Alexa 的处理程序中添加标准命令（自动寻呼机），但响应相同。

一些疑问

当我调用 .addDirective[2] 时，我将命令放在 APLdocument.json[1] 文件中还是直接放在处理程序中是否重要。我看到的唯一区别是我是否希望内容或持续时间是动态的，我应该放它直接在后端代码（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();
4

2 回答 2

3

只需在“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
            }]
        }
    ]
}

}

于 2021-02-05T23:46:39.673 回答
0

要从后端代码动态更新此功能，您可以执行以下操作：

// 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
     }
   ]
  });
}
于 2021-02-06T01:04:33.903 回答