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

开发第一个快应用

作者: 皮卡搜 | 来源:发表于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格式文件的支持。

参考 【代码编辑配置】

相关文章

  • 开发第一个快应用

    闲来无事,撩撩新技术! 参考:【快应用开发文档】 环境搭建 一、安装nodejs 需安装6.0以上版本的nodej...

  • 快应用简明入门引导

    本文目的 结合官方文档,旨在让开发者更快了解、体验、开发QuickApp。 目录 快应用是什么 环境配置 第一个程...

  • 华为快应用引擎架构及开发实践

    目 录 1 快应用技术架构 1.1快应用介绍及其特点 1.2华为快应用引擎架构简介 1.2.1 应用开发(前端框架...

  • 华为快应用引擎架构及开发实践

    目 录 1 快应用技术架构 1.1快应用介绍及其特点 1.2华为快应用引擎架构简介 1.2.1 应用开发(前端框架...

  • 快应用开发小记

    1、list-item type相同的dom要相同,否则调试器会闪退或崩溃 2、动态更改的渐变背景色不会渲染纯色就...

  • App Clips 与快应用

    目录 App Clip 的相关介绍和开发流程 快应用的相关介绍和开发流程 快应用和 App clip 的对比 总结...

  • 快应用的开发和调试

    快应用的开发和调试 在课程的大纲 开发工具的介绍 使用日志输出 远程调试 开发工具 在快应用的开发工具中, 第一种...

  • 快应用开发者大赛,10 万大奖等你来拿 🎉

    ?关于快应用 & 开发者大赛 快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定...

  • 快应用开发工具,入门详解

    前言:快应用开发工具,是一款专为快应用开发设计的应用,简单易用、灵活扩展、并能够全面支持联盟标准规范。 微注:本文...

  • 快应用实现的微信Demo

    快应用实现的微信Demo,欢迎大家一起学习快应用开发 github地址,欢迎关注 目前搭建了基本UI 快应用入门教...

网友评论

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

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