"快应用" 入坑记

安装 NodeJS

官方推荐的版本是 v6.11.3 , 最好安装这个版本,之前没在意,安装了最新版本,之后在编译项目时报错了, npm 安装依赖时删除了 hap-toolkit, 在编译时找不到文件,虽然可以通过 npm install hap-tools 重新安装,终归有些麻烦。

安装 hap-toolkit

npm install -g hap-toolkit

查看安装的 hap-toolkit 的版本:

hap -V

手机端安装调试器和平台预览 APP

下载: https://www.quickapp.cn/docCenter/post/69

初始化项目

bao@DESKTOP-VVQG1BD MINGW64 /d/quickapp
$ hap init test2
prompt: Init your Project:  (test2)
file: D:\quickapp\test2\.babelrc created.
file: D:\quickapp\test2\.eslintrc.json created.
file: D:\quickapp\test2\.npmignore created.
file: D:\quickapp\test2\node_modules\hap-tools\browser\browser.min.js created.
file: D:\quickapp\test2\node_modules\hap-tools\browser\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\browser\progress_spinner.svg created.
file: D:\quickapp\test2\node_modules\hap-tools\browser\template.html created.
file: D:\quickapp\test2\node_modules\hap-tools\browser\template.min.html created.
file: D:\quickapp\test2\node_modules\hap-tools\browser\web.min.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\client\html\index.html created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\client\html\inspector.tar.gz created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\client\js\index-9a49911dd0463646fd74.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\command\notify.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\config\development.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\config\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\config\production.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\lib\regenerator\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\lib\regenerator.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\lib\utils.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\app.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\bundle\apiDef\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\bundle\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\bundle\routes\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\bundle\service\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\debug\apiDef\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\debug\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\debug\routes\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\debug\service\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\debug\wsserver.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\env.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\routers.js created.
file: D:\quickapp\test2\node_modules\hap-tools\debugger\server\server.js created.
file: D:\quickapp\test2\node_modules\hap-tools\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\access-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\app-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\bundle.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\fragment-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\info.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\json-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\jsx-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\manifest-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\module-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\notify.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\page-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\parser.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\resource-plugin.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\script\fix.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\script\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\script-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\server.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\shared.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\signature\base64.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\signature\crc32.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\signature\hex.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\signature\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\style\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\style\validator.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\style-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\template\exp.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\template\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\template\lib\expression.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\template\lib\text.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\template\validator.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\template-loader.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\transform\blocker.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\transform\index.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\utils.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\webpack-handler-wrap-plugin.js created.
file: D:\quickapp\test2\node_modules\hap-tools\lib\webpack-zip-plugin.js created.
file: D:\quickapp\test2\node_modules\hap-tools\package.json created.
file: D:\quickapp\test2\node_modules\hap-tools\README.md created.
file: D:\quickapp\test2\node_modules\hap-tools\test\app.js created.
file: D:\quickapp\test2\node_modules\hap-tools\webpack.config.js created.
file: D:\quickapp\test2\package.json created.
file: D:\quickapp\test2\README.md created.
file: D:\quickapp\test2\sign\debug\certificate.pem created.
file: D:\quickapp\test2\sign\debug\private.pem created.
file: D:\quickapp\test2\src\About\index.ux created.
file: D:\quickapp\test2\src\app.ux created.
file: D:\quickapp\test2\src\Common\logo.png created.
file: D:\quickapp\test2\src\Demo\index.ux created.
file: D:\quickapp\test2\src\DemoDetail\index.ux created.
file: D:\quickapp\test2\src\manifest.json created.
file: D:\quickapp\test2\src\util.js created.

这里做的不够人性化,没有结束标记,初次还以为卡住了,按 Ctrl + c 键结束,或者直接关闭。

安装依赖

npm install

等待安装结束。

编译项目

npm run build

或者

npm run watch

运行 npm run watch, 添加了图片文件,却检测不到,不熟悉 npm 搞不明白咋回事,用 npm run build 命令编译一次,如果只是代码变更,则 npm run watch 没问题。

编译好的项目文件位于 dist 目录下,可以拷贝到手机,打开 快应用调试器 ,选择 本地安装, 之后可预览。

扫码安装及远程调试

npm run server 

确保手机和电脑在同一个网段,在手机上打开 快应用调试器 , 选择 扫码安装 ,扫描生成的二维码,如果安装失败,会弹出提示 安装失败,如果安装成功,则会自动打开应用。

如果需要使用远程调试功能,首先请确保安装了谷歌浏览器,然后返回到 快应用调试器

如上图,可以看到所安装应用的包名,关于包名请参考文档中的 项目配置信息,点击 开始调试 按钮,不出意外,会自动打开谷歌浏览器:

此时在终端会有如下信息:

如果没有自动打开浏览器,可复制如图中所示的地址到谷歌浏览器。

填坑之路

扫码安装,却一直失败,在论坛提问 http://bbs.quickapp.cn/posts/detail?id=502 ,也没得到答案:

直到在另一台电脑上从头开始,然后跑通了。终于发现了问题所在:

如上图,由于安装了 VirtualBox 虚拟机,多了虚拟机的网络适配器,电脑的网址是 10.210.241.253, 而虚拟机所在的网段是 192.168.*.*

在上图中可以看出,运行 npm run server, HTTP 服务器不知为何运行在 192.168.*.* 网段,没找到好的解决办法,笨办法是禁掉虚拟机的网络适配器:

转载请注明出处:https://www.hellocode.wang/article/quickapp-start

评论