快应用之先写出第一个hello world

快应用简介

    快应用是各大手机厂商联合制定的，类似于微信小程序都是采用css+js前端开发，不同于微信的是，微信小程序依附在微信上，而快应用是可以再各大安卓应用市场上搜索直接打开，无须安装。还可以直接生成桌面图标，下次直接打开。快应用的使用体验和我们android开发出来的app差不多。所以，作为一名android开发仔，我决定学习它，多掌握一项技能。今天就先写出一个hello world吧

准备工作

    要开发快应用，我们需要做好一些环境配置。

1.安装6.0以上的NodeJS，这个可以在NodeJS官网下载。

2.安装完成NodeJS后，还需安装hap-toolkit。安装方式是：在命令行输入

npm install -g hap-toolkit

接下来就是等待一下安装，安装完成后，再输入

hap -V

如果出现上图版本号0.0.32，证明你前面操作都成功了。

以上的是电脑的环境搭建，因为快应用最终是在手机上运行起来的。所以我们还需要，配置一下手机的环境。简单来说，就是下载一个快应用调试app。

1.下载需要到快应用官网点击打开链接，打开链接后，选择下载 快应用调试器

2.下载完成安装后，界面如下图

到这里，所有的环境都配置好了，接下来就到了正式创建一个快应用项目了。

创建快应用项目

1.创建一个快应用项目，在你想要放快应用项目的目录下，输入命令行

hap init <ProjectName>  ProjectName就是你的项目名字

如下图：

成功后目录下就会出现 QuickAPPHello

2.接下来就是安装依赖，在项目的根目录下，输入命令行

npm install

我们现在只需等待它安装

3.安装完成后，我们再编译一下项目，在项目根目录下输入命令行

npm run build

出现上图的提示，证明我们一个完整的快应用项目已经创建完成了。再来看看项目目录结构

进行代码的编写

完成上面的两个步骤后，就正式进入了代码编写的环节了。因为快应用属于前端的范畴，所以我用得编写工具是Visual Studio Code。

1.需要在Visual Studio 安装一个插件，可以在搜索框上，直接搜索Hap Extension。

2.开发Visual Studio导入项目

选择到刚创建的文件

导入成功后，我们可以马上运行一下这个快应用，首先我们选择到 终端 选项

其实这就是一个cmd 命令行，接下来在界面上输入

npm run server

你会发现最终，会生成一个二维码。这时候，我们在第二步的时候，安装在手机的 快应用调试器 发挥作用了，我们在手机上打开 调试器，选择 扫码安装

然后点击，扫描二维码，我们的快应用就会安装到了手机上。注意：这里扫描安装的条件是，我们的手机和电脑必须在同一个局域网内，因为我们目前的应用只是在调试阶段，并没有真正发布到应用市场上，所以手机和电脑在不同局域网是会安装失败的。我们看看，扫描成功后。手机上安装的应用

这就是我们刚创建的应用。好了，我们改一下界面。写出一个hello world，完成今天的作业先。要改界面，我们需要先找到这个页面。

我们找到Demo目录，根据manifest.json文件的配置，可以知道，而这个Demo目录的页面入口就是叫index的文件

打开文件可以看到里面的代码

可以看到了，熟悉的文字字段。看到这里，我相信如果开发过前段的同学应该可以熟悉了！这就是html开发，所以我们直接完成作业，先把文字改一下。完成修改后，我们怎么更新到手机上呢？这时候，我们再在终端上多开一个窗口，输入命令

npm run watch

这个命令的意思是，你每次编写完保存代码，系统会自动更新到手机上。

再看回手机上

而当你点击退出快应用，界面上会提醒你，是否要保存为桌面图标。

好了，到这里已经完成了今天的作业了，快应用的第一个hello world。大家赶紧玩起来吧，我是一名Android 工程师，加油吧！