快应用学习:环境搭建和主要目录,文件

1. 快应用学习前景

快应用是一种新的应用形态，以往的手机端应用主要有两种方式：网页、原生应用；网页无需安装，却体验不是很好；原生应用体验流畅，却需要从应用商店下载安装，难以一步直达用户；快应用的出现，就是希望能够让用户无需下载安装，并且还能流畅的体验应用内容。

为了达到上面的目标，快应用建立一种新的语言开发规范，同时提供一系列的开发套件辅助支持。简单来说，开发者主要利用前端知识与技能，以及对应的IDE，手机设备就可以做原型的开发。快应用使用前端技术栈开发，原生渲染，同时具备H5与原生应用的双重优点，开发者使用的前端技术栈资料多，学习成本低。

2018年3月份，由小米，OPPO，VIVO，华为等10家国内主流厂商成立了快应用联盟，从技术规范层面做了统一，并保证了开发者开发的快应用可以直接在所有的联盟内厂商的手机设备上运行。

快应用框架深度集成进各手机厂商的手机操作系统中，可以在操作系统层面形成用户需求与应用服务的无缝连接，很多只用在原生应用中才能使用的功能，在快应用中可以很方便的实现，享受原生应用体验，同时不用担心分发留存等问题，资源消耗也比较少。

对于每台手机设备，应用可以从多个系统入口，引用用户体验产品。比如：全局搜索、负一屏、浏览器搜索等。

1.1 快应用较于小程序的优势

与小程序一样，快应用具备H5页面的功能动效开发、原生应用功能点完整的双重优点，不用安装，即点即用。在独立app基数日益增长的今天，快应用给用户减压的同时还带来体验的便利性。

相比于小程序，快应用的优势在于，依靠厂商的流量扶持可以快速崛起。

对B端用户来说，快应用给他们提供了另一个输出自己品牌价值与信息的渠道，一定程度上避免了开发者在微信环境下的诸多限制而带来的掣肘。

对C端用户（尤其是安卓端用户）来说，快应用的存在使得用户的体验环境更多元化。并且快应用支持对手机的原始功能吊起如添加日程、换铃声等，是可供开发者及用户探索的一片净土。

2. 环境搭建

首先,来几个常使用的网址:
快应用官方文档
 W3C快应用学习网址
 菜鸟教程NPM使用介绍

需安装8.0以上版本的 NodeJS (建议使用 10.0+ 以上)，请从NodeJS 官网下载.
请注意：hap-toolkit@0.3 及其以后的版本不再支持 NodeJS v8.0 以下的版本)
手机安装调试器

调试器是一个 Android 应用程序，下载调试器 APK 详见资源下载

在手机上安装并打开调试器，按钮功能如下：

扫码安装：配置 HTTP 服务器地址，下载 rpk 包，并唤起平台运行 rpk 包
本地安装：选择手机文件系统中的 rpk 包，并唤起平台运行 rpk 包
在线更新：重新发送 HTTP 请求，更新 rpk 包，并唤起平台运行 rpk 包
开始调试：唤起平台运行 rpk 包，并启动远程调试
注意：若打开调试器无法点击按钮，请升级手机系统到最新版本或安装平台预览版

安装 toolkit
hap-toolkit 为开发编译工具

通过 npm 仓库安装，在命令行中执行以下命令：

npm install -g hap-toolkit

在命令行中执行hap -v会输出版本信息表示hap-toolkit安装成功，如下命令所示：

hap -v

image.png

3. 创建一个hellowWorld项目

终端cd到你想创建的文件夹路径下,输入:(testDemo为项目名)

hap init testDemo
显示:? Init your project testDemo,直接回车就行(这里可以更改项目名)
添加依赖,cd到testDemo文件夹路径下,输入:

npm install

依赖添加成功以后,会出现一个node_modules文件夹,里面为添加的依赖:

image.png

手动编译项目:在项目的根目录下,也就是testDemo所在的文件夹运行:

npm run build

build操作就是将src文件夹中文件经过转化到build文件夹中,且在dist文件夹中会出现一个rpk;

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

image.png

3.1 安装到手机调试

3.1.1 本地安装

直接将dist文件夹下的rpk文件拷贝到手机上,然后打开快应用调试器,选择本地安装,就可以直接打开,这种操作不适合开发,因为开发过程中经常拷贝到手机在运行,效率低下;

3.1.2 扫码安装

还是在项目的根目录下,输入:

npm run server

image.png

生成如图的二维码,安装步骤如下：

手机打开快应用调试器 --> 关闭"开启USB调试"
点击"扫码安装"，扫描终端窗口中的二维码即可完成配置（若扫描不成功，可在浏览器中打开页面：http://localhost:<your port>，扫描页面中的二维码）
若提示安装失败，请检查执行 npm run server 的终端窗口是否正常运行，手机和 PC 是否可以通过 IP 相互访问

3.1.3 热更新

扫码安装的方式还是显得不够直接,可以有另外一种更快的调试方式:

首先在根目录下运行:打开usb服务

npm run server
command t 新建一个终端窗口,cd到工程根目录下,输入:

npm run watch

image.png

这时候,在更改文件后,只需要command + s 保存一下,项目就会自动将更新显示到手机上;

4. 主要目录和文件

src : 是代码的源目录,所有的功能性代码都放在此文件夹下;
- mainifest.josn : 快应用全局配置文件,包名,版本号(一般使用整数),入口,页面,features(系统权限)等;

image.png

app.ux 格式参考vue.js : 用于给全局所有页面提供共享成员 - 应用的生命周期实现
About之类: 页面文件夹,里面放页面组件
Common: 放一些公共的文件(组件,图片样式之类的)