【声明:】本文是作者(蘑菇v5)原创,版权归作者 蘑菇v5所有,侵权必究。本文首发在简书。如若转发,请注明作者和来源地址!未经授权,严禁私自转载!
一.环境搭建:
step1:首先安装nodejs:
安装6.0以上版本的nodejs,官网推荐v6.11.3 LTS
,我推荐这个版本Node v6.13.1 (LTS)
,下载链接地址,notejs的“配置”参考我上一篇文章(注意:上一篇的版本是官网推荐的6.11.3,这里要6.13.1,文章链接地址
step2:安装hap-toolkit
通过npm仓库安装,在命令行中执行以下命令:
npm install -g hap-toolkit
之后,在命令行中执行hap -V
会输出版本信息,如0.0.26,表示hap-toolkit
安装成功(注意:是大写的V)
完成以上步骤,就完成了环境搭建。
二:创建HelloWorld项目
step1.创建一个新的项目
搭建好环境后,根据自己的情况,任意选择一个目录的文件夹,执行以下命令:
hap init <ProjectName>
其中<ProjectName>
为自定义的项目名称,命令执行后,如果中间有停顿的现象,直接点击enter键就行,之后会在当前目录下创建<ProjectName>
文件夹,并作为项目根目录,如下图所示:
step2.安装npm依赖
在项目根目录下,运行命令npm install
,安装依赖包(webpack,babel等),效果如下图:
step3.编译项目
在项目的根目录下,运行如下命令进行编译打包,生成rpk包,效果如下图:
npm run build
编译打包成功后,项目根目录下会生成文件夹:build、dist
- build:临时产出,包含编译后的页面js,图片等
-
dist:最终产出,包含rpk文件。其实是将build目录下的资源打包压缩为一个文件,后缀名为
rpk
,这个rpk
文件就是项目编译后的最终产出
tip:自动重新编译
如果希望每次修改源代码文件后,都自动重新编译项目,请使用如下命令:
npm run watch
官网的注意提示:
如果报错遇到Cannot find module '.../webpack.config.js'
,请重新执行一次hap update --force
。这是由于高版本的npm在npm install
时,会校验并删除了node_modules
下部分文件夹,导致报错。而hap update --force
会重新复制hap-toolkit
文件夹到node_modules
中,作者并没遇到过上述错误
step4.手机安装调试器
有了rpk包之后,怎么安装呢?调试器APK是一个app,下载链接地址,在手机上下载安装后,打开调试器APK,这时候,你会发现按钮颜色都是灰的,点击不了。这是正常情况,还需要安装一个平台(较新的系统版本中内置平台正式版,即真实的运行环境)如下图所示:
step5.手机安装平台预览版
较新的系统版本中内置平台正式版,即真实的运行环境。然而,更新平台正式版的时间周期较长,开发调试平台新功能可使用平台预览版,平台预览版APK是一个app应用程序,下载链接地址 ,下载安装成功后,你发现打开app,啥也没有,一个白色的背景,这是正常的现象,切换到后台,点击之前的快应用调试器,发现按钮能够点击了。
step6.在平台上运行rpk包
两种途径:HTTP请求和本地安装,官网推荐第一种。
HTTP请求:
在终端中新建一个窗口,进入项目的根目录运行如下命令,启动本地服务器(默认端口为12306)
npm run server
自定义端口(如:8080)
npm run server -- --port 8080
但是运行的时候遇到了下面的问题,问题如下图所示:
因为这个nodejs的版本是官网提示的6.11.3,版本问题啊,版本需要6.0以上版本,但是不让使用比较新的8.0.*版本,所以作者折中使用的是6.13.1,下载完成之后,覆盖安装就好了。之后再执行npm run server
,效果如下图,生成了一个二维码:
之后需要配置HTTP服务器地址:有两种方式,以下两者选其一即可,注意手机和电脑要在同一网络下:
-
打开调试器 --> 点击"扫码安装"
,扫描终端窗口中的二维码即可完成配置(若扫描不成功,可在浏览器中打开页面:http://localhost:<your port>
,扫描页面中的二维码),作者就是扫码终端二维码不成功,扫码的网页版的是ok的 -
打开调试器 --> 点击右上角menu --> 设置
,输入终端窗口中提示的HTTP服务器地址
配置完成后,若没有自动唤起平台运行rpk包,点击在线更新
唤起平台运行rpk包,若提示安装失败
,请检查执行npm run server的终端窗口是否正常运行
运行效果如下图所示:
至此,快应用的helloworld项目就成功运行在手机上了。