请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

5
回复
1501
查看
  [复制链接]

8

主题

16

帖子

970

积分

 楼主| 2018-9-27 13:25:28 显示全部楼层 |阅读模式
本帖最后由 快到碗里来 于 2018-9-29 11:43 编辑

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

一、入门式

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

从这句话中我们可以明确两个点:
  • 快应用不是Html5
  • 可以用前端经验去开发

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

如果你是一个前端小白,也可以通过看官网来入门的,官网地址在 https://doc.quickapp.cn/
这里我来简单说一下入手开发快应用的步骤
二、进入正题

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

界面布局其实就是两大块:
  • 样式:修饰页面
  • 结构(骨架)

三、样式部分

快应用的样式部分和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,并列,后代。
举例说明一下:
快应用支持的仅有5种:id,class,tag,并列,后代。

举例说明一下:
  1. /* tag选择器 */
  2.   span {
  3.    color: #000;
  4.   }
  5.   /* class选择器(推荐) */
  6.   .title {
  7.    color: #00FF00;
  8.   }
  9.   /* ID选择器 */
  10.   #title {
  11.    color: #00A000;
  12.   }
  13.   /* 并列选择 */
  14.   .title, #title {
  15.    font-weight: bold;
  16.   }
  17.   /* 后代选择器 */
  18.   .tutorial-page text {
  19.    font-size: 30px;
  20.   }
  21.   /* 直接后代选择器 */
  22.   .tutorial-page > text {
  23.     text-decoration: underline;
  24.   }</font>
复制代码

在快应用里面用这些基本的选择器就可以了,CSS3里面一些比较新的选择器目前暂不支持。
强调一句,如果使用后代选择器,不要嵌套层级太多了。

再举一个例子,比如我们在开发中经常碰到  “文本不能超过2行,超过2行,用省略号表示” 这样的需求。
在快应用中是用lines 属性,在html5里面 这个是-webkit-line-clamp 这个属性(仅webkit支持的,未列入草案)

他们的写法分别是:
在快应用中
  1. lines: 2;
  2. text-overflow:ellipsis;</font>
复制代码
在html5中
  1. overflow:hidden;
  2. text-overflow:ellipsis;
  3. display:-webkit-box;
  4. -webkit-box-orient:vertical;
  5. -webkit-line-clamp:2; </font>
复制代码

再比如在快应用里面,不支持浮动,绝对定位,相对定位。
因此以下代码在快应用是不生效的。
  1. float:left;
  2. position:relative
  3. position:absolute;</font>
复制代码

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

四、结构部分

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

1)用什么布局?
用组件(标签)进行布局,快应用提供了一些组件,供开发者使用。

组件(标签)分为几大类:

  • 容器组件
  • 基础组件
  • 表单组件
  • 媒体组件
  • 画布组件
  • 其他组件
  • 第三方组件

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

这里我大致总结了下标签与html5中不一致的部分,方便开发者进行开发。
  • 显示文本放置于text组件, 不能放置于div组件
  • 基础组件中:a, text 组件支持内部嵌套 组件,其他不支持
  • a的子组件:span
  • text的子组件:a 和span

如果想查阅组件可以参考 https://doc.quickapp.cn
这块相对来说,比html5缩水了不少。同时也说明,快应用入门门槛不高,非常适合开发,省时省力。

2)怎么布局?

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

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

但是快应用的flex布局和html5 布局也有一些不同,这里要知道一些不同的地方。
flex布局这块,主要弄清楚2个核心概念:主轴和交叉轴;容器和项目

1)主轴和交叉轴

1538024691137.jpg

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

2)容器和项目
快应用的组件中,有容器这个组件分类,但是仅仅支持三个标签(div,list-item,tabs)。
换一句话说,就是仅仅在这些元素上才支持flex布局,其他的元素上是不支持的。因此不要在其他元素上,比如a标签上写display:flex,这些代码也是不生效的。但是在html5里面这是可以的。

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

需要说明一点的是,快应用默认flex布局。以下两种代码
  1. <font size="2" color="#000000">flex-direction: column;
  2. padding:20px;</font>
复制代码

  1. <font size="2" color="#000000">display: flex;
  2. flex-direction: column;
  3. padding:20px;</font>
复制代码
都是生效的。

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


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

1538025071404.jpg

五、参考资料:

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

主题

25

帖子

65

积分

2018-9-27 13:29:21 显示全部楼层
赞!
回复

使用道具 举报

3

主题

15

帖子

390

积分

2018-9-27 14:53:19 显示全部楼层
回复

使用道具 举报

1

主题

9

帖子

50

积分

2018-9-27 15:03:12 显示全部楼层
这个有点6️⃣啊
回复

使用道具 举报

0

主题

11

帖子

50

积分

2018-10-30 14:37:25 显示全部楼层
总结的可以
回复

使用道具 举报

2

主题

14

帖子

80

积分

2019-7-26 18:16:50 显示全部楼层
厉害了  谢谢楼主的分享  ,不过现在1050 flex布局好多都支持了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册