订阅业界RSS CSDN首页> 业界

30分钟带你学透快应用界面开发的最正确姿势

发表于2018-10-25 17:52| 来源未知| 作者小米快应用

摘要:这篇文章适合快速开发快应用,提高效率,不管你是资深的前端开发,还是刚入门快应用开发的菜鸟,本文都值得你一读。通过阅读本文,我相信一定能节省你的时间,少走很多弯路,将主要的精力放在项目的开发中来。

这篇文章适合快速开发快应用,提高效率,不管你是资深的前端开发,还是刚入门快应用开发的菜鸟,本文都值得你一读。通过阅读本文,我相信一定能节省你的时间,少走很多弯路,将主要的精力放在项目的开发中来。

一、入门式

从官网的介绍可以知道,快应用是以前端技术栈作为开发基础,渲染是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里面这是可以的。

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

需要说明一点的是,快应用默认flex布局。以下两种代码

都是生效的。

其实就是可以省略掉display:flex 这一行。但是作者推荐采用第二种写法,不要省略这行。【为什么呢?因为现在转换工具在横行,保持兼容性,说不定哪天就把快应用的代码一键转成小程序了,一举两得啊,不用你再去开发小程序啦】

最后用一个图来总结以下快应用flex布局和html5的flex布局一些差异(截止1020版本)。

五、参考资料:

1.https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2.https://doc.quickapp.cn/tutorial/framework/page-style-and-layout.html

3.https://doc.quickapp.cn/widgets/common-styles.html

4.https://doc.quickapp.cn/widgets/div.html

5.https://doc.quickapp.cn/framework/style-sheet.html

0
0