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

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

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

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 显示全部楼层
赞!
回复

使用道具 举报

4

主题

23

帖子

390

积分

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

使用道具 举报

3

主题

15

帖子

90

积分

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

使用道具 举报

0

主题

11

帖子

50

积分

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

使用道具 举报

3

主题

25

帖子

140

积分

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

使用道具 举报

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