设置您的Vega网页应用

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。

要设置Vega网页应用，必须导入一些必需的库，然后使用特定的组件来渲染内容。

设置您的Vega网页应用以开发您的应用

要实现WebView，必须导入一些必需的库，然后使用特定的组件来渲染内容。

按照Vega SDK主题使用模板创建应用中的说明添加应用模板。
要安装WebView，在命令提示符处，运行以下命令。
已复制到剪贴板。
```
npm install @amazon-devices/webview@^3.3.0
```

在您的应用文件夹中，打开manifest.toml文件，然后添加以下服务和权限。

已复制到剪贴板。

# 如果应用需要视频播放
 [[wants.service]]
 id = "com.amazon.media.server"
 [[wants.service]]
 id = "com.amazon.mediametrics.service"

 [[wants.service]]
 id = "com.amazon.mediabuffer.service"
 [[wants.service]] 
 id = "com.amazon.mediatransform.service"

 # 如果应用需要音频播放
 [[wants.service]]
 id = "com.amazon.audio.stream"
 [[wants.service]]
 id = "com.amazon.audio.control"

 # 如果应用需要DRM播放
 [[wants.service]]
 id = "com.amazon.drm.key"
 [[wants.service]]
 id = "com.amazon.drm.crypto"
 [[needs.privilege]]
 id = "com.amazon.privilege.security.file-sharing"

 # 要为您的应用启用无障碍支持功能，
 # 强烈建议您使用SR添加UCC服务
 [[wants.service]]
 id = "com.amazon.kepler.ucc.publisher"

 # 启用Group-IPC以访问媒体服务。 
 [wants]
 [[wants.service]]
 id = "com.amazon.gipc.uuid.*"

 [offers]
 [[offers.service]]
 id = "com.amazon.gipc.uuid.*"

 # 您可以根据需要添加其他服务

注意： 数字版权管理 (DRM) 支持： Webview目前支持Widevine和PlayReady。Widevine对视频支持HW_SECURE_ALL，对音频支持SW_SECURE_CRYPTO。PlayReady对视频支持SL3000，对音频支持SL2000。

将以下内容添加到您的JavaScript XML (JSX) 文件中。
已复制到剪贴板。
```
 import { WebView}  from "@amazon-devices/webview";
```

在您的src/App.tsx文件中，添加以下代码来渲染WebView，该代码中包含hasTVPreferredFocus={true}属性。

已复制到剪贴板。

 import { WebView } from "@amazon-devices/webview";
 import * as React from "react";
 import { useRef } from "react";
 import { View, StyleSheet } from "react-native";

 export const App = () => {
   const webRef = useRef(null);
   return (
     <View style={styles.container}>
       <WebView
         ref={webRef}
         hasTVPreferredFocus={true}
         source={{
           uri: "https://www.example.com",
         }}
         javaScriptEnabled={true}
         onLoadStart={(event) => {
           console.log("onLoadStart url: ", event.nativeEvent.url)
         }}
         onLoad={(event) => {
           console.log("onLoad url: ", event.nativeEvent.url)
         }}
         onError={(event) => {
           console.log("onError url: ", event.nativeEvent.url)
         }}
       />
     </View>
   );
 };

 // 布局样式，是正确焦点行为的必需项
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   }
 });

重要须知： WebView框架未设置初始焦点。您必须通过向组件添加hasTVPreferredFocus={true}属性来设置初始焦点。如果应用未将初始焦点设置在WebView组件上，则首次单击遥控器可能会选择WebView用户界面组件，从而促使WebView将其初始焦点设置到焦点表上的第一个元素。

当Vega网页应用进入后台时，它会暂停JavaScript引擎、动画和媒体播放音频和视频。当WebView来到前台时，它会进行恢复。

Last updated: 2025年9月30日

设置您的Vega网页应用

设置您的Vega网页应用以开发您的应用

相关主题