MD原文件 https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/quick-app-summary.md

注册账号通过 https://www.quickapp.cn/docCenter/post/74

一、环境搭建

1.1 安装nodeJS

需安装6.0以上版本的nodeJS

1.2 安装hap-toolkit

1
2
// hap -V // 会显示安装版本信息
npm install -g hap-toolkit

1.3 创建项目工程

1
2
3
4
5
6
hap init projectName

// 增加编译支持
hap update --force

cd projectName && npm i

生成的目录结构

1
2
3
4
5
6
7
8
9
10
11
12
├── sign rpk //包签名模块
│ └── debug //调试环境
│ ├── certificate.pem //证书文件
│ └── private.pem //私钥文件
├── src
│ ├── Common //公用的资源和组件文件
│ │ └── logo.png //应用图标
│ ├── Demo //页面目录
│ | └── index.ux //页面文件,可自定义页面名称
│ ├── app.ux //APP文件,可引入公共脚本,暴露公共数据和方法等
│ └── manifest.json //项目配置文件,配置应用图标、页面路由等
└── package.json //定义项目需要的各种模块及配置信息
  • src:项目源文件夹
  • sign:签名模块,当前仅有debug签名,如果内测上线,请添加release文件夹,增加线上签名;签名生成方法详见文档编译工具

编译项目

  • npm run release # 发布程序包,在 /dist/.signed.rpk,注意需要使用 release 签名模块
  • npm run build # 生成 builddist 两个目录。前者是临时产出,后者是最终产出
  • npm run watch # 文件保存时自动编译和调试

手动编译项目

在项目的根目录下,运行如下命令进行编译打包,生成rpk包

1
npm run build
  • 编译打包成功后,项目根目录下会生成文件夹:builddist
  • build:临时产出,包含编译后的页面js,图片等
  • dist:最终产出,包含rpk文件。其实是将build目录下的资源打包压缩为一个文件,后缀名为rpk,这个rpk文件就是项目编译后的最终产出

自动编译项目

  • 每次修改源代码文件后,都自动编译项目
1
npm run watch

在安卓手机上安装调试工具

https://www.quickapp.cn/docCenter/post/69

image.png

1.4 连接手机进行调试

注意:一定要注意手机连接的wifi与电脑所连接的网络需要在同一局域网和网段,需要能够相互访问。

  • 在项目根目录下执行如下命令,启动HTTP调试服务器:(server前需要先npm run build
1
npm run server
  • 开发者可以通过命令行终端或者调试服务器主页看到提供扫描的二维码
  • 开发者通过快应用调试器扫码安装按钮,扫码安装待调试的rpk文件
  • 开发者点击快应用调试器中的开始调试按钮,开始调试

打开之前安装的快应用调试助手扫描即可预览

image.png

扫描二维码之后点击开始调试,会调出devtool工具本地调试

image.png

image.png

1.5 安装Hap Extension

启动Visual Studio Code,打开项目,点击左上侧扩展,搜索hap,点击安装Hap Extension

二、快应用结构分析

2.1 文件组织

一个应用包含:描述项目配置信息的manifest文件,放置项目公共资源脚本的app.ux文件,多个描述页面/自定义组件的ux文件

1
2
3
4
5
6
7
8
9
10
├── manifest.json
├── app.ux
├── Page1
│ ├── page1.ux
├── Page2
│ ├── page2.ux
└── Common
├── ComponentA.ux
├── ComponentB.ux
└── xxx.png

其中Common目录下为公用的资源文件和组件文件,每个页面目录下存放各自页面私有的资源文件和组件文件,如:图片,CSSJS

2.2 源码文件

APP,页面和自定义组件均通过ux文件编写,ux文件由template模板、style样式和script脚本3个部分组成,一个典型的页面ux文件示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>

<div class="demo-page">
<text class="title">欢迎打开{{title}}text>

<input class="btn" type="button" value="跳转到详情页" onclick="routeDetail">
div>
template>

<style>
.demo-page {
flex-direction: column;
justify-content: center;
align-items: center;
}

.title {
font-size: 40px;
text-align: center;
}

.btn {
width: 550px;
height: 86px;
margin-top: 75px;
border-radius: 43px;
background-color: #09ba07;
font-size: 30px;
color: #ffffff;
}
style>

<script>
import router from '@system.router'

export default {
// 页面级组件的数据模型,影响传入数据的覆盖机制:private内定义的属性不允许被覆盖
private: {
title: '示例页面'
},
routeDetail () {
// 跳转到应用内的某个页面,router用法详见:文档->接口->页面路由
router.push ({
uri: '/DemoDetail'
})
}
}
script>

2.3 manifest配置

https://doc.quickapp.cn/framework/manifest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
{
# 包名,区分不同应用的唯一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
}
}
}
}
  • package 应用包名,确认与原生应用的包名不一致,推荐采用com.company.module的格式,如:com.example.demo
  • name 应用名称,6个汉字以内,与应用商店保存的名称一致,用于在桌面图标、弹窗等处显示应用名称
  • icon 应用图标,提供192x192大小的即可
  • versionName 应用版本名称,如:"1.0"
  • versionCode 应用版本号,从1自增,推荐每次重新上传包时versionCode+1
  • minPlatformVersion 支持的最小平台版本号,兼容性检查,避免上线后在低版本平台运行并导致不兼容;如果不填按照内测版本处理
  • features 接口列表,绝大部分接口都需要在这里声明,否则不能调用,详见每个接口的文档说明
  • config 系统配置
    • logLevel:打印日志等级,分为off,error,warn,info,log,debug
    • designWidth:页面设计基准宽度,根据实际设备宽度来缩放元素大小
  • router 路由信息
    • entry:首页名称
    • pages:页面配置列表,key值为页面名称(对应页面目录名,例如Hello对应’Hello’目录),value为页面详细配置page,详见下面说明
    • router.page 用于定义单个页面路由信息
      • component: 页面对应的组件名,与ux文件名保持一致,例如'hello' 对应 'hello.ux'
      • path 页面路径,例如“/user”,不填则默认为/<页面名称>。path必须唯一,不能和其他pagepath相同。下面pagepath因为缺失,会被设置为“/Index”"Index": {"component": "index"}
      • filter: 声明页面可以处理某种请求
  • display UI显示相关配置
    • backgroundColor 窗口背景颜色
    • fullScreen 是否是全屏模式,默认不会同时作用于titleBartitleBar需要继续通过titleBar控制
    • titleBar 是否显示titleBar
    • titleBarBackgroundColor标题栏背景色
    • titleBarTextColor 标题栏文字颜色
    • titleBarText 标题栏文字(也可通过页面跳转传递参数(titleBarText)设置)
    • menu 是否显示标题栏右上角菜单按钮
    • pages 各个页面的显示样式,key为页面名(与路由中的页面名保持一致),value为窗口显示

2.4 app.ux

当前app.ux编译后会包含manifest配置信息(可以在npm run build之后查看文件内容),所以请不要删除/**manifest**/的注释内容标识

  • 您可以在