小米快应用中心

快应用是基于手机硬件平台的新型应用形态，它根植于rom级别，具备传统app完整的应用体验。第三方应用基于这种形态可以更为直接的触达用户，为用户带来高效愉快的体验。快应用是基于手机硬件平台的新型应用形态，它根植于rom级别，具备传统app完整的应用体验。第三方应用基于这种形态可以更为直接的触达用户，为用户带来高效愉快的体验。

1、免安装应用设计，不需要安装占用你的手机内存，在线即可操作。

2、多样化的应用分类方式，可以按照自己的需求进行分类管理。

3、只需安装一次即可支持所有快应用，操作上面更加的具有可扩展性。

4、添加到桌面的app，随时可以进行搜索寻找，方便管理使用记录。

1.快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。

2.快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业的开发者全品类开放。

3.快应用具备传统APP完整的应用体验，无需安装、即点即用。

在公众号「小米开放平台」当天的推送文章中，我们可以看到这样的段落：

快应用使用前端技术栈开发，原生渲染，同时具备HTML5页面和原生应用的双重优点。用户无需下载安装，即点即用，享受原生应用的性能体验。

这个说法是不是似曾相识?没错，这些都是微信小程序的卖点：同样使用前端技术栈，同样具备HTML5与Native App的双重优势，用户使用微信小程序和快应用，也皆可以「即点即用」。

回过头看看同样拥有这些卖点的支付宝小程序吧。对比微信与支付宝两个小程序平台的开发文档，除了一些特定接口因业务需要而有所差异之外，二者的接口、组件相似度极高;实际上手中，开发者也完全可以做到将小程序几乎零成本地从微信移植到支付宝。

因此，快应用极有可能与支付宝一样，使用与微信小程序看齐的开发标准，尽最大可能，降低开发者的开发门槛，进一步吸引更多小程序，特别是微信小程序，移植到快应用平台。

一、入门式

从官网的介绍可以知道，快应用是以前端技术栈作为开发基础，渲染是Native来渲染的。

从这句话中我们可以明确两个点：

1. 快应用不是Html5

2. 可以用前端经验去开发

如果你有过前端的开发经验，来做快应用，会很快，当然如果你有开发经验，做快应用，也很快，快应用的入门门槛不高。

如果你是一个前端小白，也可以通过看官网来入门的，官网地址在 https://doc.quickapp.cn/

这里我来简单说一下入手开发快应用的步骤

1. 对着文档安装好环境，熟悉hap-toolkit的使用

2. 对着文档看下我们提供的教程部分

3. 看看官网提供的sample 的例子

二、进入正题

本文主要讲解快应用的界面布局

界面布局其实就是两大块：

1. 样式：修饰页面

2. 结构（骨架）

三、样式部分

快应用的样式部分和Html5相比，进行了一些缩减，但是也增加了一些特有的。

1.盒模型

框架使用border-box模型，暂不支持content-box模型与box-sizing属性。

因此，高度height和宽度width 都包括padding和border

2.长度单位

快应用仅仅支持px和% 两种单位，和web不一样，px是参考项目基准宽度，在manifest的config.designWidth 可以动态配置，默认宽度是750.

所以这里我们会有一个设计稿宽度和框架样式的一个转换关系。

设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度

一般我们推荐设计稿的宽度为750，那么开发者，可以按照设计稿中的像素进行开发。

3.选择器

目前支持的仅有5种：id，class，tag，并列，后代。

举例说明一下：

在快应用里面用这些基本的选择器就可以了，CSS3里面一些比较新的选择器目前暂不支持。

强调一句，如果使用后代选择器，不要嵌套层级太多了。

再举一个例子

比如我们在开发中经常碰到  “文本不能超过2行，超过2行，用省略号表示” 这样的需求。

在快应用中是用lines 属性，在html5里面 这个是-webkit-line-clamp 这个属性（仅webkit支持的，未列入草案）

因此，习惯了之前前端开发的同学，这种布局方式，不要在快应用中使用了。

四、结构部分

这部分需要明确两个东西：用什么布局、怎么布局。

1）用什么布局？ 

用组件（标签）进行布局，快应用提供了一些组件，供开发者使用。

组件（标签）分为几大类：

1. 容器组件

2. 基础组件

3. 表单组件

4. 媒体组件

5. 画布组件

6. 其他组件

7. 第三方组件

需要说明一点的是，这里的标签写法和html5 写法类似，但是他们两者没有任何关系，含义也不一样【至于什么是一样，读者可以自己琢磨】。

这里我大致总结了下标签与html5中不一致的部分，方便开发者进行开发。

1. 显示文本放置于text组件, 不能放置于div组件

2. 基础组件中：a, text 组件支持内部嵌套 组件，其他不支持

3. a的子组件：span

4. text的子组件：a 和span

如果想查阅组件可以参考 https://doc.quickapp.cn

这块相对来说，比html5缩水了不少。同时也说明，快应用入门门槛不高，非常适合开发，省时省力。

2）怎么布局？

前面提到过，快应用不支持浮动float，绝对定位absolute，相对定位relative，所以不要尝试在快应用采用这种布局方式。

快应用默认采用的是弹性盒（flex）布局方式。

但是快应用的flex布局和html5 布局也有一些不同，这里要知道一些不同的地方。

flex布局这块，主要弄清楚2个核心概念：主轴和交叉轴；容器和项目

1）主轴和交叉轴

这里的是一致的，主轴和交叉轴可以根据设置，可以交换的。

2）容器和项目

快应用的组件中，有容器这个组件分类，但是仅仅支持三个标签（div，list-item，tabs）。

换一句话说，就是仅仅在这些元素上才支持flex布局，其他的元素上是不支持的。因此不要在其他元素上，比如a标签上写display：flex，这些代码也是不生效的。但是在html5里面这是可以的。

项目就是容器内的子组件了。当然也支持嵌套使用。