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

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

作者原文地址

一.环境搭建：

官网地址开发文档

step1：首先安装nodejs：

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

step2：安装hap-toolkit

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

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

二：创建HelloWorld项目

step1.创建一个新的项目

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

hap init

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

执行过程

目录地址

step2.安装npm依赖

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

效果1

效果2

效果3

step3.编译项目

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

运行效果

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

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

tip：自动重新编译

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

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

step4.手机安装调试器

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

调试器

step5.手机安装平台预览版

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

step6.在平台上运行rpk包

两种途径：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服务器地址：有两种方式，以下两者选其一即可，注意手机和电脑要在同一网络下：

打开调试器 --> 点击"扫码安装"，扫描终端窗口中的二维码即可完成配置（若扫描不成功，可在浏览器中打开页面：http://localhost:，扫描页面中的二维码），作者就是扫码终端二维码不成功，扫码的网页版的是ok的
打开调试器 --> 点击右上角menu --> 设置，输入终端窗口中提示的HTTP服务器地址

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

点击app

点击开始调试

网页运行情况

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