美文网首页快应用程序员
开发第一个快应用

开发第一个快应用

作者: 皮卡搜 | 来源:发表于2018-03-24 17:01 被阅读0次

    闲来无事,撩撩新技术!

    参考:【快应用开发文档】

    环境搭建

    一、安装nodejs

    需安装6.0以上版本的nodejs,请从NodeJS官网下载,推荐v6.11.3 LTS

    直接打开6.11.3的链接地址:https://nodejs.org/dist/v6.11.3/

    版本目录.png

    注意: 不要使用8.0.版本.这个版本内部ZipStream实现与node-archive包不兼容,会引起报错*

    二、安装hap-toolkit

    node.js下载安装完成后,打开命令行窗口

    输入命令npm install -g hap-toolkit

    安装hap-toolkit等待.png

    安装过程可能会需要一段时间,请耐心等待,安装完成如下图所示


    安装hap-toolkit完成.png

    在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功。

    新建项目

    一、创建第一个项目(FirstQuickApp)

    找到合适的文件夹,打开命令行输入命令hap init 自定义项目名,出现prompt: Init your Project: (FirstQuickApp)后再次输入项目名,我这里是由于配置问题只能在node_global下执行命令

    创建第一个项目.png

    创建完成后,在当前目录下可以查找到项目


    FirstQuickApp创建完成.png
    二、编译项目

    到项目根目录FirstQuickApp下,打开命令行输入命令npm install安装依赖包;

    再输入npm run build编译生成rpk包;

    这样就已经完成了第一个快应用的创建和打包

    如果希望每次修改源代码文件后,都自动重新编译项目,可继续输入命令npm run watch

    调试应用

    一、手机安装调试器

    调试器APK是一个Android应用程序,下载地址 快应用调试器

    安装后,打开调试器


    快应用调试器.png

    说明如下:

    • 扫码安装:配置HTTP服务器地址,下载rpk包,并唤起平台运行rpk包
    • 本地安装:选择手机文件系统中的rpk包,并唤起平台运行rpk包
    • 在线更新:重新发送HTTP请求,更新rpk包,并唤起平台运行rpk包
    • 开始调试:唤起平台运行rpk包,并启动远程调试工具

    注意:若无法正常使用调试器,请升级手机系统到最新版本或安装平台预览版

    二、手机安装平台预览版

    较新的系统版本中内置平台正式版,即真实的运行环境。如果你的调试器可正常使用,这步可不必理会。

    平台预览版同样是一个apk,下载地址 平台预览版

    注意:如果你安装后打开看到的是一个空白页面,属于正常情况,退出打开调试器,你会发现已经可以点击了

    三、在平台运行rpk包

    通过调试器,可以看出有两种方式:扫码安装、本地安装。

    1.本地安装

    在FirstQuickApp/dist/下找到rpk包,复制到手机中,再点击调试器本地安装,选择该rpk包即可。

    2. 扫码安装(推荐)

    进入项目的根目录打开命令行,执行命令npm run server,启动本地服务器(默认端口为12306)。

    如果想要修改端口号(如:8080),执行命令npm run server -- --port 8080

    上述操作会在终端展示一个生成http服务的二维码和服务器地址,手机预览效果也有两种途径:

    • 快应用调试器 ==> 右上角设置 ==> 输入服务器地址 (请确保手机与服务器在相同网段)
    • 快应用调试器 ==> 扫码安装 ==> 扫描命令行窗口生成的二维码(如果扫描失败,浏览器输入服务器地址打开页面,扫描页面中的二维码)

    配置完成后,若没有自动唤起平台运行rpk包,点击在线更新唤起平台运行rpk包。

    建议:从项目根目录打开两个命令行窗口,一个运行npm run watch可以自动编译更新rpk,一个运行npm run server可以在浏览器查看调试。

    编辑开发

    只要能编辑,哪怕记事本也行。官方推荐两款开发工具:Visual Studio CodeWebStorm

    为了方便开发,如果使用VSCode添加扩展hap Extension;如果使用WebStorm,在设置中增加对ux格式文件的支持。

    参考 【代码编辑配置】

    相关文章

      网友评论

        本文标题:开发第一个快应用

        本文链接:https://www.haomeiwen.com/subject/gyraqftx.html