快速开始开发

创作时间:

作者:

@小白创作中心

快速开始开发

引用

来源

https://doc.quickapp.cn/tutorial/overview/quick-start.html

快速开始开发

本文将从下载 IDE、新建项目、安装依赖、调试项目、发布项目、常见问题等方面入手，让您学习后，可以快速开始开发快应用。
通过本节，你将了解到以下内容:

下载 IDE

快应用官网推荐使用开发者工具（IDE）开发，它专为快应用开发设计，支持快应用、卡片等开发和调试；编译预览、打包上传、云测、远程预览、生成骨架屏等功能，一应俱全；
另外，还支持账号登录，应用关联，查看详情等；快应用 IDE 旨在：让开发者能够更高效开发、调试、测试以及发布快应用（IDE 下载地址）。
安装最新版快应用开发工具（IDE）, 即可开发快应用。以下是开发环节的基本流程：

新建项目

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

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

安装依赖

如果您基于官方模版，创建新项目，需要先安装依赖，才能正常运行。您可以使用
yarn
或
npm i
命令，在终端运行来安装依赖。
在 IDE，我们提供了更加方便的方式，如下图示，只要点击「安装依赖」按钮，即可。安装完毕之后，触发「重新启动编译」按钮，即能重新编译；之后编写代码，就能在预览区实时查看效果，而无需其他任何操作。

开发调试

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

本地预览

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

真机调试

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

远程真机预览

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

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

上传发布

上传至包管理平台

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

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

上传至官网

在开发完成之后，若您想发布上线该快应用，可以通过快应用开发工具的「上传」功能，将其上传至官网的开发者中心，后续可在官网按照流程填写相关信息后，发布上线快应用（当然，您也可以在后台，手动提交 RPK 包）。
若想实时在开发工具中查看官网正在审核的快应用状态，可使用顶部的「关联快应用」功能，关联之后，点击「详情」，可查看上传之后的快应用信息。
备注：上传后，提交审核，详情请参见快应用上传发布流程。