30 分钟带你学透快应用界面开发的最正确姿势
这篇文章适合快速开发快应用,提高效率,不管你是资深的前端开发,还是刚入门快应用开发的菜鸟,本文都值得你一读。通过阅读本文,我相信一定能节省你的时间,少走很多弯路,将主要的精力放在项目的开发中来。
入门式
从官网的介绍可以知道,快应用是以前端技术栈作为开发基础,渲染是Native来渲染的。
从这句话中我们可以明确两个点:
快应用不是HTML5;
可以用前端经验去开发。
如果你有过前端的开发经验,来做快应用,会很快,当然如果你有开发经验,做快应用,也很快,快应用的入门门槛不高。
如果你是一个前端小白,也可以通过看官网来入门的,官网地址在 https://doc.quickapp.cn/
这里我来简单说一下入手开发快应用的步骤:
对着文档安装好环境,熟悉hap-toolkit的使用;
对着文档看下我们提供的教程部分;
看看官网提供的Sample的例子。
进入正题
本文主要讲解快应用的界面布局
界面布局其实就是两大块:
样式:修饰页面;
结构(骨架)。
样式部分
快应用的样式部分和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、并列、后代。
举例说明一下:
/* tag选择器 */
span {
color: #000;
}
/* class选择器(推荐) */
.title {
color: #00FF00;
}
/* ID选择器 */
#title {
color: #00A000;
}
/* 并列选择 */
.title, #title {
font-weight: bold;
}
/* 后代选择器 */
.tutorial-page text {
font-size: 30px;
}
/* 直接后代选择器 */
.tutorial-page > text {
text-decoration: underline;
}
在快应用里面用这些基本的选择器就可以了,CSS3里面一些比较新的选择器目前暂不支持。强调一句,如果使用后代选择器,不要嵌套层级太多了。
再举一个例子:比如我们在开发中经常碰到 “文本不能超过2行,超过2行,用省略号表示” 这样的需求。
在快应用中是用lines属性,在HTML5里面这个是-webkit-line-clamp这个属性(仅Webkit支持的,未列入草案)。
它们的写法分别是:
在快应用中:
lines: 2;
text-overflow:ellipsis;
在HTML5中:
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
再比如在快应用里面,不支持浮动,绝对定位,相对定位。
因此以下代码在快应用是不生效的。
float:left;
position:relative
position:absolute;
因此,习惯了之前前端开发的同学,这种布局方式,不要在快应用中使用了。
结构部分
这部分需要明确两个东西:用什么布局、怎么布局。
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个核心概念:主轴和交叉轴;容器和项目。
a.主轴和交叉轴
这里的是一致的,主轴和交叉轴可以根据设置,可以交换的。
b.容器和项目
快应用的组件中,有容器这个组件分类,但是仅仅支持三个标签(DIV、list-item、Tabs)。
换一句话说,就是仅仅在这些元素上才支持Flex布局,其他的元素上是不支持的。因此不要在其他元素上,比如a标签上写display:flex,这些代码也是不生效的。但是在HTML5里面这是可以的。
项目就是容器内的子组件了。当然也支持嵌套使用。
需要说明一点的是,快应用默认Flex布局。以下两种代码:
flex-direction: column;
padding:20px;
和
display: flex;
flex-direction: column;
padding:20px;
都是生效的。
其实就是可以省略掉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
点击阅读原文,报名参加10月25日线上直播的快应用系列公开课第二期《快应用界面布局》,掌握如何快速开发快应用!
30 分钟带你学透快应用界面开发的最正确姿势相关推荐
- 二分查找 二分答案 万字详解,超多例题,带你学透二分。
很多人对二分感到很苦恼,很困惑,可能是因为二分的边界很难掌握,也许是判断条件难写- 然而,很幸运,你找到了这篇文章,仔细看下去,这篇文章将带你学透二分!!! 二分可以简单分为二分查找与二分答案. 可能 ...
- 一张图30分钟带你入门python-我,30分钟,P了100张图,秒杀全公司同事
原标题:我,30分钟,P了100张图,秒杀全公司同事 今天,想为大家推荐一款超惊艳的工具,可以让每一个设计汪,瞬间找到人生开挂的感觉! 在这之前,先跟为大家分享个真实的故事. "这感觉真是太 ...
- 【前端知识点】promise简书-30分钟带你搞懂promise面试必备
前言 写作初衷 本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScript中对Promise相关技术的支持情况. 通过阅读本书,我们希望 ...
- 一张图30分钟带你入门python-大数据时代来了!神级程序员一张图帮你梳理Python脉络,快速入门...
python语言是我目前为止用的最爽的语言,因为它真的很优美.虽然c,c++,java也非常的强大和伟大,但是每一种语言伟大的背后都是有一定的时代背景. 在PC时代大量的嵌入式的设备,底层的代码,以及 ...
- 30分钟带你了解软件测试行业,附送一份超清晰的学习规划路线...
我个人进入软件测试这个行业也小十年了.回首过往,很感激在初入软件测试职场有大佬的提携,让我明白作为一个软件测试工程师应该具备的能力和对该职业的认知.也很感激,之后遇到赏识我的领导,给予我机会,可以带领 ...
- 30分钟带你熟练性能优化的那点儿事儿(案例说明)
前言 性能优化是数据库运维人员和中.高级软件开发人员的必备技能,很多时候老司机和新司机的区别就在写出的东西是否优化. 博主接触过近千家客户的系统,这些系统都存在着各种各样的性能问题.那么如何透彻的了解 ...
- linux 正则表达式 视频教程,30分钟带你玩转正则表达式
定义: 正则表达式说白了就是有普通字符.以及特殊字符组成的文子模式.{匹配模式标准} 正则表达式将会作为一个模板与所搜索的字符串进行匹配.可以让使用者轻易达到搜寻/删除/取代某些特定字符的处理程序.此 ...
- JB的Shell之旅-30分钟带你入门
前言 写这篇文章的目的很简单,因为爱并恨过: 前段时间要改个安卓产品的脚本,惊奇发现理论是用shell,虽然实现的功能不复杂,但如果对没了解过shell或懂皮毛的同学,改起来是相当痛苦(如jb),调试 ...
- 30分钟带你精通Git使用
一. 版本控制工具 1.1. 什么是版本控制系统? 版本控制系统(Version Control System):是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.版本控制系统不仅 ...
最新文章
- 讨论oracle的反腐,关于oracle SCN 的讨论
- 你必须会的 JDK 动态代理和 CGLIB 动态代理
- 自研Spring容器,带你解析ioc内部原理
- 微软2012实习生笔试题及答案(望讨论)
- [转]使用 C 编写 Lua 模块
- 利用fnd_conc_global.set_req_globals设置子请求的Parent Request ID
- VC++学习(17):进程间通信
- @ngrx入坑angular的schema,爽的一逼!
- linux下配置myBase7.ini
- 实录分享 | 计算未来轻沙龙:自然语言处理前沿研讨会
- padans 判断列是否为空_pandas 如何判断指定列是否(全部)为NaN(空值)
- Linux下main函数启动过程【程序员自我修养笔记】【自用】
- Spark基础学习笔记04:搭建Spark伪分布式环境
- 大厂面试常问的机器学习,计算机视觉怎么学?详细指南来了!
- 一套PumpLinx泵阀仿真分析攻略
- Python之常用内置函数
- 0基础学Java(2)
- vue 之手机号验证、正则验证手机号是否正确、手机号验证码信息弹窗
- 阿里云物联网平台测试知识点梳理
- jbe 可以用来修改Java class的字节码,配合jd-gui 使用
热门文章
- ssm项目之sql查询的问题
- popoupwindow 点击背景消失_两种去除背景音乐保留原声的高效方法
- 双系统ubuntu 删除后重装
- System V信号量
- 2021年中国丁香香烟市场趋势报告、技术动态创新及2027年市场预测
- 如何加入github开源项目!
- python动态导入模块_Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析...
- 程序员被纳入新生代农民工;“腾讯视频崩了”上热搜;英特尔发布全新独立显卡品牌 Arc|极客头条...
- 敏捷20周年:一场失败的起义
- 编程人的「对象」长啥样?