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

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

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

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

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

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

快速开始

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

快应用开发工具入门介绍

开发调试

新建项目

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

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

代码编辑预览

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

ux 文件语法辅助

Eslint 语法检测

预览调试

在开发过程中,快应用的运行效果会在主界面右侧的 模拟器 中显示。由于模拟器尚未支持全部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,若您有什么疑问,能够向我们反馈问题,在提交之前,可以先检索,以避免重复提交。

快应用开发工具入门介绍
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 141,558评论 1 298
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,739评论 1 254
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,327评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,752评论 0 174
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,452评论 1 252
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,617评论 1 171
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,286评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,083评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,839评论 6 227
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,413评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,186评论 2 213
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,506评论 1 223
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,171评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,049评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,417评论 3 202
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,588评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,942评论 0 163
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,392评论 2 228
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,499评论 2 229

推荐阅读更多精彩内容