快过年了好好挣钱

快应用有什么用？

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

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

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

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

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

小米快应用中心特色

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

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

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

4、添加到桌面的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里面这是可以的。

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

小米快应用中心具备传统APP完整的应用体验，无需安装、即点即用，快应用中心集合所有快应用，便于节省手机的实用空间性，非常的便捷简单。

Circle Hero Legend(圆形英雄传奇)1.0 手机版

小米快应用中心介绍

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

小米快应用中心说明

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

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

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