快应用开发笔记

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

快应用环境安装:

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章