目前开发安卓TV的方法相对开说是十分的少的，使用uniapp开发相对来说几乎是没有的，因此，写下这篇文章供大家参考。 ### 开发难点 1. 如何方便的开发调试 1. 如何使需要被聚焦的元素获取聚焦状态 1. 如何使被聚焦的元素滚动到视图中心位置 1. 如何在切换路由时，缓存聚焦的状态 1. 如何启用wgt和apk两种方式的升级 ### 一、如何方便的开发调试之前我在论坛看到人家说，没办法呀，电脑搬到电视，然后调试。其实大可不必，安装android studio里边创建一个模拟器就可以了。注意:最好安装和电视系统相同的版本号，我这里是长虹电视，安卓9所以使用安卓9的sdk ### 二、如何使需要被聚焦的元素获取聚焦状态 uniapp的本质上是webview, 因此我们可以在它的元素上添加tabIndex，就可以获取焦点了。 ``` {{ props.name }} {{ props.remark }} .card { border-radius: 1.25vw; overflow: hidden; } .card:focus { box-shadow: 0 0 0 0.3vw #fff, 0 0 1vw 0.3vw #333; outline: none; transform: scale(1.03); transition: box-shadow 0.3s ease, transform 0.3s ease; } ``` ### 三、如何使被聚焦的元素滚动到视图中心位置使用renderjs进行实现如下 ``` ``` 就可以使被聚焦元素滚动到视图中心，requestAnimationFrame的作用是缓存 ### 四、如何在切换路由时，缓存聚焦的状态通过设置tabindex属性为0和1，会有不同的效果： 1. tabindex="0"：将元素设为可聚焦，并按照其在文档中的位置来确定焦点顺序。当使用Tab键进行键盘导航时，tabindex="0"的元素会按照它们在源代码中的顺序获取焦点。这可以用于将某些非交互性元素（如

、等）设为可聚焦元素，使其能够被键盘导航。 1. tabindex="1"：将元素设为可聚焦，并将其置于默认的焦点顺序之前。当使用Tab键进行键盘导航时，tabindex="1"的元素会在默认的焦点顺序之前获取焦点。这通常用于重置焦点顺序，或者将某些特定的元素（如重要的输入字段或操作按钮）置于首位。需要注意的是，如果给多个元素都设置了tabindex属性，那么它们的焦点顺序将取决于它们的tabindex值，数值越小的元素将优先获取焦点。如果多个元素具有相同的tabindex值，则它们将按照它们在文档中的位置来确定焦点顺序。同时，负数的tabindex值也是有效的，它们将优先于零和正数值获取焦点。我们要安装缓存插件，如pinia或vuex,需要缓存的页面单独配置 ``` import { defineStore } from 'pinia'; export const useGlobalStore = defineStore('global', { state: () => ({ home_active_tag: 'active0', hot_active_tag: 'hot0', dish_active_tag: 'dish0' }) }); ``` 更新一下业务代码 ``` 组件区域 {{ props.name }} {{ props.remark }} const { home_active_tag } = storeToRefs(useGlobalStore()); ``` ``` 页面区域

``` ``` const goShopByFood = async (row: Record) => { useGlobalStore().home_active_tag = 'foodcard' + row.id; uni.navigateTo({ url: `/pages/shop/index?shop_id=${row.shop_id}`, animationDuration: 500, animationType: 'zoom-fade-out' }); }; ``` 如果，要设置启动默认焦点 id和index可默认设置，推荐启动第一个焦点组用index,它可以确定 ``` import { defineStore } from 'pinia'; export const useGlobalStore = defineStore('global', { state: () => ({ home_active_tag: 'active0', //默认选择 hot_active_tag: 'hot0', dish_active_tag: 'dish0' }) }); ``` 对于多层级的，要注意销毁，在前往之前设置默认焦点 ``` const goHot = (index: number) => { useGlobalStore().home_active_tag = 'hotcard' + index; useGlobalStore().hot_active_tag = 'hot0'; uni.navigateTo({ url: `/pages/hot/index?index=${index}`, animationDuration: 500, animationType: 'zoom-fade-out' }); }; ``` ### 五、如何启用wgt和apk两种方式的升级 ### pages.json ``` { "path": "components/update/index", "style": { "disableScroll": true, "backgroundColor": "#0068d0", "app-plus": { "backgroundColorTop": "transparent", "background": "transparent", "titleNView": false, "scrollIndicator": false, "popGesture": "none", "animationType": "fade-in", "animationDuration": 200 } } } ``` 组件 ``` ``` App.vue ``` import { onLaunch } from '@dcloudio/uni-app'; import { useRequest } from './hooks/useRequest'; import dayjs from 'dayjs'; onLaunch(() => { // #ifdef APP-PLUS plus.runtime.getProperty('', async app => { const res: any = await useRequest('GET', '/api/tv/app'); if (res.code === 2000 && res.row.version > (app.version as string)) { uni.navigateTo({ url: `/components/update/index?url=${res.row.url}&type=${res.row.type}&content=${res.row.content}`, fail: err => { console.error('更新弹框跳转失败', err); } }); } }); // #endif }); ``` 如果要获取启动参数 ``` plus.android.importClass('android.content.Intent'); const MainActivity = plus.android.runtimeMainActivity(); const Intent = MainActivity.getIntent(); const roomCode = Intent.getStringExtra('roomCode'); if (roomCode) { uni.setStorageSync('roomCode', roomCode); } else if (!uni.getStorageSync('roomCode') && !roomCode) { uni.setStorageSync('roomCode', '8888'); } ```