快应用是一种新的应用形态,以往的手机端应用主要有两种方式:网页、原生应用;网页无需安装,却体验不是很好;原生应用体验流畅,却需要从应用商店下载安装,难以一步直达用户;快应用的出现,就是希望能够让用户无需下载安装,并且还能流畅的体验应用内容。
为了达到上面的目标,快应用建立一种新的语言开发规范,同时提供一系列的开发套件辅助支持。简单来说,开发者主要利用前端知识与技能,以及对应的IDE,手机设备就可以做原型的开发。快应用使用前端技术栈开发,原生渲染,同时具备H5与原生应用的双重优点,开发者使用的前端技术栈资料多,学习成本底。
2018年3月份,由小米,OPPO,VIVO,华为等10家国内主流厂商成立了快应用联盟,从技术规范层面做了统一,并保证了开发者开发的快应用可以直接在所有的联盟内厂商的手机设备上运行。
快应用框架深度集成进各手机厂商的手机操作系统中,可以在操作系统层面形成用户需求与应用服务的无缝连接,很多只用在原生应用中才能使用的功能,在快应用中可以很方便的实现,享受原生应用体验,同时不用担心分发留存等问题,资源消耗也比较少。
对于每台手机设备,应用可以从多个系统入口,引用用户体验产品。比如:全局搜索、负一屏、浏览器搜索等。
- 二者都采用前端技术栈,快应用是 渲染,性能体验会比较好,而小程序目前是渲染
- 二者开发框架和规范不同,所以代码写法上有差异,快应用的支持能力较弱
- 快应用基于,可以调起丰富的系统api,小程序在此方面会有些无力
- 应用商店
- 桌面图标
- 全局搜索
- 浏览器搜索
- 网页跳转
- 负一屏
- 智能推送
- 智慧识屏
- 场景化入口(短信按钮、应用卸载替换、二维码、传送门)
- 轻松调起更多系统api
- 各厂商的流量扶持
- 渲染,入口,原生桌面入口,能力
需安装以上版本的
生成的目录结构
- :项目源文件夹
- :签名模块,当前仅有签名,如果内测上线,请添加文件夹,增加线上签名;签名生成方法详见文档编译工具
编译项目
- # 发布程序包,在 ,注意需要使用 签名模块
- # 生成 和 两个目录。前者是临时产出,后者是最终产出
- # 文件保存时自动编译和调试
手动编译项目
在项目的根目录下,运行如下命令进行编译打包,生成rpk包
- 编译打包成功后,项目根目录下会生成文件夹:、
- :临时产出,包含编译后的页面js,图片等
- :最终产出,包含文件。其实是将目录下的资源打包压缩为一个文件,后缀名为,这个文件就是项目编译后的最终产出
自动编译项目
- 每次修改源代码文件后,都自动编译项目
在安卓手机上安装调试工具
https://www.quickapp.cn/docCenter/post/69
image.png
注意:一定要注意手机连接的wifi与电脑所连接的网络需要在同一局域网和网段,需要能够相互访问。
- 在项目根目录下执行如下命令,启动HTTP调试服务器:(前需要先)
- 开发者可以通过命令行终端或者调试服务器主页看到提供扫描的二维码
- 开发者通过快应用调试器扫码安装按钮,扫码安装待调试的文件
- 开发者点击快应用调试器中的开始调试按钮,开始调试
打开之前安装的快应用调试助手扫描即可预览
image.png
扫描二维码之后点击开始调试,会调出devtool工具本地调试
image.png
image.png
启动Visual Studio Code,打开项目,点击左上侧扩展,搜索hap,点击安装Hap Extension
- 更多详情 https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html
一个应用包含:描述项目配置信息的文件,放置项目公共资源脚本的文件,多个描述页面/自定义组件的ux文件
目录的简要说明如下
- :项目源文件夹
- :签名模块(当前仅有签名,如果内测上线,请添加文件夹,增加线上签名)
,页面和自定义组件均通过文件编写,文件由模板、样式和脚本3个部分组成,一个典型的页面文件示例如下
https://doc.quickapp.cn/framework/manifest.html
- 应用包名,确认与原生应用的包名不一致,推荐采用的格式,如:
- 应用名称,6个汉字以内,与应用商店保存的名称一致,用于在桌面图标、弹窗等处显示应用名称
- 应用图标,提供大小的即可
- 应用版本名称,如:
- 应用版本号,从1自增,推荐每次重新上传包时
- 支持的最小平台版本号,兼容性检查,避免上线后在低版本平台运行并导致不兼容;如果不填按照内测版本处理
- 接口列表,绝大部分接口都需要在这里声明,否则不能调用,详见每个接口的文档说明
- 系统配置
- :打印日志等级,分为,,,,,
- :页面设计基准宽度,根据实际设备宽度来缩放元素大小
- 路由信息
- 首页名称
- :页面配置列表,值为页面名称(对应页面目录名,例如Hello对应'Hello'目录),为页面详细配置,详见下面说明
- 用于定义单个页面路由信息
- : 页面对应的组件名,与文件名保持一致,例如 对应
- 页面路径,例如,不填则默认为/<页面名称>。必须唯一,不能和其他的相同。下面的因为缺失,会被设置为::
- : 声明页面可以处理某种请求
- 显示相关配置
- 窗口背景颜色
- 是否是全屏模式,默认不会同时作用于,需要继续通过控制
- 是否显示
- 标题栏背景色
- 标题栏文字颜色
- 标题栏文字(也可通过页面跳转传递参数()设置)
- 是否显示标题栏右上角菜单按钮
- 各个页面的显示样式,key为页面名(与路由中的页面名保持一致),为窗口显示
当前编译后会包含配置信息(可以在之后查看文件内容),所以请不要删除的注释内容标识
- 您可以在中引入一些公共的脚本,并暴露在当前app的对象上,如下所示,然后就可以在页面ux文件的中,通过访问
- 样式布局采用(弹性盒)样式
支持2种导入外部文件的方式
模板内部样式
样式预编译
目前支持less, sass的预编译
2.7.1 模块声明
可以通过引入功能模块,在代码中调用模块方法
也可以一次引入所有的模块,例如
- 在代码中使用来调用接口方法
2.7.2 对象
2.7.2.1 页面级组件
data(废弃)
- 页面级组件的数据模型,能够转换为对象
- 如果是函数,返回结果必须是对象,在组件初始化时会执行函数获取结果作为的值
- 使用方式声明的属性会被外部数据覆盖,因此存在一定安全风险,推荐使用下面的,,来声明属性(注意:它们不能与data同时声明)
public
页面级组件的数据模型,影响传入数据的覆盖机制:内定义的属性允许被传入的数据覆盖,如果外部传入数据的某个属性未被声明,在中不会新增这个属性
protected
页面级组件的数据模型,影响传入数据的覆盖机制:protected内定义的属性,允许被应用内部页面请求传递的数据覆盖,不允许被应用外部请求传递的数据覆盖
private
页面级组件的数据模型,影响传入数据的覆盖机制:private内定义的属性不允许被覆盖
2.7.2.2 自定义组件
data
自定义组件的数据模型,能够转换为JSON对象;属性名不能以$或_开头, 不要使用for, if, show, tid等保留字 如果是函数,返回结果必须是对象,在组件初始化时会执行函数获取结果作为data的值
props
- 定义组件外部可传入的所有属性
- 在模板代码中,请使用短横线分隔命名代替驼峰命名。如,属性定义,可通过方式传递到组件内部
prop验证
在自定义组件中,可将props定义为带验证需求的对象。其中,key为属性名,value为属性对应的验证需求。验证失败则输出错误提示日志,增加prop验证有利于规范自定义组件的使用
2.7.2.3 公共对象
2.7.2.4 应用对象
可通过访问
2.7.2.5 页面对象
可通过访问
2.7.3 方法
2.7.3.1 数据方法
2.7.3.2 公共方法
2.7.3.3 事件方法
2.7.3.4 应用方法
可通过$app访问
2.7.3.5 页面方法
可通过访问
for
指令用于循环输出一个数组类型的数据
- 自定义变量表示指令的数组索引和数组元素时,变量名不可以用或开头;
指令if与指令show
- 条件指令,是指这3个相关指令,用于控制是否增加或者删除组件;
- 指令,是指是否显示组件,用于控制组件的显示状态,并不会从DOM结构中删除
- 当指令的值为时,节点会从页面中移除,当指令值为,组件会动态插入节点中;
- 当指令的值为时,节点可见, - 当其值为时,组件不可见,但节点仍会保留在页面DOM结构中
组件block
block组件是表达逻辑区块的组件,没有对应的Native组件。可以使用<block>实现更为灵活的"列表/条件渲染"。如在<block>上使用for指令和if指令
组件slot
slot节点用于向开发者额外开发的自定义ux组件中插入内容
- 通常自定义组件的模板中提供组件,当该组件被引入到页面组件中后,开发者可以灵活定义该自定义组件内部的子内容
在子组件中使用组件,使得子组件接纳调用者传入的子内容,从而动态渲染子组件,得到最终的页面
当前为APP的生命周期提供了两个回调函数:, ;可在中定义回调函数
image.png
- 在中,开发者可以做一些独立于页面的操作。比如:引入公共的JS资源,然后暴露给所有页面
- 在中,通过访问中定义的数据和方法
在中,通过访问中定义的数据和方法
关于app.$def
- 前者代表框架为开发者暴露提供的APP对象;后者代表开发者在中导出的对象,放置业务相关的全局数据和方法
- 前者对象拥有, 生命周期;当应用启动时会执行方法,里面执行的赋值是在对象上
- 后者对象中的, 方法并不会执行,作用仅仅只是把方法复制到前者对象上而已
- 这些全局方法在页面中:既可以通过调用,也可以通过调用;不同之处在于前者可以取到之前赋值的变量,而后者不可以取到(因为之前的赋值是在对象上执行的)
image.png
onInit()
表示ViewModel的数据已经准备好,可以开始使用页面中的数据
onReady()
表示ViewModel的模板已经编译完成,可以开始获取DOM节点(如:this.$element(idxxx)
onShow(), onHide()
页面被切换隐藏时调用onHide(),页面被切换重新显示时调用onShow()
- 判断页面的显示状态,可以调用的属性:表示显示,表示隐藏
onDestroy()
页面被销毁时调用,被销毁的可能原因有:用户从当前页面返回到上一页,或者用户打开了太多的页面,框架自动销毁掉部分页面,避免占用资源
- 所以,页面销毁时应该做一些释放资源的操作,如:取消接口订阅监听
onBackPress()
当用户点击返回实体按键、左上角返回菜单、调用返回API时触发该事件
- 如果事件响应方法最后返回true表示不返回,自己处理业务逻辑(完毕后开发者自行调用API返回);否则:不返回数据,或者返回其它数据:表示遵循系统逻辑:返回到上一页
返回上一页的接口API:
onMenuPress()
当使用原生的顶部标题栏时,可以通过manifest.json中的menu属性配置是否显示右上角的菜单
A页面的生命周期接口的调用顺序
- 打开页面A: -> ->
- 在页面A打开页面B:
- 从页面B返回页面A:
- A页面返回:
- 应用对象
- 获取在中暴露的对象
- 获取在的中声明的全局数据
- 页面对象
- 获取打开当前页面的。仅在当前页面是通过匹配的方式打开时有效,否则为。参见
- 获取打开当前页面的。仅在当前页面是通过匹配的方式打开时有效,否则为
- 设置页面标题
- 页面对象是否有效
- 页面是否处于用户可见状态
参数属性包括
- 获取指定id的组件dom对象,如果没有指定id,则返回根组件对象用法:获取id为xxx的组件实例对象 获取根组件实例对象
- 获取顶层
- 获取父亲
- 获取指定id的自定义组件的用法: 获取为的组件
- this.$child('xxx')`替代
- 强制页面刷新
- 添加数据属性,必须在函数中使用,用法:
- 删除数据属性,如果在函数中使用,用法:
注意,获取元素应该在页面已渲染后,如 onReady 事件中或 onReady 事件执行完以后
- 添加数据属性,用法:
- 删除数据属性,用法:
- 在当前页面注册监听事件, 可监听、 、 等触发的自定义事件,不能用于注册组件节点的事件响应
- 移除事件监听,参数 为可选,传递仅移除指定的响应函数,不传递则移除此事件的所有监听
- 触发当前实例监听事件函数,与 配合使用
布局和尺寸
- 采用 模型且不支持 属性
- 目前仅支持长度单位和
- 设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度(项目配置基准宽度: 中 的值,默认)
CSS
- 可以使用内联样式、选择器、选择器、id选择器来为组件设置样式
- 仅可以使用并列选择、后代选择器、子代选择器
- 支持引入外部样式、内联样式、行内样式
- 颜色值不支持缩写,伪类支持不完全(支持,,等)
、、、组件为文本容器组件,其它组件不能直接放置文本内容
: 和 HTML 一样
支持样式 flex-direction, flex-wrap, justify-content, align-items, align-content
: 气泡框
- 支持属性 和
- 支持样式
- 支持事件
- 自组件只能是
: 下拉刷新
- 支持属性 和
- 支持样式 和
- 支持事件
: 富文本编辑器
- 支持属性
- 支持样式, 无效
- 不支持子组件
更多详情 https://doc.quickapp.cn/widgets/div.html
传递方法1
标签配合 传递参数, 这个和前端一致
传递方法2
通过 接口:, , 接受一个如下结构的对象,用法这个和前端 一致。
接收参数
上述2种传递参数的方法,其接收方法一致,在接收参数页面的 对象中获取即可(可设置默认值)
回传参数
开发者可能会遇到需要在页面之间回传参数的需求
- 假设存在页面A和页面B,先从页面A跳转至页面B,然后从页面B返回到页面A时,需要传递参数 = 此时,组件a和接口router传参不能满足需求,可以借助于app级别的对象:this.data
页面A实现代码如下
页面B实现代码如下:
https://doc.quickapp.cn/framework/script.html
会利用到一个构造函数 , 它接受一个字符串参数,作为实例的频道名称。它的实例具有以下属性和方法
- 频道名称,区分不同的消息频道(注意:不同频道之间不可通信)。
- 用于在当前频道中广播消息
- 订阅消息。在频道中接收到广播消息之后,会给所有订阅者派发消息事件
- 关闭当前的频道
其中 事件有2个属性(通过 对象访问)
- message
- 接收到的消息内容
父组件到子组件
- 子组件通过 获取父组件传入的值,见上文 template 部分
- 通过 监控传入数据变化并调用回调函数
- 父组件通过完成事件触发,子组件通过绑定事件并响应
子组件到父组件
- 父子组件传对象类型属于引用传递,可以直接修改父组件传入对象改变父组件数据
- 子组件通过完成事件触发,父组件通过绑定事件并响应
- 子组件通过触发在节点上绑定的事件来执行父组件的方法
- 注:、 和 参数一致
- 注:触发时传递参数,再接收时使用来获取参数
- 注:当传递结束后,可以调用来结束传递
配合标签框架支持通过链接从外部打开应用,格式
- : 应用包名,必选
- : 应用内页面的,可选,默认为首页
- : 希望传给页面的参数,可选,可以有多个
从传统网页调起需引入以下脚本
用于监听自定义事件;移除对应的事件监听
$on(evtName, fnHandler)
在当前页面注册监听事件, 可监听、 、 等触发的自定义事件,不能用于注册组件节点的事件响应
$off(evtName, fnHandler)
移除事件监听,参数 fnHandler 为可选,传递仅移除指定的响应函数,不传递则移除此事件的所有监听
触发ViewModel事件
页面的交互中可能会遇到一些非手动触发的需求,$emit() 通过触发当前实例上的事件达到动态触发事件的行为
$emit(evtName, evtDetail)
- 触发当前实例监听事件函数,与 配合使用
- 注意: 目前只触发 所监听的事件
监听原生组件事件
- 原生组件支持一系列事件,如通用事件(如:click, disappear)、组件专有事件(如:focus)
- 在响应函数执行时通过target获取,如:onClickHandler
- 在响应函数绑定时传递参数,如:onClickHandler2
触发原生组件事件
通过完成事件的动态触发
- $emitElement(evtName, evtDetail, id)
可以触发指定组件的事件,通过获取传递的参数;该方法对自定义组件无效
1)编译打包工程
- 在工程的根目录下运行
- 编译后的工程目录在
- 生成的应用路径为
2)增加 release 签名
通过 命令等工具生成签名文件、,例如:
https://doc.quickapp.cn/tools/compiling-tools.html
在工程的 目录下创建 目录,将私钥文件 和证书文件 拷贝进去
3)发布程序包
发布程序包前需要增加签名,然后在工程的根目录下运行
- 生成的应用路径为
- 如果需要临时使用 签名,可以使用
- 1)生成证书。点击快应用面板的【生成证书】按钮, 按提示输入相关信息
- 2)生成发布用 。点击【发布 包】按钮, 生成成功的话会弹出对应的文件夹
image
image
快应用注册账号 https://www.quickapp.cn/docCenter/post/74
image.png
- 资源文件、代码文件的命名均不能含有中文,命名不能连续使用下划线,否则打包发布时会包解析失败,导致无法上传
- 自定义属性名不能采用驼峰命名,否则值永远是
- 属性并不好用,没起什么作用
- 类似 等等函数是页面生命周期,不是组件生命周期,不会因为组件状态变化而执行
- 类型只有 和
- 子盒子不能将父盒子撑高
- 不遵循盒子模型,类似但不完全等同于
- 不能全局引用样式,只能在每个中使用引入
- 逻辑控制块,仅支持和,不支持条件渲染
- 属性,在快应用官方开发环境中,目前不支持
- 针对于目前插件不支持语法,可以把单独存储,通过引入到中,同时方便管理
- 当前自定义组件不支持传入的为
- 快应用中很多 都不能用,比如没有 , 等,因为它只是模拟了部分 标签,最终会转化成原生组件
- 只能使用 、、、 放置文本内容
- 只能是 或
- 长度单位只有 和
- 十大手机厂商共推快应用标准,发布会完美落幕
- 教你尝鲜「快应用」!体验秒开,如丝般顺滑!
- 快应用+小程序,99%的Android程序员即将失业!
- 入门教程
- 接口文档
- 框架文档
- 官方网站
- 官方论坛
- toolkit
- 编译工具
- 调试工具
- Quix - UI for Quick App
- 基于weui开发的quickapp
- 快应用转换工具 - 小程序转快应用
- flyio - 支持快应用的http网络库
- Gank客户端
- 内涵车站APP
- wanandroid快应用
- quickapp-douban
- 快应用版Wechat
- Vscode Hap Extension--轻应用语法高亮插件
- Vscode 一个基于vscode应用于‘快应用’语法高亮
- Vscode Quick App美化代码
- 对标小程序 ? "快应用"开发入门指南 By鸿洋
- 快应用快速入门教程 by大大花猫
- 快应用 QuickApp--入门指北
- 快应用简明使用指引
- 快应用QuickApp--HelloWorld体验
- 快应用快速入门教程 by五个半柠檬(SF)
- 「快应用」项目?会对微信小程序以及 App 生态有何影响?(知乎)
- 如何看待国内几家硬件厂商联合鼎力打造的快应用?(知乎)
- 九大厂商联合推出「快应用」,围攻微信?(知乎)
- 腾讯“小程序”与手机“快应用”之战(知乎)
- 饿了么快应用初体验
- 是前端还是Android?快应用 快速入门与初步分析
- 快应用初体验
- [前端工坊]快应用-技术调研
- 快应用发起进攻第一枪!小米直达服务正式更名快应用
- 手机厂商和开发者为何看好快应用新生态
- 魅族体验快应用:免安装,快速触达你要的服务
- 资源汇总 快应用开发常见问题和技术帖子汇总(持续更新)
- 快应用API Demo 集合 QuickAPP