本文目的
结合官方文档,旨在让开发者更快了解、体验、开发QuickApp。
目录
- 快应用是什么
- 环境配置
- 第一个程序
- 项目配置
- 框架
快应用是什么
2018年3月20日,华为、小米、中兴、联想等手机厂商,共同举办了“快应用”标准启动发布会。
“快应用”是几家手机厂商基于硬件平台共同推出的新型应用生态,用户不必下载安装,即点即用,能够享受到原生应用的性能体验。“快应用”使用前端技术栈开发与原生渲染,兼具H5页面和原生应用的双重优点。
环境配置
quick app需要nodejs环境。
- 需安装6.0以上、8.0以下版本的nodejs,请从NodeJS官网下载,推荐v6.11.3 LTS。
- 建议先安装nvm,用nvm来管理nodejs版本,尤其是在正式工作环境下。
安装nvm
nvm的全称是Node Version Manager,一套使用广泛的nodejs版本管理工具。安装一般用以下两种方式即可:
通过curl:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
通过Wget:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
建议在linux下工作,一般不会有什么其他安装问题,安装完毕后重启terminal之后基本就可以了。本教程全部基于ubuntu,其他安装方式参见这里
安装完毕后可以输入nvm
确认一下是否安装成功。
安装完之后需要将nvm源修改为taobao源,在~/.bashrc
末尾加入:
NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
保存,重开terminal,就可以开始安装nodejs了。
nvm install v6.11.3 LTS
安装完试一下node -v
输出是否正常,输出版本号说明安装完成了。
安装hap-toolkit
npm是nodejs的包管理工具,然而这里我们还是需要把默认源改成taobao源,不然很慢。这里直接安装taobao提供的cnpm工具,替代npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成之后我们后续的npm命令都可以改用cnpm执行。接下来可以来装hap-toolkit:
cnpm install -g hap-toolkit
在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功,如下命令所示:
hap -V
第一个程序
接下来我们来看看怎么安装运行快应用。
创建项目
如果我想创建的项目名叫project1:
hap init project1
这样hap会在当前目录下创建project1文件夹并做一些基本的配置。结构如下:
├── node_modules
├── sign rpk包签名模块
│ └── debug 调试环境
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src
│ ├── Common 公用的资源文件和组件文件
│ │ └── logo.png manifest.json中配置的icon
│ ├── Demo 页面目录
│ | └── index.ux 页面文件,文件名不必与父文件夹相同
│ ├── app.ux APP文件(用于包括公用资源)
│ └── manifest.json 项目配置文件(如:应用描述、接口申明、页面路由等)
└── package.json 定义项目需要的各种模块及配置信息,npm install根据这个配置文件,自动下载所需的运行和开发环境
编译项目
在初始化之后,这个项目已经具备了在手机上运行的能力。在你的项目目录下执行:
cnpm install
这个命令会为你的quickapp安装相关的依赖包,安装完毕后我们可以开始编译:
cnpm run build
此时会生成两个文件夹:
- build:临时产出,包含编译后的页面js,图片等
- dist:最终产出,包含rpk文件。其实是将build目录下的资源打包压缩为一个文件,后缀名为rpk,这个rpk文件就是项目编译后的最终产出
一般来说我们只需要dist里的rpk。
安装调试器
现阶段如果要在其他手机上体验快应用,需要安装下面这两个apk,点击下载:
- 调试器
- 预览平台
运行方案推荐两种,http与本地。
- 本地
- 直接把rpk文件拖入手机,在调试器里本地安装即可
- http
- 实质上是在主机上运行一个服务器,通过http请求调试
- 在主机上运行
npm run server
- 会出现一个二维码,在调试器上扫描即可
之后就可以愉快的运行了,自测的效果感觉还可以。
项目配置
项目配置在src/manifest.json
中。
与传统安卓apk一样,这里会对整个应用做一些全局配置,但内容比较不同。个人觉得这里的配置更像一个web应用。
这里直接用一个manifest文件来展开:
{
# 包名,区分不同应用的唯一id,因为名称其实是可以一样的
"package": "com.application.demo",
# 应用名称
"name": "hi",
# 版本管理的话,每次更新将versionCode自增1即可
"versionName": "1.0.0",
"versionCode": "1",
"minPlatformVersion": "101",
# 程序的入口icon,所有关于文件的引用统一使用根目录
# 根目录对应src文件夹
"icon": "/Common/logo.png",
#
"features": [
{ "name": "system.prompt" },
{ "name": "system.router" },
{ "name": "system.shortcut" }
],
"permissions": [
{ "origin": "*" }
],
# 配置相关
"config": {
# 这里的设置是log输出的最低等级
# 如果是warn的话,info类型将不会输出
# 等级请参考js中的console日志
"logLevel": "off"
},
# 路由
# 这里会配置应用入口的页面
# 所有的页面都需要在这里配置
# 会把页面与对应的页面文件对应起来
# 经过配置之后可以通过/Demo访问到Demo目录下的index.ux页面
"router": {
"entry": "Demo",
"pages": {
"Demo": {
# 这里对应的Demo文件夹里的index.ux
"component": "index"
},
"DemoDetail": {
"component": "index"
},
"About": {
"component": "index"
}
}
},
# 配置页面UI显示
# 主要分为两种,页面公有与页面私有
"display": {
# 这三个都是所有页面公有的,顶部titleBar内容
"titleBarText": "public title"
"titleBarBackgroundColor": "#f2f2f2",
"titleBarTextColor": "#414141",
# 会增加一个导航栏
"menu": true,
# 页面私有内容
"pages": {
"Demo": {
# 这里面的内容就是每个页面私有的了
"titleBarText": "示例页",
"menu": false
},
"DemoDetail": {
"titleBarText": "详情页"
},
"About": {
"menu": false
}
}
}
}
更多内容请直接查询官方文档。