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

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

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

• 快应用官网
• 开发文档

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

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

0.环境搭建

1. 准备一个Android手机，否则等下无法测试，用Android模拟器或许也能够，没测试过。
2. 安装nodejs。这是如今基本必备的前端开发环境，去nodejs官网下载安装就好，快应用官方推荐版本是v6.11.3 LTS，另外，快应用官方提醒：不要使用8.0.*版本．这个版本内部ZipStream实现与node-archive包不兼容，会引发报错，我电脑里原本就有8.9的版本，懒得安装低版本了，跑流程应该是没问题的。
3. 安装hap-toolkit。这是快应用的命令环境，执行命令行npm install -g hap-toolkit(PS：我用windows，用cmd执行，Mac用本身的命令行执行工具就能够啦)
4. 测试命令环境是否成功，输入命令hap -V，能看到版本号就说明hap-toolkit安装成功了。

1.建立文件夹

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

2.建立模板工程项目

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

完成后长这样：

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

3.安装依赖包

切换到项目根目录，我是testPro，执行命令npm install，等待安装完便可，若是实在太慢能够使用国内镜像cnpm试试，具体本身去网上找找教程吧。

安装好的依赖都在node_modules目录下，通常不须要咱们去管。

4.编译打包

根目录执行命令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文件就是项目编译后的最终产出

5.安装调试器和预览平台

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

• 下载调试器 (连接失效就去官网下载)
• 下载预览平台 (连接失效就去官网下载)

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

6.运行第4步生成的rpk包

有两种方式：

• HTTP请求：开发者启动HTTP服务器，打开调试器，点击扫码安装配置HTTP服务器地址，下载rpk包，并唤起平台运行rpk包
• 本地安装：开发者将rpk包拷贝到手机文件系统，打开调试器，点击本地安装选择rpk包，并唤起平台运行rpk包

这里采用“HTTP请求”：

1. 执行命令npm run server -- --port 502
   端口能够自定义，执行npm run server会使用默认端口12306(好眼熟的样子)，至于我为何用502，不告诉你哈哈哈~
   完成后会生成一个HTTP地址和二维码，来看看cmd不忍直视的二维码，鄙视脸~
   (盗张图，侵删~)
   
   
   建议用vsCode打开项目，用终端执行生成，二维码会好看不少，vsCode也很好用。

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

   • 点击"扫码安装"，扫描终端窗口中的二维码便可完成配置（若扫描不成功，可在浏览器中打开页面：http://localhost:<your port>，扫描页面中的二维码）
   • 点击右上角menu --> 设置，输入终端窗口中提示的HTTP服务器地址
3. 配置完成后，若没有自动唤起平台运行rpk包，点击在线更新按钮便可，若提示安装失败，请检查执行npm run server的终端窗口是否正常运行。(在线更新按钮多点几回吧，可能会延迟)
4. 而点击开始调试按钮，则可打开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、微信小程序的综合体，至于有没有借鉴其余的框架什么的，做者见识有限，不清楚哈。

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