快应用入坑指南

快应用入坑指南

---

创建项目

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的安装包）

5. 预览快应用：手机安装调试器、 平台预览版调试器[（官方地址）][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"
  }

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