快应用入坑指南

# 快应用入坑指南

建立项目

1. PC安装toolkit工具 ( 相似于vue-cli 和 create-react-app )

   须要电脑安装node 版本推荐 推荐v6.11.3 及 以上
   注意: 不要使用8.0.*版本．这个版本内部ZipStream实现与node-archive包不兼容，会引发报错

   安装hap-toolkit：
   npm install -g hap-toolkit

   hap -V 检查安装是否成功

2. 建立第一个快应用项目

   hap init <ProjectName>

   目录结构： 这个项目已经包含了项目配置与示例页面的初始代码，项目根目录主要结构以下。

   ├── sign                      rpk 包签名模块
    │   └── debug                 调试环境
    │       ├── certificate.pem   证书文件
    │       └── private.pem       私钥文件
    ├── src
    │   ├── Common                公用的资源和组件文件
    │   │   └── logo.png          应用图标
    │   ├── Demo                  页面目录
    │   |   └── index.ux          页面文件，可自定义页面名称
    │   ├── app.ux                APP 文件，可引入公共脚本，暴露公共数据和方法等
    │   └── manifest.json         项目配置文件，配置应用图标、页面路由等
    └── package.json              定义项目须要的各类模块及配置信息

3. 安装依赖
   npm install

4. 启动项目 ( 这里可能有坑 )

   编译：
   npm run build

   编译生成的 dist 目录里才是最终产物：rpk 文件 手机会下载该文件进行安装，才能够启动项目

   按照官方文档一直走，到 npm run build 时，报错： "Cannot find module '.../node_modules/hap-tools/webpack.config.js'"

   主要是由于建立项目后就有一个 node_module 文件夹了，里面有一个 hap-tools 包。若是 npm install 安装依赖，高版本的 npm 可能会把 node_module 原有的包清空再安装依赖，这时只要再手动安装下 hap-tools 就好了

   npm install hap-tools

   或者请运行一次 hap update --force（执行完毕后不须要按照提示再次运行npm install）就能够了。

若是要监听源码变化，实现自动编译，能够运行 npm run watch 命令。

npm run watch

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

• build：临时产出，包含编译后的页面js，图片等
• dist：最终产出，包含rpk文件。实际上是将build目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出（至关于一个app的安装包）

1. 预览快应用：手机安装调试器、 平台预览版调试器[（官方地址）][1]，或者点击下面得连接直接下载：

   调试器：
   [调试器下载地址][2]
   [平台预览版调试器][3]

安装完成后，打开快应用调试器，界面以下：

[此处输入图片的描述][4]

能够看到有两种安装方式：扫码安装、本地安装。

• 扫码安装：在项目的根目录打开一个终端窗口，执行：

npm run server

执行结果以下：
[二维码][5]

也能够再浏览器打开 servers 地址查看刚才生产的二维码。点击快应用调试器的 扫码安装 按钮就能够了（注意：部分机型可能会安装失败，这里建议使用小米手机）。

• 本地安装

• 复制rpk包到手机中

  将 /dist目录下编译产出的rpk包经过USB数据线或其余方式，复制到手机文件系统中

• 本地安装rpk包

  打开调试器 --> 点击"本地安装"，选择手机文件系统中的rpk包，并自动唤起平台运行rpk包，查看效果

• 预览：提示安装成功后，就能够点击调试平台的在线更新预览效果了。

代码编辑配置

Visual Studio Code ，配置语法支持只须要安装 Hap Extension 插件便可。

开发与调试

• 远程调试（电脑调试）：
  还记得前面让你们执行 npm run server开启node服务，这里就是依赖这个服务器实现电脑调试的。
  快应用安装成功后，点击 开始调试 按钮，电脑就会在默认浏览器 打开一个与手机同步的调试页面，页面默认打开 chrome devtools 调试界面，方便你们调试代码。
  注意：使用远程调试请确保手机与 PC 在同一局域网，手机不要开代理，不然没法打开快应用。

• 日志输出
  有些同窗在第一次开发快应用时候会发现，在代码里面 执行日志打印console.log（）没有效果。这是由于快应用的日志打印须要配置，默认是不容许日志打印的。

打开工程根目录下的src文件夹的manifest.json，找到config配置，修改代码以下就能够实现日志打印了：

　"config": {
  　　"logLevel": "debug"
  }

• 到这里咱们的第一个快应用就开发完成啦，想要了解其余高级功能，能够查看快应用的开发文档。