是前端还是Android？快应用 快速入门与初步分析

摘要：前阵子微信小程序的推出快速占据了桌面，手机厂商们坐不住了，为了抢回移动端应用分发入口，前几天中国通信院等协会联合小米华为等一众手机厂商共同发布了快应用。总的来说，这个文件就是微信小程序清单文件的混合体，用来描述应用和做一些基本配置。

前阵子微信小程序的推出快速占据了Android桌面，手机厂商们坐不住了，为了抢回移动端应用分发入口，前几天中国通信院等协会联合小米、华为、OPPO等一众手机厂商共同发布了“快应用”。

废话不说，先甩两个网址：

快应用官网

开发文档

文档是最权威的，建议大家在看完此文章后也去看看文档，在这里我给大家演示一个。

此文章适合不熟悉Android开发的前端工程师和不熟悉前端开发的Android工程师阅读。

准备一个Android手机，不然等下没法测试，用Android模拟器或许也可以，没测试过。

安装nodejs。这是现在基本必备的前端开发环境，去nodejs官网下载安装就好，快应用官方推荐版本是v6.11.3 LTS，另外，快应用官方提醒：不要使用8.0.*版本．这个版本内部ZipStream实现与node-archive包不兼容，会引起报错，我电脑里本来就有8.9的版本，懒得安装低版本了，跑流程应该是没问题的。

安装hap-toolkit。这是快应用的命令环境，执行命令行npm install -g hap-toolkit(PS：我用windows，用cmd执行，Mac用自己的命令行执行工具就可以啦)

测试命令环境是否成功，输入命令hap -V，能看到版本号就说明hap-toolkit安装成功了。

例如testhap，我用的是windows平台，所以就用cmd打开啦，Mac不用cmd差别应该也不大。

输入命令hap init
必须输入项目名(差评:人家npm init 可以使用当前目录的)，然后会提示Init your Project，直接回车就可以啦。

完成后长这样：

目录结构说明(截图内容来自官方文档)：

切换到项目根目录，我是testPro，执行命令npm install，等待安装完即可，如果实在太慢可以使用国内镜像cnpm试试，具体自己去网上找找教程吧。

安装好的依赖都在node_modules目录下，一般不需要我们去管。

根目录执行命令npm run build生成rpk包，这里可能会报错，例如 Cannot find module ".../webpack.config.js"，遇到了执行命令hap update --force即可，然后重新执行npm run build。

完成后会生产两个目录build、dist。

build：临时产出，包含编译后的页面js，图片等

dist：最终产出，包含rpk文件。其实是将build目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出

这是用来做调试的，是apk文件，即Android安装文件。

下载调试器 (链接失效就去官网下载)

下载预览平台 (链接失效就去官网下载)

必须两个都安装了，不然一个是按钮不能点击，一个是白板一片。

有两种方式：

HTTP请求：开发者启动HTTP服务器，打开调试器，点击扫码安装配置HTTP服务器地址，下载rpk包，并唤起平台运行rpk包

本地安装：开发者将rpk包拷贝到手机文件系统，打开调试器，点击本地安装选择rpk包，并唤起平台运行rpk包

这里采用“HTTP请求”：

执行命令npm run server -- --port 502
端口可以自定义，执行npm run server会使用默认端口12306(好眼熟的样子)，至于我为什么用502，不告诉你哈哈哈~
完成后会生成一个HTTP地址和二维码，来看看cmd不忍直视的二维码，鄙视脸~
(盗张图，侵删~)


建议用vsCode打开项目，用终端执行生成，二维码会好看很多，vsCode也很好用。

配置HTTP服务器地址
打开调试器(刚才安装在手机的那个软件) ，然后：(二选一)

点击"扫码安装"，扫描终端窗口中的二维码即可完成配置（若扫描不成功，可在浏览器中打开页面：http://localhost:，扫描页面中的二维码）

点击右上角menu --> 设置，输入终端窗口中提示的HTTP服务器地址

配置完成后，若没有自动唤起平台运行rpk包，点击在线更新按钮即可，若提示安装失败，请检查执行npm run server的终端窗口是否正常运行。(在线更新按钮多点几次吧，可能会延迟)

而点击开始调试按钮，则可打开chrome devtools调试界面，详见文档调试工具介绍，前端er应该不陌生。

到这里基本就算完了，详细的开发指南看这里。

现在我们来看看这个“快应用”是什么鬼，这里只是简单浏览一下，未作深入分析，可能有误。

先看看根目录结构：

disk、node_modules、以及package等等，不就是常见的前端项目文件夹和文件吗，至于build和src，前端和Android都很熟悉。

build目录里面看看：

这里是打包时生成的一些临时文件，js和map(源码映射文件)。manifest是什么呢，做Android开发的小伙伴都认识，清单文件啊这是，只是Android的是XML文件，这里的是JSON文件。

看看这个JSON文件里面：

包名、应用名、版本号、版本名、最低支持平台、应用图标都齐了。

继续看：

页面路由配置，有点像Vue，又不像，里面指定组件。

看看还有什么：

一些基本的页面配置，看起来像微信小程序的json配置文件，又不太像。

总的来说，这个manifest.json文件就是Vue、微信小程序、Android清单文件的混合体，用来描述应用和做一些基本配置。

dist目录：

打包后的输出目录，里面有一个rpk文件，嗯，Android打包后是apk文件，好暧昧的扩展名╮(╯▽╰)╭

node_modules目录：

这里都是npm安装后的依赖，类似于Android开发的jar包，里面的东西出了名的多，光刚才创建个基本项目就有700+的文件夹。

sign目录：

这是rpk包的签名模块，类似于Android里的签名文件，这里是调试时候用的，发布正式版估计也要使用另外的文件。

src目录：

跟build目录差不多，基本就是按src结构复制一份过去build。当然，这里的是ux文件，编译打包时会把src里面的ux文件抽取出来生成js文件，不知道可不可以分别抽取为js、css、html呢，没试过哈

ux文件里的内容：
这结构template、style、script目测跟vue一个样啊

剩下这堆就不说了：

总的来说，个人目测，这个“快应用”就是借鉴了Android、Vue、微信小程序的综合体，至于有没有借鉴其他的框架什么的，作者见识有限，不清楚哈。

如果你还想了解更多，去看官方文档哈，里面才是最权威的。