本文将从下载 IDE、新建项目、安装依赖、调试项目、发布项目、常见问题等方面入手,让您学习后,可以快速开始开发快应用。
通过本节,你将了解到以下内容:
快应用官网推荐使用开发者工具(IDE)开发,它专为快应用开发设计,支持快应用、卡片等开发和调试;编译预览、打包上传、云测、远程预览、生成骨架屏等功能,一应俱全;
另外,还支持账号登录,应用关联,查看详情等;快应用 IDE 旨在:让开发者能够更高效开发、调试、测试以及发布快应用(IDE 下载地址)。
安装最新版快应用开发工具(IDE) , 即可开发快应用。以下是开发环节的基本流程:
可供新建的项目分为两类:快应用或卡片。新建方法如下:
欢迎页
「新建工程」、或菜单栏
「新建快应用工程」、或快捷入口
处「新建快应用工程」,打开新建工程界面;如果您基于官方模版,创建新项目,需要先安装依赖,才能正常运行。您可以使用 yarn
或 npm i
命令,在终端运行来安装依赖。
在 IDE,我们提供了更加方便的方式,如下图示,只要点击「安装依赖」按钮,即可。 安装完毕之后,触发「重新启动编译」按钮,即能重新编译;之后编写代码,就能在预览区实时查看效果,而无需其他任何操作。
在开发过程中,快应用运行效果,会在主界面右侧的模拟器中显示。由于模拟器尚未支持全部 API,因此您还需要使用真机来预览,来调试快应用的实际运行情况。
在你身边没有手机的时候,可以通过快应用开发工具的本地预览功能,查看代码的运行效果。
右侧模拟器中的显示的内容为快应用编译之后的效果,对应调试器的面板定制了 UX 面板:它展示预览的 Dom 结构以及样式,支持实时修改样式规则、命名以及元素属性;
定制了 Data 面板:展示页面数据,主要指 .ux
文件中的 private、protected、public 字段,可以根据自己的需要,开启自动刷新。
若需要真机调试,请插上数据线,连上手机并打开手机 USB
调试,在开发工具提示连接成功之后,点击顶部工具栏 「USB 调试」 ;
若手机未安装快应用的引擎和调试器,开发工具会自动帮您安装到手机上,只需在手机上确定安装该应用。
安装成功之后,会自动打开调试器,并调起正在开发的快应用,可以在新的 DevTools 的面板上进行调试以及查看 log 信息。具体效果,如下图所示:
若没有手机,又想要查看真机上的运行效果时,「远程预览」功能是一个不错的选择。如何使用步骤如下:
开发完成后,若您想分享开发的快应用给别人使用,但又想要不局限于局域网内访问,可以将 RPK 包上传至包管理平台,可以方便地帮助您解决这个苦恼,如何上传至包管理平台步骤如下:
在开发完成之后,若您想发布上线该快应用,可以通过快应用开发工具的「上传」功能,将其上传至官网的开发者中心,后续可在官网按照流程填写相关信息后,发布上线快应用(当然,您也可以在后台,手动提交 RPK 包)。
若想实时在开发工具中查看官网正在审核的快应用状态,可使用顶部的「关联快应用」功能,关联之后,点击「详情 」,可查看上传之后的快应用信息。
备注:上传后,提交审核,详情请参见快应用上传发布流程。
为方便开发者,能及时解决些常见问题,有开发并维护快应用常见问题网站,旨在:汇聚快应用常见问题,包含调试器、IDE、以及引擎、登录、支付等,统一梳理、解答,从而更好服务开发者。
并且,有在 IDE 欢迎页、意见反馈侧边栏等添加了访问入口。争取您可以更加方便了解 IDE 最新动向。