电视开发记录

1.连接电视：

• 电视开启开发者模式-并且打开USB调试

• 在类似\HBuilderX\update\backup\plugins目录下会有个adb.exe，如果没有，需要添加一个文件夹，里面有adb.exe、AdbWinApi.dll、AdbWinUsbApi.dll文件

• 在该文件夹下打开命令行，输入 .\adb connect 192.168.3.33（目标电视的ip地址）

2.打包发布到电视：

• 点击打包，生成一个打包文件，一般控制台会告诉你打开所在目录，如果没有，在unpackage/release/apk下能看到生成的文件
• 右击文件，点击安装到手机

3. 页面初始化加载

// 页面加载完成后立即初始化
window.onload = function() {
   // 调用接口
};

3.电视遥控器按键的编码

按键编号： 上：38， 下：40，左：37，右：39，确定：13

switch (keyCode) {
    case 38: // 上
       moveFocus('up');
       break;
    case 40: // 下
       moveFocus('down');
       break;
    case 37: // 左
       moveFocus('left');
       break;
    case 39: // 右
       moveFocus('right');
       break;
    case 13: // Enter
    case 23: // 确认键
       if (document.activeElement.classList.contains('canteen-item')) {
          selectCanteen(document.activeElement);
       } else if (document.activeElement.id === 'refresh') {
          getCmCarteenList('refresh');
       }
       break;
}

• demo

// 初始化键盘导航
		function initKeyboardNavigation() {
			// 如果已存在事件监听器，先移除
			if (keyboardHandler) {
				document.removeEventListener('keydown', keyboardHandler, true);
			}
			
			// 创建新的事件处理函数
			keyboardHandler = function(e) {
				if (isHandlingKeyEvent) return;
				
				const keyCode = e.keyCode || e.which;
				console.log('按键代码:', keyCode);
				
				// 阻止默认行为和事件冒泡
				e.preventDefault();
				e.stopPropagation();
				
				isHandlingKeyEvent = true;
				
				try {
					switch (keyCode) {
						case 38: // 上
							moveFocus('up');
							break;
						case 40: // 下
							moveFocus('down');
							break;
						case 37: // 左
							moveFocus('left');
							break;
						case 39: // 右
							moveFocus('right');
							break;
						case 13: // Enter
						case 23: // 确认键
							if (document.activeElement.classList.contains('canteen-item')) {
								selectCanteen(document.activeElement);
							} else if (document.activeElement.id === 'refresh') {
								getCmCarteenList('refresh');
							}
							break;
					}
				} finally {
					setTimeout(() => {
						isHandlingKeyEvent = false;
					}, 50);
				}
			};
			// 添加新的事件监听器
			document.addEventListener('keydown', keyboardHandler, true);
		}


// 移动按键
function moveFocus(direction) {
			const allItems = [...document.querySelectorAll('.nav-item')];
			if (allItems.length === 0) return;
			
			const current = document.activeElement;
			const currentIndex = allItems.indexOf(current);
			const columns = 4; // 每行4个按钮
			const totalItems = allItems.length;
			const lastRowStart = Math.floor((totalItems - 1) / columns) * columns;
			
			let nextIndex;
			switch(direction) {
				case 'up':
					// 向上移动一行
          if(currentIndex === 0) {
            nextIndex = allItems.length - 1
          } else if(currentIndex === allItems.length - 1) {
            nextIndex = allItems.length - 2
          } else if (currentIndex >= columns) {
						nextIndex = currentIndex - columns;
					} else {
						// 如果是第一行，则移动到最后一行的对应位置
						nextIndex = lastRowStart + (currentIndex % columns);
						// 如果最后一行的对应位置超出范围，则移动到最后一个元素
						if (nextIndex >= totalItems) {
							nextIndex = totalItems - 1;
						}
					}
					break;
				case 'down':
					// 向下移动一行
					if(currentIndex === totalItems - 2) {
            nextIndex = totalItems - 1
          } else if(currentIndex === totalItems - 1) {
           nextIndex = 0
          } else if (currentIndex + columns < totalItems - 1) {
						nextIndex = currentIndex + columns;
					} else {
						// 如果是最后一行，则移动到第一行的对应位置
						nextIndex = currentIndex % columns;
					}
					break;
				case 'left':
					// 向左移动一个位置
					if (currentIndex === 0) {
						nextIndex = totalItems - 1;
					} else {
            nextIndex = currentIndex - 1;
					}
					
					break;
				case 'right':
					// 向右移动一个位置
					if (currentIndex === totalItems - 1) {
            nextIndex = 0;
					} else {
            nextIndex = currentIndex + 1;
					}
					break;
			}
    // 通过focus 以实现选中效果，否则，选中效果不明显
			allItems[nextIndex].focus();
		}

• 定义选中效果

			/* 电视焦点样式 */
			.focusable:focus {
				/* transform: scale(1.05); */
				box-shadow: 0 0 10px rgba(11, 77, 28, 0.7);
				transition: all 0.2s ease;
				border-radius: 5px !important;
			}

4. 调试

移动端调试方案