快应用是一种新的应用形态,以往的手机端应用主要有两种方式:网页、原生应用;网页无需安装,却体验不是很好;原生应用体验流畅,却需要从应用商店下载安装,难以一步直达用户;快应用的出现,就是希望能够让用户无需下载安装,并且还能流畅的体验应用内容。
为了达到上面的目标,快应用建立一种新的语言开发规范,同时提供一系列的开发套件辅助支持。简单来说,开发者主要利用前端知识与技能,以及对应的IDE,手机设备就可以做原型的开发。快应用使用前端技术栈开发,原生渲染,同时具备H5与原生应用的双重优点,开发者使用的前端技术栈资料多,学习成本底。
2018年3月份,由小米,OPPO,VIVO,华为等10家国内主流厂商成立了快应用联盟,从技术规范层面做了统一,并保证了开发者开发的快应用可以直接在所有的联盟内厂商的手机设备上运行。
快应用框架深度集成进各手机厂商的手机操作系统中,可以在操作系统层面形成用户需求与应用服务的无缝连接,很多只用在原生应用中才能使用的功能,在快应用中可以很方便的实现,享受原生应用体验,同时不用担心分发留存等问题,资源消耗也比较少。
对于每台手机设备,应用可以从多个系统入口,引用用户体验产品。比如:全局搜索、负一屏、浏览器搜索等。
native
渲染,性能体验会比较好,而小程序目前是webview
渲染css
支持能力较弱native
,可以调起丰富的系统api,小程序在此方面会有些无力native
渲染,deeplink
入口,原生桌面入口,push
能力需安装
6.0
以上版本的NodeJS
// hap -V // 会显示安装版本信息
npm install -g hap-toolkit
hap init projectName
// 增加编译支持
hap update --force
cd projectName && npm i
生成的目录结构
├── 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
# 生成 build
和 dist
两个目录。前者是临时产出,后者是最终产出npm run watch
# 文件保存时自动编译和调试手动编译项目
在项目的根目录下,运行如下命令进行编译打包,生成rpk包
npm run build
build
、dist
build
:临时产出,包含编译后的页面js,图片等dist
:最终产出,包含rpk
文件。其实是将build
目录下的资源打包压缩为一个文件,后缀名为rpk
,这个rpk
文件就是项目编译后的最终产出自动编译项目
npm run watch
在安卓手机上安装调试工具
https://www.quickapp.cn/docCenter/post/69
image.png
注意:一定要注意手机连接的wifi与电脑所连接的网络需要在同一局域网和网段,需要能够相互访问。
server
前需要先npm run build
)npm run server
rpk
文件打开之前安装的快应用调试助手扫描即可预览
image.png
扫描二维码之后点击开始调试,会调出devtool工具本地调试
image.png
image.png
启动Visual Studio Code,打开项目,点击左上侧扩展,搜索hap,点击安装Hap Extension
一个应用包含:描述项目配置信息的
manifest
文件,放置项目公共资源脚本的app.ux
文件,多个描述页面/自定义组件的ux文件
├── 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
文件夹,增加线上签名)
APP
,页面和自定义组件均通过ux
文件编写,ux
文件由template
模板、style
样式和script
脚本3个部分组成,一个典型的页面ux
文件示例如下
欢迎打开{{title}}
https://doc.quickapp.cn/framework/manifest.html
{
# 包名,区分不同应用的唯一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
必须唯一,不能和其他page
的path
相同。下面page
的path
因为缺失,会被设置为“/Index”
:"Index"
: {"component": "index"}
filter
: 声明页面可以处理某种请求display UI
显示相关配置
backgroundColor
窗口背景颜色fullScreen
是否是全屏模式,默认不会同时作用于titleBar
,titleBar
需要继续通过titleBar
控制titleBar
是否显示titleBar
titleBarBackgroundColor
标题栏背景色titleBarTextColor
标题栏文字颜色titleBarText
标题栏文字(也可通过页面跳转传递参数(titleBarText
)设置)menu
是否显示标题栏右上角菜单按钮pages
各个页面的显示样式,key为页面名(与路由中的页面名保持一致),value
为窗口显示当前
app.ux
编译后会包含manifest
配置信息(可以在npm run build
之后查看文件内容),所以请不要删除/**manifest**/
的注释内容标识
中引入一些公共的脚本,并暴露在当前app的对象上,如下所示,然后就可以在页面ux文件的ViewModel
中,通过this.$app.util
访问CSS Flexbox
(弹性盒)样式支持2种导入外部文件的方式
模板内部样式
样式预编译
目前支持less, sass的预编译
{{title}}
?
{{($item || {}).name}}
{{($item || {}).value}}
This is children of hint templete.
可以通过
import
引入功能模块,在代码中调用模块方法
import fetch from "@system.fetch"
也可以一次引入所有的模块,例如
import system from "@system"
system.network
来调用接口方法2.7.2.1 页面级组件
data(废弃)
JSON
对象data
的值data
方式声明的属性会被外部数据覆盖,因此存在一定安全风险,推荐使用下面的public
,protected
,rivate
来声明属性(注意:它们不能与data同时声明)public
页面级组件的数据模型,影响传入数据的覆盖机制:
public
内定义的属性允许被传入的数据覆盖,如果外部传入数据的某个属性未被声明,在public
中不会新增这个属性
protected
页面级组件的数据模型,影响传入数据的覆盖机制:protected内定义的属性,允许被应用内部页面请求传递的数据覆盖,不允许被应用外部请求传递的数据覆盖
private
页面级组件的数据模型,影响传入数据的覆盖机制:private内定义的属性不允许被覆盖
export default {
props: ['title', 'dataList'], // 传入属性:必须字母开头,全小写、数字和 `-` ,不能保留字和函数,不能以符号开头
public: {
// 定义变量,会被 props 和内部请求覆盖
},
private: {
// 定义变量,不会被 props 覆盖
},
protected: {
// 定义变量,不会被 props 覆盖, 但会被内部请求覆盖(获得通过 a 标签和 router 传递的参数)
}
data :{ // data 不能和 public、private、protected 一起使用,data 也可以是 function(返回 data 对象,onInit之前执行)
// 定义变量:不能保留字和函数,不能以符号开头
totalData: [{name: 'a',value: 97},{name: 'b',value: 98}];
// 定义变量,会被 props 覆盖
},
onTabClick(index){ // 内部事件定义
console.log(index);
},
events: {
onIDChange(){
// 外部事件定义
}
}
}
2.7.2.2 自定义组件
data
自定义组件的数据模型,能够转换为JSON对象;属性名不能以$或_开头, 不要使用for, if, show, tid等保留字
如果是函数,返回结果必须是对象,在组件初始化时会执行函数获取结果作为data的值
props
props: ['propA']
,可通过
方式传递到组件内部prop验证
在自定义组件中,可将props定义为带验证需求的对象。其中,key为属性名,value为属性对应的验证需求。验证失败则输出错误提示日志,增加prop验证有利于规范自定义组件的使用
属性 | 类型 | 描述 |
---|---|---|
type |
- | 检查属性值的类型。支持单一类型和多种可能类型,可在原生和自定义构造函数中任意选择,单独或组合使用。原生构造函数:String Number Boolean Function Object Array Symbol |
default |
- | 设置属性的默认值 |
required |
Boolean |
设置属性是否必填 |
validator |
Function |
设置自定义验证函数。若函数的返回值为真,则通过验证;否则验证失败 |
export default {
props: {
// 单一类型检查的简写
propA: Number,
// 多种可能类型的简写
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
default () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator (value) {
return value === 'hello'
}
}
}
}
2.7.2.3 公共对象
属性 | 类型 | 描述 |
---|---|---|
$app |
Object |
应用对象 |
$page |
Object |
页面对象 |
$valid |
Boolean |
页面对象是否有效 |
$visible |
Boolean |
页面是否处于用户可见状态 |
2.7.2.4 应用对象
可通过
$app
访问
属性 | 类型 | 描述 |
---|---|---|
$def |
Object |
使用this.$app.$def 获取在app.ux 中暴露的对象 |
$data |
Object |
使用this.$app.$data 获取在manifest.json 的config.data 中声明的全局数据 |
2.7.2.5 页面对象
可通过
$page
访问
属性 | 类型 | 描述 |
---|---|---|
actio n |
String |
获取打开当前页面的action 。仅在当前页面是通过filter 匹配的方式打开时有效,否则为undefined |
uri |
String |
获取打开当前页面的uri。仅在当前页面是通过filter匹配的方式打开时有效,否则为undefined |
2.7.3.1 数据方法
属性 | 类型 | 参数 | 描述 |
---|---|---|---|
$set |
Function |
key: String value: Any |
添加数据属性,用法:this.$set('key',value) this.$vm('id').$set('key',value) |
$delete |
Function |
key: String |
删除数据属性,用法:this.$delete('key') this.$vm('id').$delete('key') |
2.7.3.2 公共方法
属性 | 描述 |
---|---|
$element |
获取指定id 的组件dom 对象,如果没有指定id ,则返回根组件dom 对象用法: this.$element('xxx') 获取id 为xxx 的div 组件实例对象 this.$element() 获取根组件实例对象 |
$root |
获取顶层ViewModel |
$parent |
获取父亲ViewModel |
$child |
获取指定id 的自定义组件的ViewModel 用法:this.$child('xxx') 获取id 为xxx 的div 组件ViewModel |
$vm deprecated |
请使用上面this.$child('xxx') 替代 |
$rootElement deprecated |
请使用上面this.$element() 替代 |
$forceUpdate |
更新ViewModel 数据,可能会触发DOM 操作,如:创建节点、更新节点、删除节点等;这些DOM操作不一定在数据更新时立即执行,而是在开发者的业务代码执行后触发;若开发者期望数据更新时立即执行相应的DOM 操作,可使用:this.$forceUpdate() ;一般不推荐使用 |
2.7.3.3 事件方法
属性 | 参数 | 描述 |
---|---|---|
$on |
type: String 事件名handler: Function 事件句柄函数 |
添加事件处理句柄用法:this.$on('xxxx', this.fn) fn 是在 中定义的函数 |
$off |
type: String 事件名handler : 事件句柄函数 |
删除事件处理句柄用法:this.$off('xxxx', this.fn) this.$off('xxx') 删除指定事件的所有处理句柄 |
$dispatch |
type: String 事件名 |
向上层组件发送事件通知用法:this.$dispatch('xxx') 正常情况下,会一直向上传递事件(冒泡)如果要停止冒泡,在事件句柄函数中调用evt.stop() 即可 |
$broadcast |
type: String 事件名 |
向子组件发送事件通知用法:this.$broadcast('xxx') 正常情况下,会一直向下传递事件如果要停止传递,在事件句柄函数中调用evt.stop() 即可 |
$emit |
type: String 事件名data: Object 事件参数 |
触发事件,对应的句柄函数被调用用法:this.$emit('xxx') this.$emit('xxx', {a:1}) 传递的事件参数可在事件回调函数中,通过evt.detail 来访问,例如evt.detail.a |
$emitElement |
type: String 事件名data: Object 事件参数id: String 组件id (默认为-1 代表根元素) |
触发组件事件,对应的句柄函数被调用用法:this.$emitElement('xxx', null, 'id') this.$emitElement('xxx',{a:1}) 传递的事件参数可在事件回调函数中,通过evt.detail 来访问,例如evt.detail.a |
$watch |
data: String 属性名, 支持'a.b.c' 格式,不支持数组索引handler: String 事件句柄函数名,函数的第一个参数为新的属性值,第二个参数为旧的属性值 |
动态添加属性/事件绑定,属性必须在data 中定义,handler 函数必须在 定义;当属性值发生变化时事件才被触发用法:this.$watch('a','handler') |
2.7.3.4 应用方法
可通过$app访问
属性 | 描述 |
---|---|
exit | 退出快应用,结束应用生命周期。 调用方法: this.$app.exit() |
2.7.3.5 页面方法
可通过
$page
访问
属性 | 参数 | 描述 |
---|---|---|
setTitleBar |
text: String 标题栏文字textColor: String 文字颜色backgroundColor: String 背景颜色backgroundOpacity : Number 背景透明度menu : Boolean 是否在标题栏右上角显示菜单按钮 |
设置当前页面的标题栏用法:this.$page.setTitleBar({text:'Hello', textColor:'#FF0000', backgroundColor:'#FFFFFF', backgroundOpacity:0.5, menu: true}) |
finish |
无 | 从本页面退出,结束页面生命周期。调用方法:this.$page.finish() |
for
for
指令用于循环输出一个数组类型的数据
for
指令的数组索引和数组元素时,变量名不可以用$
或_
开头;
{{$idx}}.{{$item.name}}
{{$idx}}.{{value.name}}
{{personIndex}}.{{personItem.name}}
指令if与指令show
if
条件指令,是指if/elif/else
这3个相关指令,用于控制是否增加或者删除组件;show
指令,是指是否显示组件,用于控制组件的显示状态,并不会从DOM结构中删除
显示隐藏:
show: 渲染但控制是否显示
条件指令:
if: if条件
elif: elif条件
else: 其余
if/elif
指令的值为false
时,节点会从页面中移除,当if/elif
指令值为true
,组件会动态插入节点中;show
指令的值为true
时,节点可见, - 当其值为false
时,组件不可见,但节点仍会保留在页面DOM结构中组件block
block组件是表达逻辑区块的组件,没有对应的Native组件。可以使用
实现更为灵活的"列表/条件渲染"。如在 上使用for指令和if指令
点击:控制是否显示城市
城市:{{city.name}}
景点:{{$item.name}}
组件slot
slot节点用于向开发者额外开发的自定义ux组件中插入内容
slot
组件,当该组件被引入到页面组件中后,开发者可以灵活定义该自定义组件内部的子内容//自定义组件part1.ux
{{ header }}
{{ footer }}
//自定义组件使用者页面index.ux
slot节点内容
在子组件中使用
slot
组件,使得子组件接纳调用者传入的子内容,从而动态渲染子组件,得到最终的页面
当前为APP的生命周期提供了两个回调函数:
onCreate
,onDestroy
;可在app.ux
中定义回调函数
image.png
import {
natives
} from './util/asyncNatives'
export default {
onCreate () {
console.info('Application onCreate')
},
onDestroy () {
console.info('Application onDestroy')
},
// 暴露给所有页面,在页面中通过:this.$app.$def.method1()访问
method1 () {
console.info('这是APP的方法')
},
// 暴露给所有页面,在页面中通过:this.$app.$def.data1访问
data1: {
name: '这是APP存的数据'
},
natives
}
app.ux
中,开发者可以做一些独立于页面的操作。比如:引入公共的JS资源,然后暴露给所有页面app.ux
中,通过this.$def
访问app.ux
中定义的数据和方法console.info(`获取:APP文件中的数据:${this.$def.data1.name}`)
console.info(`执行:APP文件中的方法`, this.$def.method1())
console.info(`获取:manifest.json的应用名称:${this.$def.manifest.name}`)
console.info(`获取:manifest.json的config.data的数据:${this.$data.name}`)
在
pageName.ux
中,通过this.$app.$def
访问app.ux
中定义的数据和方法
console.info(`获取:APP文件中的数据:${this.$app.$def.data1.name}`)
console.info(`执行:APP文件中的方法`, this.$app.$def.method1())
console.info(`获取:manifest.json的应用名称:${this.$app.$def.manifest.name}`)
console.info(`获取:manifest.json的config.data的数据:${this.$app.$data.name}`)
关于app.$def
app.ux
中导出的对象,放置业务相关的全局数据和方法onCreate
, onDestroy
生命周期;当应用启动时会执行onCreate
方法,里面执行this.variable1
的赋值是在$app
对象上onCreate
, onDestroy
方法并不会执行,作用仅仅只是把方法复制到前者对象上而已this.$app.method1()
调用,也可以通过this.$app.$def.method1()
调用;不同之处在于前者可以取到之前赋值的variable1
变量,而后者不可以取到(因为之前的赋值是在$app
对象上执行的)image.png
onInit()
表示ViewModel的数据已经准备好,可以开始使用页面中的数据
private: {
// 生命周期的文本列表
lcList: []
},
onInit () {
this.$page.setTitleBar({ text: '生命周期' })
this.lcList.push('onInit')
console.info(`触发:onInit`)
console.info(`执行:获取ViewModel的lcList属性:${this.lcList}`) // 执行:获取ViewModel的lcList属性:onInit
// $app信息
console.info(`获取:manifest.json的config.data的数据:${this.$app.$data.name}`)
console.info(`获取:APP文件中的数据:${this.$app.$def.data1.name}`)
console.info(`执行:APP文件中的方法`, this.$app.$def.method1())
}
onReady()
表示ViewModel的模板已经编译完成,可以开始获取DOM节点(如:this.$element(idxxx)
onReady () {
this.lcList.push('onReady')
console.info(`触发:onReady`)
console.info(`执行:获取模板节点:${this.$rootElement()}`) // 执行:获取模板节点:...
}
onShow(), onHide()
页面被切换隐藏时调用onHide(),页面被切换重新显示时调用onShow()
ViewModel
的$visible
属性:true
表示显示,false
表示隐藏onShow () {
this.lcList.push('onShow')
console.info(`触发:onShow`)
console.info(`执行:获取页面显示状态属性:${this.$visible}`) // true
},
onHide () {
this.lcList.push('onHide')
console.info(`触发:onHide`)
console.info(`执行:获取页面显示状态属性:${this.$visible}`) // false
}
onDestroy()
页面被销毁时调用,被销毁的可能原因有:用户从当前页面返回到上一页,或者用户打开了太多的页面,框架自动销毁掉部分页面,避免占用资源
geolocation.unsubscribe()
onDestroy () {
console.info(`触发:onDestroy`)
console.info(`执行:页面要被销毁,销毁状态:${this.$valid},应该做取消接口订阅监听的操作: geolocation.unsubscribe()`) // true,即将销毁
setTimeout(function () {
console.info(`执行:页面已被销毁,不会执行`) // 页面已销毁,不会执行
}.bind(this), 0)
}
onBackPress()
当用户点击返回实体按键、左上角返回菜单、调用返回API时触发该事件
onBackPress () {
console.info(`触发:onBackPress`)
// true:表示自己处理;否则默认返回上一页
// return true
}
返回上一页的接口API:
router.back()
onMenuPress()
当使用原生的顶部标题栏时,可以通过manifest.json中的menu属性配置是否显示右上角的菜单
onMenuPress () {
this.lcList.push('onMenuPress')
console.info(`触发:onMenuPress`)
}
A页面的生命周期接口的调用顺序
onInit()
-> onReady()
-> onShow()
onHide()
onShow()
onBackPress() -> onHide() -> onDestroy()
$app
应用对象$app.$def
获取在app.ux
中暴露的对象$app.$data
获取在manifest.json
的config.data
中声明的全局数据$page
页面对象$page.action
获取打开当前页面的action
。仅在当前页面是通过filter
匹配的方式打开时有效,否则为undefined
。参见manifest
$page.uri
获取打开当前页面的uri
。仅在当前页面是通过filter
匹配的方式打开时有效,否则为undefined
$page.setTitleBar
设置页面标题$valid
页面对象是否有效$visible
页面是否处于用户可见状态
this.$page.setTitleBar
参数属性包括
{
text: 'Hello QuickApp', //标题栏文字
textColor: '#ffff', //文字颜色
backgroundColor: '#434343', //背景颜色
backgroundOpacity: '0.8', //背景透明度
menu: false, //是否在标题栏右上角显示菜单按钮 | 设置当前
}
$element
获取指定id的组件dom对象,如果没有指定id,则返回根组件dom
对象用法:this.$element('xxx')
获取id为xxx的组件实例对象 this.$element()
获取根组件实例对象$root
获取顶层ViewModel
$parent
获取父亲ViewModel
$child
获取指定id的自定义组件的ViewModel
用法:this.$child('xxx')
获取id
为xxx
的div
组件ViewModel
$vm(弃用) 请使用上面
this.$child('xxx')`替代$forceUpdate
强制页面刷新$set
添加数据属性,必须在onInit
函数中使用,用法:this.$set('key',value)
$delete
删除数据属性,如果在onInit
函数中使用,用法:this.$delete('key')
注意,获取元素应该在页面已渲染后,如 onReady 事件中或 onReady 事件执行完以后
$set
添加数据属性,用法:this.$vm('id').$set('key',value)
$delete
删除数据属性,用法:this.$vm('id').$delete('key')
$on
在当前页面注册监听事件, 可监听$emit()
、 $dispatch()
、 $broadcast()
等触发的自定义事件,不能用于注册组件节点的事件响应$off
移除事件监听,参数 fnHandler
为可选,传递仅移除指定的响应函数,不传递则移除此事件的所有监听$emit
触发当前实例监听事件函数,与 $on()
配合使用布局和尺寸
border-box
模型且不支持 box-sizing
属性px
和%
/src/manifest.json
中 config.designWidth
的值,默认750
)CSS
tag
选择器、class
选择器、id选择器来为组件设置样式@import
引入外部样式、内联样式、行内样式:disabled
,:checked
,:focus
等)支持样式 flex-direction, flex-wrap, justify-content, align-items, align-content 更多详情 https://doc.quickapp.cn/widgets/div.html 传递方法1 传递方法2 通过 接收参数 上述2种传递参数的方法,其接收方法一致,在接收参数页面的 回传参数 开发者可能会遇到需要在页面之间回传参数的需求 页面A实现代码如下 页面B实现代码如下: https://doc.quickapp.cn/framework/script.html 会利用到一个构造函数 其中 父组件到子组件 子组件到父组件 配合 从传统网页调起需引入以下脚本 $on(evtName, fnHandler) 在当前页面注册监听事件, 可监听 $off(evtName, fnHandler) 移除事件监听,参数 fnHandler 为可选,传递仅移除指定的响应函数,不传递则移除此事件的所有监听 触发ViewModel事件 页面的交互中可能会遇到一些非手动触发的需求,$emit() 通过触发当前实例上的事件达到动态触发事件的行为 $emit(evtName, evtDetail) 监听原生组件事件 触发原生组件事件 通过 可以触发指定组件 1)编译打包工程 2)增加 release 签名 通过 https://doc.quickapp.cn/tools/compiling-tools.html 在工程的 3)发布程序包 发布程序包前需要增加 image image 快应用注册账号 https://www.quickapp.cn/docCenter/post/74 image.png
: 气泡框
target
和 placement
mask-color
visibilitychange
: 下拉刷新
offset
和 refreshing
background-color
和 progress-color
refresh
: 富文本编辑器
type(值为 html)
div
样式, height
无效
九、页面切换和参数传递
9.1 参数传递
跳转页面
携带参数key2跳转
// 导入模块
import router from '@system.router'
router
接口:router.push()
, router.replace()
, 接受一个如下结构的对象,用法这个和前端 router
一致。{
url: '/src/home/index.html',
params: { key: 2333 /* 需要传递的参数 */ }
}
protected
对象中获取即可(可设置默认值) export default {
protected: {
key: ''
},
onInit () {
this.$page.setTitleBar({ text: '接收参数' })
// js中输出页面传递的参数
console.info('key: ' + this.key)
}
}
= 此时,组件a和接口router传参不能满足需求,可以借助于app级别的对象:this.data
9.2 页面间通信
new BroadcastChannel(string)
, 它接受一个字符串参数,作为实例的频道名称。它的实例具有以下属性和方法
name
频道名称,区分不同的消息频道(注意:不同频道之间不可通信)。postMessage
用于在当前频道中广播消息onmessage
订阅消息。在频道中接收到广播消息之后,会给所有订阅者派发消息事件close
关闭当前的频道
onmessage
事件有2个属性(通过 event
对象访问)
type
messagedata
接收到的消息内容十、组件通信
props
获取父组件传入的值,见上文 template 部分this.watch(props, callback)
监控传入数据变化并调用回调函数this.$broadcast()
完成事件触发,子组件通过$on()
绑定事件并响应
this.$dispatch()
完成事件触发,父组件通过$on()
绑定事件并响应this.$emit()
触发在节点上绑定的事件来执行父组件的方法
this.$broadcast()
、this.$emit()
和 this.$dispatch()
参数一致event.detail
来获取参数event.stop()
来结束传递十一、Deeplink
标签框架支持通过链接从外部打开应用,格式http://hapjs.org/app/
package
: 应用包名,必选path
: 应用内页面的path
,可选,默认为首页key-value
: 希望传给页面的参数,可选,可以有多个
十二、事件监听与触发
$on
用于监听自定义事件;$off
移除对应的事件监听
$emit()
、 $dispatch()
、 $broadcast()
等触发的自定义事件,不能用于注册组件节点的事件响应export default {
onInit(){
this.$on('customEvtType1', this.customEvtType1Handler)
},
customEvtType1Handler(evt){
// 事件类型,事件参数
console.info(`触发事件:类型:${evt.type}, 参数: ${JSON.stringify(evt.detail)}`);
}
}
export default {
removeEventHandler () {
// 不传递fnHandler:移除所有监听
this.$off('customEvtType1')
// 传递fnHandler:移除指定的监听函数
this.$off('customEvtType1', this.customEvtType1Handler)
}
}
$on()
配合使用$emit()
目前只触发 $on
所监听的事件export default {
emitEvent () {
this.$emit('customEvtType1', { params: '参数内容' })
}
}
$emitElement()
完成事件的动态触发
id
的事件,通过evt.detail
获取传递的参数;该方法对自定义组件无效
十三、打包及发布
13.1 编译工具
npm run build
/build
/dist/.rpk
openssl
命令等工具生成签名文件private.pem
、certificate.pem
,例如:
opensslreq -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -outcertificate.pem
sign
目录下创建 release
目录,将私钥文件 private.pem
和证书文件 certificate.pem
拷贝进去
release
签名,然后在工程的根目录下运行npm run release
/dist/.release.rpk
debug
签名,可以使用npm run release -- --debug
13.2 IDE发布
RPK
。点击【发布 rpk
包】按钮, 生成成功的话会弹出对应的文件夹十四、快应用分享专题
十五、上传到快应用中心审核
十六、一些问题
undefined
show
属性并不好用,没起什么作用onInit
等等函数是页面生命周期,不是组件生命周期,不会因为组件状态变化而执行display
类型只有 flex
和 none
border-box
page
中使用@import
引入
逻辑控制块,仅支持for
和if/elif/else
,不支持show
条件渲染justify-content
属性,在快应用官方开发环境中,目前不支持space-around
vscode
插件hap-extension
不支持sass
语法,可以把.scss
单独存储,通过style.src
引入到.ux
中,同时方便管理props
为function
html
都不能用,比如没有 p
,h1~h2
等,因为它只是模拟了部分 html
标签,最终会转化成原生组件a
、span
、text
、label
放置文本内容position
只能是 fixed
或 none
px
和%
十七、快应用开发资源
官方资讯
官方文档
工具
示例
插件
教程
讨论
分享
作者:poetries
链接:https://www.jianshu.com/p/94fc14897c9f
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。