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

Luogjy
前阵子微信小程序的推出快速占据了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、微信小程序的综合体,至于有没有借鉴其他的框架什么的,作者见识有限,不清楚哈。

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

阅读 6.3k

Luogjy的一亩三分地
啊~被玩坏了
37 声望
0 粉丝
0 条评论
你知道吗?

37 声望
0 粉丝
文章目录
宣传栏