快应用Quick APP环境搭建和示例demo

【声明：】本文是作者（蘑菇v5）原创，版权归作者 蘑菇v5所有，侵权必究。本文首发在简书。如若转发，请注明作者和来源地址！未经授权，严禁私自转载！

作者原文地址

官网地址开发文档

安装6.0以上版本的nodejs，官网推荐v6.11.3 LTS，我推荐这个版本Node v6.13.1 (LTS)，下载链接地址，notejs的“配置”参考我上一篇文章（注意：上一篇的版本是官网推荐的6.11.3，这里要6.13.1，文章链接地址

通过npm仓库安装，在命令行中执行以下命令： npm install -g hap-toolkit 之后，在命令行中执行hap -V会输出版本信息，如0.0.26,表示hap-toolkit安装成功（注意：是大写的V）

完成以上步骤，就完成了环境搭建。

搭建好环境后，根据自己的情况，任意选择一个目录的文件夹，执行以下命令：

hap init

其中为自定义的项目名称，命令执行后，如果中间有停顿的现象，直接点击enter键就行，之后会在当前目录下创建文件夹，并作为项目根目录，如下图所示：

在项目根目录下，运行命令npm install ，安装依赖包（webpack，babel等），效果如下图：

在项目的根目录下，运行如下命令进行编译打包，生成rpk包，效果如下图： npm run build

编译打包成功后，项目根目录下会生成文件夹：build、dist

如果希望每次修改源代码文件后，都自动重新编译项目，请使用如下命令： npm run watch 官网的注意提示：

如果报错遇到Cannot find module '.../webpack.config.js'，请重新执行一次hap update --force。这是由于高版本的npm在npm install时，会校验并删除了node_modules下部分文件夹，导致报错。而hap update --force会重新复制hap-toolkit文件夹到node_modules中，作者并没遇到过上述错误

有了rpk包之后，怎么安装呢？调试器APK是一个app，下载链接地址，在手机上下载安装后，打开调试器APK，这时候，你会发现按钮颜色都是灰的，点击不了。这是正常情况，还需要安装一个平台（较新的系统版本中内置平台正式版，即真实的运行环境）如下图所示：

较新的系统版本中内置平台正式版，即真实的运行环境。然而，更新平台正式版的时间周期较长，开发调试平台新功能可使用平台预览版，平台预览版APK是一个app应用程序，下载链接地址 ，下载安装成功后，你发现打开app，啥也没有，一个白色的背景，这是正常的现象，切换到后台，点击之前的快应用调试器，发现按钮能够点击了。

两种途径：HTTP请求和本地安装，官网推荐第一种。

HTTP请求：

在终端中新建一个窗口，进入项目的根目录运行如下命令，启动本地服务器（默认端口为12306） npm run server 自定义端口（如：8080） npm run server -- --port 8080 但是运行的时候遇到了下面的问题，问题如下图所示：

因为这个nodejs的版本是官网提示的6.11.3，版本问题啊，版本需要6.0以上版本，但是不让使用比较新的8.0.*版本，所以作者折中使用的是6.13.1，下载完成之后，覆盖安装就好了。之后再执行npm run server，效果如下图，生成了一个二维码：

之后需要配置HTTP服务器地址：有两种方式，以下两者选其一即可，注意手机和电脑要在同一网络下：

配置完成后，若没有自动唤起平台运行rpk包，点击在线更新唤起平台运行rpk包,若提示安装失败，请检查执行npm run server的终端窗口是否正常运行 运行效果如下图所示：

至此，快应用的helloworld项目就成功运行在手机上了。