使用 JavaScript 开发原生 tvOS 应用

dddd

前言

Apple 于今年秋季发布了新版的 Apple TV,也带来了 iOS 开发者一直期盼的全新电视操作系统 — tvOS,正如 iPhone 的成功,Apple 从根本上就坚信基于应用的电视体验才是未来。tvOS 脱胎于 iOS,但又是一个完全独立的操作系统,拥有独立的 App Store。

官方提供了两种解决方案开发 tvOS 应用:

本文将介绍如何使用 TVML 和 TVJS 开发 一个 Client/Server App。

环境准备

SDK 介绍

先介绍 SDK 的组成:

下图是 C/S App 的应用架构:

使用 JavaScript 开发原生 tvOS 应用

让我们开始吧~

准备 Web Server

进入工作目录,先初始化一个 Midway 项目:

midway init //选择经典的 `Midway(koa) + BDO + Render + Security` 即可 // ... 等待依赖安装完成 midway start // 启动应用 

打开 http://localhost:6001/,如果显示 Midway 欢迎页面就是说明 Server 环境 ok 啦。

我们需要做一些定制,主要用来请求远程数据和创建 TVML 模板。

好了,我们的服务端就搭建完成啦~

准备 Native 容器

使用 JavaScript 开发原生 tvOS 应用
使用 JavaScript 开发原生 tvOS 应用

应用流

TVML

WWDC 视频合集

我们了解了 C/S App 的大致工作原理后,就可以开发更复杂的应用啦。这里我们实现一个历届 WWDC 视频播放的 App。

列表

播放视频

接下来就可以继续实现播放视频功能了,首先让我们实现 cell 的点击事件。

在 main.js 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
App.onLaunch = function() {
getDocument('http://localhost:6001/', function(error, doc) {
navigationDocument.pushDocument(doc);

// 添加下面的内容
// 点击事件
doc.addEventListener('select', function(event) {
var ele = event.target;
// 获取视频地址
var videoURL = ele.getAttribute('data-video-url');
if (videoURL) {
var player = new Player();
var playlist = new Playlist();
var mediaItem = new MediaItem("video", videoURL);

player.playlist = playlist;
player.playlist.push(mediaItem);
player.present();
};
})
});
}

再次重启 Midway,重启应用,点击视频,哇咔咔,done

结尾

C/S App 技术 是 Apple 第一次在自己的类 iOS 系统中推出的 使用 web 技术开发 native 应用 的解决方案。我们也期待 Apple 早日将这一技术带入 iPhone 和 iPad,正如 React Native 一样,这样的技术将会给我们的业务开发带来巨大的变革。本文只是做了一些基础的讲解和开发框架探索,更深入的学习可以参考 Apple 的官方文档: