2018年3月，小米、中兴、华为等10家厂商成立快应用联盟，联合发布了快应用的标准。从此可以采用一套标准开发应用，在各个手机厂商上无缝运行。一次开发，一次上传，并自动分发到所有联盟制造商的设备。
根据快应用官方的说法，快应用是前端技术栈开发的。本文从一个前端开发者的角度介绍如何开发fast应用，以及如何快速入门。
什么是快速应用？
快应用是基于手机硬件平台的新型应用形态，标准由主流手机厂商组成的快应用联盟共同制定。fast应用标准的诞生，将在RD接口、能力接入、开发者服务等方面搭建一个标准平台。以平台化的生态模式向个人开发者和企业开发者的所有品类开放；该应用程序具有传统应用程序的完整应用程序体验，无需安装即可使用。
fast应用程序的技术特征包括:
采用前端技术栈，运营开发效率高，学习成本低，代码可重用。原生渲染能力，功能齐全，体验等同应用，资源消耗低。
从上面，我们可以了解到:
1.快应用不是HTML5，但是可以利用现有的前端技术栈直接开发；
2.快应用是原生渲染，比H5功能更全，体验更原生；
3.快速应用意味着即点即用，无需安装。
快速应用与HTML5开发
首先，我们来回顾一下，它在一个Web项目中是如何开发的？
简单来说，可以分为以下九个步骤:
获取PSD设计图纸；切图；将PSD转换成HTML；写JS业务逻辑；模拟数据，自测；与后端联合调试；提交测试；上线；迭代和优化。
如下图所示:
做过前端的同学应该很熟悉这一步。快应用的开发步骤与此类似，主要有两点不同。让我们来比较一下:
HTML5开发是基于浏览器的，直接写完就可以在浏览器下运行，看看效果。但是快速的应用开发是基于NodeJS环境的，所以我们首先需要搭建一个开发环境；在将PSD转换为HTML时，Fast Application提供了一个脚手架。当然，HTML5中的一些项目也有脚手架，比如Vue和React项目。官员们提供了一个脚手架来促进开发商的发展。
如下图所示，以下是fast应用的开发流程:
本文从搭建环境、使用hap-toolkit、编写静态页面、编写JS业务逻辑、调试五个方面论述了如何开发快速应用。其他步骤在HTML5开发中很常见。就像HTML5一样，直接迁移就好了。
1.构建开发环境。
Fast应用开发基于前端技术栈，官方团队提供基于NodeJS的开发环境。请参考官网的详细教程。
主要是:
NodeJSHap-toolkit编译器:快速应用程序调试器和快速应用程序预览。
当然，快应用官方也提供了一个IDE，你也可以直接安装一个IDE。
2.hap工具包的使用
安装hap-toolkit后，可以在控制台输入hap -v查看当前版本。
的最新版本是0.1.1。
以下是hap-toolkit的一些常见用法:
请参考:https://doc.quickapp.cn/tools/toolkit-tools.html.
3.静态页面编写
快速应用程序提供组件和指令，以促进PSD到HTML的转换。
01.成分
fast应用程序中的组件类似于Vue中的组件。fast应用程序可以组织成一个嵌套的组件树，如下图所示:
组件分类:
原生组件；定制组件。
当页面的业务逻辑变得复杂时，需要将页面拆分成多个模块来完成解耦。因此，fast application提供了自定义组件的能力，定义自定义组件与开发页面一致。
文字，p等。是原生组件，由各平台的原生底层渲染；自定义组件是由开发人员编写的组件。它的用法与Native相同，最后根据组件的。页面也是一个自定义组件。自定义组件和页面组件的区别在于有一个额外的props属性，用于声明组件可接受的外部数据传输。props是一个数组，数组中的每个元素都是暴露的属性名。如果属性名是hump定义的，比如:prop2Object，那么对外传输数据时请使用-connection，比如:prop 2 object；用户自定义组件通过标签引入，比如:父子组件可以通过事件进行通信，兄弟组件可以通过发布/订阅模型进行通信。有关详细信息，请参考文档。
02.指令
指令是框架为组件定义的特殊属性，是框架提供的特殊组件，用于定制页面DOM结构呈现逻辑。
说明主要包括:
注意:
当for循环自定义变量表示for指令的数组索引和数组元素时，变量名不能以$或_开头；If/elif/else节点必须是相邻的同级节点。
4.JS业务逻辑的编写
Fast JS采用ES6语法标准，支持ES6特性。这里有两个方面:生命周期和事件机制。
01.生存期
生命周期的概念是现代前端开发的重要基础。在fast应用中，页面的生命周期指的是ViewModel的生命周期。整个页面生命周期如下:
APP可以同时运行多个页面，但是一次只能显示一个页面。
2.事件机制
和HTML5一样，fast应用中也有事件机制。
On用于侦听自定义事件；关，解除相应的事件监控；触发$emit、$dispatch、$broadcast等事件。，其中$dispatch向上传递，$broadcast向下传递；原生组件支持一系列事件，比如通用事件和特定于组件的事件，on+事件名称用作组件属性来监控事件。
5.试车
不同于传统的前端开发，快应用运行在厂商联盟的手机上。所以官方提供调试工具。
开发人员可以通过快速应用程序调试器调试快速应用程序。类似Chrome的调试工具。快速应用调试目前支持chrome devtools中的元素、控制台、源码、网络等模块。
使用chrome devtools进行调试:
性能优化
性能优化是前端永恒的主题。性能优化包括两大类:
普遍的解决方案，这是普遍的；结合具体组件的解决方案，比如组件级的懒加载，甚至利用组件本身的特性进行优化。
建议开发人员了解常用的性能优化方案，以提高应用程序的性能。
1.简化视图模型的数据
在ViewModel的定义中，属性public、protected和private主要负责数据驱动的数据定义和转换，会递归定义被赋值数据中的每个属性。因此，属性数量的定义越少越好，尤其是对于数组类型的数据。建议过滤掉不必要的对象属性。
例子如下:
如果页面只需要使用列表中每一项的userId和orderName属性，那么只需要将这两个属性赋给ViewModel数据，过滤掉不相关的属性。
//模拟fetch请求返回的数据const order list = [{userid:' 123 '，ordername:' XX product '，userName:'张三'，shoppinglist: [{productid:' 001 '，productlink:' http://XXX '，Shop: {ownerid:' 2390 '，ownername:' XXX shop'}}，{/...}]导出默认{private: {list: []}，on init {//返回页面中需要的对象属性，过滤掉无用的对象属性this.list = orderList.map }}。
2.后代选择器的合理使用
在CSS框架中支持后代选择，支持少预编译，方便开发者开发，提高代码可维护性。但是过度使用后代选择器也会带来节点匹配的性能损失，尤其是当一个节点满足多个选择时。
优化建议如下:
避免使用组件名称作为后代选择的最后一个匹配规则，例如:。文档-页码#商店文本{...};否则，每个文本组件将在呈现时遍历一次匹配；减少后代选择的等级数。级别越深，单个匹配所需的时间越长，例如:. class 1 . class 2 . class 3 . class 4 . class 5 . class 6 {...};后代选择中最后一个匹配规则的定义名称应该尽可能唯一，例如:。doc-page # shop . shop-item . shop-name-full {...}.
3.使用延迟加载。
惰性加载是一种通用的优化方法。在传统的H5页面中，图片的延迟加载意味着当页面将要滚动到屏幕的可视区域时，资源被加载并且页面被呈现。
在框架中，还可以使用惰性加载技术:为了加快页面可见区域的渲染速度，可以通过指令或者事件触发的方式延迟不可见区域的渲染。
参考文件:
快速应用程序开发教程:https://doc.quickapp.cn/tutorial/sample项目:https://github.com/quickappcn/sample
