CSDN资讯

如何从 HTML5 快速转型快应用？

2018年3月份，由小米，中兴，华为等10家厂商成立了快应用联盟，共同发布了快应用的标准。自此我们可以采用一套标准去开发应用，而无缝的运行在各个手机厂商上。一次开发，一次上传，自动分发到所有联盟厂商的设备。

根据快应用官方的说法，快应用是采用前端的技术栈来开发的，这篇文章以一个前端开发者的角度，来介绍怎么开发快应用，快速入门快应用的开发。

什么是快应用？

快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定；
快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放；
快应用具备传统APP完整的应用体验，无需安装，即点即用。

快应用的技术特点包括：

采用前端技术栈，运行和开发效率高，学习成本低，代码可以复用；
原生渲染能力，功能完备，体验等同于应用，资源消耗小。

从上面我们可以了解到：

1、快应用不是HTML5，但是可以用前端已有技术栈直接上手开发；

2、快应用是原生渲染，有着比H5更加完备的功能及原生体验；

3、快应用即点即用，无需安装。

快应用 vs HTML5开发

首先，我们来回顾一下，在Web项目中是怎么进行开发的？

简单的说下，可以分为以下9个步骤：

拿到PSD设计图；
切图；
将PSD转成HTML；
写JS业务逻辑；
mock数据，自测；
与后端联调；
提交测试；
上线；
迭代与优化。

如下图所示：

做过前端的同学对这个步骤应该很熟悉了，快应用的开发步骤和这差不多，主要有2点差别，我们来比较一下：

HTML5开发是基于浏览器的，直接写完后在浏览器下就可以运行，看效果。但是快应用开发是基于NodeJS环境的，所以我们开始需要搭建一下开发环境；
在将PSD转成HTML的时候，快应用提供了一个脚手架，当然HTML5的一些项目里面也有脚手架，比如Vue、React项目，官方都提供了一个脚手架，方便开发者进行开发。

如下图所示，下面是快应用的开发过程：

下面从搭建环境、hap-toolkit的使用、静态页面书写（PSD转成HTML）、JS业务逻辑的书写、调试这5个方面来说说如何开发快应用。其他的步骤都是HTML5开发常见的步骤，和HTML5一样，直接迁移过来就行。

1、搭建开发环境

快应用开发是基于前端技术栈的，官方团队提供了基于NodeJS的开发环境，可以参考官网的详细教程。

主要是：

NodeJS（推荐 Node 8以上版本）；
hap-toolkit 编译工具；
快应用调试器和快应用预览版（方便调试和查看效果）。

当然快应用官方也提供了IDE，也可以直接安装一个IDE。

2、hap-toolkit的使用

安装好hap-toolkit后，可以在控制台输入hap -v 看看当前的版本。

当前的最新版本是0.1.1。

下面是hap-toolkit的一些常见用法：

具体可以参考：https://doc.quickapp.cn/tools/toolkit-tools.html。

3、静态页面书写

快应用提供了组件和指令，方便PSD转化成HTML。

01.组件

快应用中组件与Vue中组件类似，一个快应用，可以组织为一个嵌套的组件树，如下图所示：

组件分类：

原生组件；
自定义组件。

当一个页面的业务逻辑变得复杂时，就需要将页面拆成多个模块，完成解耦。所以，快应用提供了自定义组件的能力，定义自定义组件与开发页面一致。