快应用开发详解

前言
什么是快应用?

  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

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

hap -V

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

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

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

npm install

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

npm run build

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

npm run watch

注意(我没有遇到该错误):
如果报错遇到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具体路径

安装运行后,你会发现上边的按钮都点不了。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文件目录 手机目录

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

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

npm run server

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

npm run server -- --port 8080

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

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

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

  • 3
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值