快应用开发笔记

下面我调研快应用的一些基础资料，供参考：

快应用环境安装：

1.Node.js

This package has installed:

Node.js v10.10.0 to /usr/local/bin/node

npm v6.4.1 to /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.

2.安装hap-toolkit（npm install -g hap-toolkit）

报错：Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’ npm ERR! { [Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’]

缺少管理员权限。使用 sudo npm install -g hap-toolkit

参考文章：

https://blog.csdn.net/xiajun2356033/article/details/79698706

https://www.jianshu.com/p/81484e8dae79

3.编译项目

编译报错：

Error: Cannot find module ‘/Users/bobge/Desktop/moran_code/quick_app/movie_ticket/node_modules/hap-toolkit/tools/server/index.js’

执行：hap update --force

Pasted Graphic.tiff

继续执行 npm install

然后 npm run server

Pasted Graphic 1.tiff

4.端口被占用解决链接：

sudo lsof -i :8880

sudo kill -9 4580（4580为PID）

5.项目的编译流程：

1.执行以下命令初始化项目

hap init <你的项目名称>

命令执行后会在当前目录下生成名为 你的项目名称 的文件夹，作为项目根目录，目录结构如下：

├── node_modules

├── sign                      rpk包签名模块

│   └── debug                 调试环境

│       ├── certificate.pem   证书文件

│       └── private.pem       私钥文件

├── src

│   ├── Common                公用的资源文件和组件文件

│   │   └── logo.png          manifest.json中配置的icon

│   ├── Demo                  页面目录

│   |   └── index.ux          页面文件，文件名不必与父文件夹相同

│   ├── app.ux                APP文件（用于包括公用资源）

│   └── manifest.json         项目配置文件（如：应用描述、接口申明、页面路由等）

└── package.json              定义项目需要的各种模块及配置信息，npm install根据这个配置文件，自动下载所需的运行和开发环境

2.编译项目

先安装依赖，在项目根目录执行以下命令

npm install

待安装完成，使用以下命令编译打包生成rpk包

npm run build

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

• build：临时产出，包含编译后的页面js，图片等

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

使用以下命令可自动重新编译，

npm run watch

注意：（我每次都遇到这个问题）

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

6.调试

1.安装调试器

调试器是一个android应用，直接下载安装

安装完打开如图所示，此时按钮都不能点击，还需要再安装平台预览版

两个应用安装完就可以安装快应用了

2.安装运行rpk包

有两种方式：

• HTTP请求：开发者启动HTTP服务器，打开调试器，点击扫码安装配置HTTP服务器地址，下载rpk包，并唤起平台运行rpk包

• 本地安装：开发者将rpk包拷贝到手机文件系统，打开调试器，点击本地安装选择rpk包，并唤起平台运行rpk包

推荐第一种方式，调试比较方便。

http请求方式：

执行命令：

// 默认端口12306

npm run server



// 自定义端口,比如8080

npm run server -- --port 8080

执行成功会显示二维码，可用调试器扫描二维码安装，或点击调试器右上角设置http服务器地址再点击在线更新。

此时配合命令

npm run watch

即可边开发边预览效果

关于日志查看，官方文档介绍是使用Android Studio的Android Monitor输出来查看日志。这里提供另一种方法，执行以下命令

adb logcat -s JsConsole

// JsConsole是过滤信息，因为在as看到快应用日志输出都有JsConsole这个标记，所以直接使用这个查看快应用日志，就不会被手机其他日志干扰

5.api开发文档链接：

https://www.w3cschool.cn/quickapp/quickapp-b5id2nbc.html

6.flex布局学习文档：

http://www.runoob.com/w3cnote/flex-grammar.html