快应用开发工具，入门详解

前言：快应用开发工具，是一款专为快应用开发设计的应用，简单易用、灵活扩展、并能够全面支持联盟标准规范。

微注：本文首发于 vivo 快应用开发博客 - 快应用开发工具入门介绍。

在理想状态下，开发者应当已经熟悉 Web 前端基础知识。下列途径有助您更好了解如何开发快应用前端应用：

• 了解快应用的 框架 、组件 、接口 、平台 和 其他
• 参考快应用 sample ，其中包含绝大部分组件与 API 的示例代码与运行效果，可被用作从入门到进阶的百科全书。
• 推荐使用一套丰富完整的组件库 Apex-UI，可以安装即用，提供了多达 50+ 的组件，帮助开发者快速开发快应用。

下面，我们就循序渐进对快应用 IDE 做下介绍，使得您可以参考之，从而快速入门使用。

快速开始

安装最新版快应用开发工具 , 快应用的开发工作在 IDE 中展开。以下是开发环节的基本流程：

快应用开发工具入门介绍

开发调试

新建项目

可供新建的项目分为两类：快应用或卡片。新建方法如下：

1. 点击菜单栏「新建快应用工程」、「快捷入口」、「新建快应用工程」、或者「欢迎页新建工程」 ，打开新建工程界面；
2. 点击下一步 ，填写项目名称、项目路径、应用名称和应用包名，点击完成 ，快应用开发工具会在项目路径下新建改项目并自动打开；
3. 新建卡片工程步骤，与新建快应用项目相同；界面展示如下截图：

快应用开发工具入门介绍

代码编辑预览

快应用基于前端技术栈，类比 Vue 实用 .vue 充当文件后缀，快应用实用 .ux；IDE 专门有对具体代码做处理，使得可以对这类语法提供支持和 Eslint 检测；具体参考如下说明：

ux 文件语法辅助

• ux 文件的自动补全功能
• ux 文件定义跳转
• 文件链接跳转
• ux 文件悬浮提示

Eslint 语法检测

• 如何开启 hap-eslint 功能
• 如何 enable 或 disable 某条规则
• 如何使用命令行对整个项目进行校验

预览调试

在开发过程中，快应用的运行效果会在主界面右侧的 模拟器 中显示。由于模拟器尚未支持全部API，因此您还需要使用真机来预览与调试快应用的实际运行情况。

本地预览

在你身边没有手机的时候，可以通过快应用开发工具的本地预览功能，查看代码的运行效果。右侧模拟器中的显示的内容为快应用编译之后的效果，对应调试器的面板定制了 UX 面板：它展示预览的 Dom 结构以及样式，支持实时修改样式规则、命名以及元素属性；定制了 Data面板：展示页面数据，主要指 .ux 文件中的 private、protected、public 字段，可以根据自己的需要，开启自动刷新。

快应用开发工具入门介绍

真机调试

若需要真机调试，请插上数据线、连上手机并打开手机 USB 调试，在开发工具提示连接成功之后，点击顶部工具栏 USB 调试 ，若手机未安装快应用的引擎和调试器，开发工具会自动帮您安装到手机上，只需在手机上确定安装该应用。安装成功之后，会自动打开调试器，并调起正在开发的快应用，可以在新的 DevTools 的面板上进行调试以及查看 log 信息。

快应用开发工具入门介绍

远程真机预览

若没有手机，又想要查看真机上的运行效果时，「远程预览」功能是一个不错的选择。如何使用步骤如下：

1. 点击模拟器上方的远程预览按钮，若未安装插件，请选择安装远程真机插件；
2. 安装成功之后，继续选择远程预览并选择平台进行登录；
3. 登录成功之后，出现可以使用的机型列表；
4. 选择想要的机型，点击使用，开发工具将自动上传 RPK 到远程真机上，并调起调试器，可以直接看到真机上的真实效果。后续可手动点击上传预览按钮，查看效果；

快应用开发工具入门介绍

上传发布

上传至包管理平台

开发完成之后，若您想分享开发的快应用给别人使用，但又想要不局限于局域网内的访问，可以将 RPK 包上传至包管理平台，可以方便地帮助您解决这个苦恼，如何上传至包管理平台步骤如下。

1. 点击顶部工具栏的「打包 」按钮，快应用开发工具将自动生成 release 签名的包，若无签名，会索引您添加签名。
2. 打包成功之后，可以点击弹窗的「上传包管理平台 」按钮，开发工具会将打出来的 RPK 包上传至包管理平台，若未登录，需先登录 官网账号。
3. 上传成功之后，会出现一个二维码和包管理平台的链接，您可使用调试器的扫码功能，打开此快应用。

快应用开发工具入门介绍

上传至官网

在开发完成之后，若您想发布上线该快应用，可以通过快应用开发工具的「上传」功能，将其上传至官网的开发者中心，后续可在官网按照流程填写相关信息后，发布上线快应用。若想实时在开发工具中查看官网正在审核的快应用状态，可使用顶部的「关联快应用」功能，关联之后，点击「详情」 ，可查看上传之后的快应用信息。

[站外图片上传中...(image-102a0f-1597225367933)]

在了解了基本的功能之后，若想更进一步玩转快应用开发工具，以下功能能够使您锦上添花。

体验增强

编译模式

使用编译模式，可配置编译的启动页面和启动参数，方便调试页面，支持导入和导出编译模式。

快应用开发工具入门介绍

插件功能快捷入口

有些内置功能，如：新建快应用功能；或者插件携带功能如：一键转微信小程序至快应用。为了方便您简易使用和开发这些功能，特此在侧边栏，注入快捷入口。

快应用开发工具入门介绍

意见反馈

侧边栏的「反馈」按钮，可上传 issue 到 GitHub，若您有什么疑问，能够向我们反馈问题，在提交之前，可以先检索，以避免重复提交。

快应用开发工具入门介绍