快应用入坑指南

快应用入坑指南 创建项目

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 检查安装是否成功

创建第一个快应用项目

hap init <ProjectName>

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

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

安装依赖
npm install

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

编译:
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],或者点击下面得链接直接下载:

调试器:
[调试器下载地址][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" }

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgzjjg.html