快应用快速入门

时间:2024-03-13 20:06:34

什么是快应用? 
1. 快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。 
2. 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。 
3. 快应用具备传统APP完整的应用体验,无需安装、即点即用。

快应用官网:https://www.quickapp.cn/ 
开发文档:https://doc.quickapp.cn/ 
开发环境:windows7

着手开发第一个快应用

1.环境搭建 
1.1 安装nodejs:官网上的原话 
安装nodejs 
(在鸿洋大神的文章中找到的网址) 我安装的是7.0,网址:https://nodejs.org/en/blog/release/v7.0.0/ 
按照自己的电脑要求下载相应版本,下载后点击安装就行。 
1.2 安装hap-toolkit 
windows:window+R在命令行中,输入以下命令安装

npm install -g hap-toolkit
  • 1

在命令行中输入hap -V会输出版本信息,如下,类似”0.0.26”,表示hap-toolkit安装成功。

hap -V
  • 1

例如这样的 
2.HelloWorld 
2.1.创建一个新项目 
选择或者自己先进一个文件夹,在命令行中输入:hap init <ProjectName> 
<ProjectName>是你自定义的项目名称 
例如: 
新建项目 
然后继续输入你的项目名称,等待创建完成。 
在你刚刚的目录下,你可以查看它生成的文件,它包含了项目配置与简单页面初始化代码: 
生成文件

 src:项目源文件夹
 node_modules:项目的依赖类库
 sign:签名模块,当前仅有debug签名,如果内测上线,请添加release文件夹,增加线上签名;签名生成方法请参考文档:编译工具的openssl
  • 1
  • 2
  • 3
  • 4

2.2安装npm依赖 
在项目的根目录(Firsthelloword)下运行以下命令,安装依赖包(webpack,babel等):

npm install
  • 1

安装npm 
2.3编译项目 
继续在根目录下输入以下命令进行编译打包,生成rpk包。

npm run build
  • 1

编译打包成功后,项目根目录下会生成文件夹:build、dist 
build:临时产出,包含编译后的页面js,图片等 
dist:最终产出,包含rpk文件。其实是将build目录下的资源打包压缩为一个文件,后缀名为rpk,这个rpk文件就是项目编译后的最终产出 
2.3自动重新编译 
如果希望每次修改源代码文件后,都自动重新编译项目,输入以下命令:

npm run watch
  • 1

注意(我没有遇到该错误): 
如果报错遇到Cannot find module ‘…/webpack.config.js’,请重新执行一次hap update –force。这是由于高版本的npm在npm install时,会校验并删除了node_modules下部分文件夹,导致报错。而hap update –force会重新复制hap-toolkit文件夹到node_modules中

3.安装手机调试器 
3.1安装手机调试器 
在手机上安装一个apk,地址:https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803200129552999556.apk,下载后安装至自己手机上就可以了。 
运行效果: 
apk运行效果 
说明如下: 
扫码安装:配置HTTP服务器地址,下载rpk包,并唤起平台运行rpk包 
本地安装:选择手机文件系统中的rpk包,并唤起平台运行rpk包 
在线更新:重新发送HTTP请求,更新rpk包,并唤起平台运行rpk包 
开始调试:唤起平台运行rpk包,并启动远程调试工具

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

(如果你电脑上安装了夜神模拟器或者其它,会自动打开夜神并且安装在其上边,你可以使用adb命令安装,具体请参考adb命令使用)

adb install -r apk具体路径
  • 1

安装运行后,你会发现上边的按钮都点不了。What?不用担心,继续往下看(可以点击的请跳过以下步骤)。 
3.2手机安装平台预览版 
点击以下链接下载.apk,安装至你的手机上:https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803200129552999556.apk 
安装后你会发现你点开它的界面是一片灰色的,但是回到之前的快应用调试器,他的按钮都可以点击了哟。 
4.在手机上运行rpk包 
官网上介绍了两种途径: 
a. HTTP请求:开发者启动HTTP服务器,打开调试器,点击 扫码安装 配置HTTP服务器地址,下载rpk包,并唤起平台运行rpk包 
b.本地安装:开发者将rpk包拷贝到手机文件系统,打开调试器,点击 本地安装 选择rpk包,并唤起平台运行rpk包

4.1本地安装: 
使用adb命令将根路径下的dist文件夹下的rpk文件,如 
rpk位置 
将它复制到手机上,我用的是华为平板,代码如下: 
adb将电脑中的文件复制到手机中

adb push 电脑rpk文件目录 手机目录
  • 1

接下来打开快应用调试器,点击本地安装,找到rpk文件,点击后打开另一个快应用,就会看到那个helloword了。 
运行效果

4.2扫码安装: 
第一步:打开命令窗口,跳转到项目根目录,执行以下命令(默认端口为12306):

npm run server
  • 1

或者自定义端口(如8080):

npm run server -- --port 8080
  • 1

运行下来是这样的: 
运行结果

配置HTTP服务器地址有两种方式,以下两者选其一即可: 
第一种:打开调试器 –> 点击”扫码安装”,扫描终端窗口中的二维码即可完成配置(若扫描不成功,可在浏览器中打开页面:http://localhost:,扫描页面中的二维码) 
第二种:打开调试器 –> 点击右上角menu –> 设置,输入终端窗口中提示的HTTP服务器地址 
本人用的第一种方法,直接扫描上图的二维码不行,然后我在火狐上输入了:http://localhost:12306 (我没改端口号,默认为12306,修改了的用自己修改的端口),生成了一个二维码,如下图这里写图片描述,用手机扫描二维码就安装上了。

想要实时监听:npm run watch;

就这样,我的第一个快应用就开发完成了。