注：ExtScreen（快应用）框架就是前面说的扩展屏框架，改框架加入快应用联盟后更名为快应用。

　　建立开发环境

　　1）安装编辑工具：官网推荐了三款编辑器，VS Code 、 WebStorm 或者、编辑器。个人可以根据习惯选择编辑工具，本文推荐使用VS Code。更轻量、并且对于Vue代码编写比较友好。

Download Visual Studio Code - Mac, Linux, Windows

　　Download Visual Studio Code - Mac, Linux, Windowscode.visualstudio.com/Download

　　2）安装Vue开发环境：ExtScreen的语法是类vue的，有uniapp相关开发经验的同学可以比较好的理解ExtScreen的框架形态，这里第一步我们先配置Vue环境。前端同学可以跳过该部分内容。

　　第一步安装Node：这里建议不要下载最新版本，编辑本文时最新版本为20.3。在实际开发中，建议使用14-16版本的，以更好兼容其他项目（过高版本的node和一些三方项目的依赖会产生冲突）。或者使用npx工具进行多版本的node管理。

下载 | Node.js 中文网 (nodejs.cn)

　　下载 | Node.js 中文网nodejs.cn/download/第二步安装配置 npm：新版的Node.js已经集成了npm，所以安装Node的同时也安装好了npm。

　　检查npm是否安装成功

　　npm -v

　　npm设置淘宝镜像：修改淘宝镜像的目的是为了后续改造demo的时候可能会用到一些三方库。我们这里提前先配置好。

　　查看当前镜像源

　　npm config get registry

　　配置 npm 为淘宝镜像

　　npm config set registry https://registry.npm.taobao.org

　　报错处理1.系统禁止脚本运行 说明 powerShell 没有管理权限 需要设置管理员权限

　　1.1搜索powershell窗口 以管理员身份运行

　　1.2输入指令set-ExecutionPolicy RemoteSigned 回车

　　1.3输入 A 回车

　　2.安装完成如果使用的时候报错 说明下载被拦截 关闭 电脑管家防火墙

　　第三步 安装Android开发环境

　　1）下载并安装Android Studio。

　　运行Android Studio并进入Android Studio Setup Wizard，这会安装最新的Android SDK， Android SDK Platform-Tools 以及Android SDK Build-Tools，这些都是在开发扩展屏快应用时所需要的。

　　这里可以自行百度。

　　2）配置 PATH 环境变量

　　右击我的电脑→属性→高级系统设置→环境变量。

　　新建系统变量ANDROID_HOME，路径(根据自己安装的SDK位置自行更改)。

　　系统变量下编辑Path，新建环境变量

　　%ANDROID_HOME%\platform-tools //使用ADB命令配置

　　%ANDROID_HOME%\tools

　　%ANDROID_HOME%\build-tools\33.0.2 //使用aapt,xl 等工具

　　adb命令测试，win+R，输入cmd，命令行窗口输入adb verison，显示版本等信息表示配置成功。

　　如果出现：‘adb’ 不是内部或外部命令，也不是可运行的程序

　　或批处理文件。请检查环境变量配置。

　　3）配置 Android 设备

　　真机。在 Android 设备上运行或测试扩展屏快应用之前，你需要一个运行 Android 4.1（API 版本 16） 或者更高的Android系统电视或者机顶盒设备。在设备上打开 Developer options 和 USB debugging 选项，你可以在 Android documentation 上查看更详细的方法介绍。

　　通过 adb connect 设备ip地址 连接设备和电脑，如果在设备上弹出需要授权弹窗，允许授权以便让电脑能够访问你的开发设备。

　　adb connect XXX（将XXX替换为您的设备IP）

　　在命令行中，使用 adb devices 命令来确保能够识别出你所连接的 Android 设备。

　　adb devices

　　模拟器（初学推荐）

　　请注意，模拟器不能完全使用拓展屏框架的API，它只能协助你实现大多数的UI功能，对于初学者来说，这是一个了解学习框架比较平滑的途径，但在实际开发中，模拟器无法完全模拟设备现象。

　　这里可以使用Android Studio里的模拟器，或者下载三方游戏模拟器如：（夜神）等。可以满足最基本的demo使用。

　　4）安装扩展屏运行环境（重要）

　　如果把扩展屏应用理解成网站，则runtime就是运行网站所需要的浏览器，可根据实际需求下载安装runtime来进行开发调试。

　　注意: release版本不输出log，调试查看log时务必安装debug版本

历史版本 | 快应用 (extscreen.com)

　　这里我们直接下载debug版本应用，拖拽到模拟器中。将自动安装

　　5）配置扩展屏运行环境

　　这里的教程与官网稍有不同，上面有一串黄色的错误，表明我们并没有正确链接。由于分辨率的影响，下面命令中的–es实际上为两个-组成。

　　adb shell am broadcast -a  com.extscreen.runtime.ACTION_CHANGE_DEBUG_SERVER --es ip 192.168.xx.xx(电脑IP地址)

　　提示服务可用。

　　如果设置完地址后，还是提示服务不可用，可以排查下:

　　电脑能否ping通电视IP

　　npm run debug 的终端有没有关闭或停止运行

　　注意：扩展屏调试APP显示“电脑调试地址：192.168.x.x，并toast提示服务可用，则配置成功。这样每次打开运行环境的时候都会检测配置的电脑 地址是否可用，并给出响应的提示。

————————————————

　　版权声明：本文为CSDN博主「木斯佳」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

　　原文链接：TV快应用系列——1.ExtScreen框架快速入门-CSDN博客

责任编辑：房家辉