weex常用属性梳理

gself 发布于2019-04-23 17:19 / 1507人阅读

摘要：是默认值，所有的成员项都排列在容器的前部则意味着成员项排列在容器的后部即中间对齐，成员项排列在容器中间两边留白表示两端对齐，空白均匀地填充到成员项之间。如果所有的成员项设置相同的值，它们将平均分配剩余空间。

　　之前发了一篇weex集成和开发的博客，主要是讲了weex开发环境的搭建和文件的编译、部署，还有就是一些个人对weex的理解，最近将原生的项目改造成weex的项目，也持续了有两个多月的时间了，后面我会发一些有关weex技术的博客，可能有些人看到了会感觉没什么很高的技术含量，主要是为了记录自己学习到的东西以及开发过程中遇到的一些困难。

　　首先，第一篇记录开发中会非常经常用到的一些属性：

　　对于元素的margin、padding、border这些属性就不做说明了，和Android原生没什么大区别

flex-direction：定义父容器中子元素的排列方向，可选值为 row | column，默认值为 column
column:从上到下排列
row：从左到右排

justify-content：定义父容器中子元素在水平方向上的排列方式，可选值为 flex-start | flex-end | center | space-between，默认值为 flex-start。
flex-start：是默认值，所有的 flex 成员项都排列在容器的前部；
flex-end：则意味着成员项排列在容器的后部；
center：即中间对齐，成员项排列在容器中间、两边留白；
space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间。
这其中最常用到的是center、space-between，center就没有什么好说的了，就是水平居中，至于space-between，我们可以配合margin-left和margin-right去实现一些效果。

这块试一下如果有多个元素space-between会是什么样的效果：

空白部分同样也是均匀的填充到各个元素之间，这块有个小问题，红色部分的div我是设置了固定的宽、高，如果我想让div水平充满屏幕，在Android中可以设置match_parent，在weex中是没有类似的属性的，只能给宽度设置固定的750px，看到这可能会想到，这样写固定的值，不会产生不同分辨率手机的适配问题吗？实际上是不会的，我也不是很理解其中的原理，大概的理解是：750px是weex定义的一个基础，我们在代码中设置的任何宽度最后都会去除这个基础，最后再乘实际手机的宽度，举个例子：一个手机的宽是1080，我们在代码中设置div的宽度为375px，375/750*100% = 50%，1080*50% = 540，正好是手机宽度的一半，以此类推，在其他手机上得到的结果仍然是手机宽度的一半，如此就完成了不同分辨率手机的适配。

align-items：定义父容器中子元素在垂直方向上的排列方式，可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。
stretch 是默认值，即拉伸高度至 flex 容器的大小；
flex-start 则是上对齐，所有的成员项排列在容器顶部；
flex-end 是下对齐，所有的成员项排列在容器底部；
center 是中间对齐，所有成员项都垂直地居中显示。

这个没什么好说的，最常用的就是center，垂直居中。

flex：定义了父容器中子元素可以占用容器中剩余空间的大小。
如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间。
如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的2倍。
这就类似于Android里面的权重layout_weight

idc机房托管专线服务梳理 Weex 多云管理平台调研,流程梳理 weex webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/3011.html

一行经脉让你看懂 Weex Runtime 的任督二脉

摘要：整个研究主要分为三个部分，第一个部分研究初始化的脉络，探寻一下需要注意的细节。第二个部分研究一下业务初始化的过程，真实的计算是在哪里发生的。研究方案，是否符合预期。这说明在全局环境中存在比如方法的，也有。从的脉络来看，入口实现在中。整个研究主要分为三个部分，第一个部分研究weex初始化的脉络，探寻一下需要注意的细节。第二个部分研究一下业务bundle初始化的过程，真实的计算是在哪里发...

incredible 2019-06-25 11:04 评论0 收藏0
一行经脉让你看懂 Weex Runtime 的任督二脉

摘要：整个研究主要分为三个部分，第一个部分研究初始化的脉络，探寻一下需要注意的细节。第二个部分研究一下业务初始化的过程，真实的计算是在哪里发生的。研究方案，是否符合预期。这说明在全局环境中存在比如方法的，也有。从的脉络来看，入口实现在中。整个研究主要分为三个部分，第一个部分研究weex初始化的脉络，探寻一下需要注意的细节。第二个部分研究一下业务bundle初始化的过程，真实的计算是在哪里发...

young.li 2019-06-25 15:58 评论0 收藏0
日常所需 - 收藏集 - 掘金

摘要：调用优先级安卓原生三星魅族靠谱的唯一设备号生成方案掘金应用开发中有时候也许会获取设备的唯一标识。必须要会的基本使用及常用命令操作工具资源掘金之前一直用的，后来换了之后才发现的强大功能，是不能比的。通过 Weex 300 行代码开发一款简易的跑步 App - 前端 - 掘金一套构建高性能、可扩展的原生应用的跨平台开发方案 Weex 给大家带来的无疑是客户端开发效率的提升，我们可以通过一...

BicycleWarrior 2019-06-25 11:27 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 2 编写独立页面

摘要：不区分事件的捕获阶段和冒泡阶段，相当于级事件。默认是组件级别的作用域，没有全局样式。不支持样式继承因为有作用域隔离。系列文章的目录在 ? 这里在配置完开发环境之后，就可以开始写应用了。在写应用之前，肯定会先划分好页面，一个一个独立着写的。不过，首先要明确的是，使用 Weex 写出来的是原生应用，页面的概念还和 Web 上一样吗？ Weex 里页面的概念写的有些乱，与下边内容关系...

kumfo 2019-06-25 11:03 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 2 编写独立页面

摘要：不区分事件的捕获阶段和冒泡阶段，相当于级事件。默认是组件级别的作用域，没有全局样式。不支持样式继承因为有作用域隔离。系列文章的目录在 ? 这里在配置完开发环境之后，就可以开始写应用了。在写应用之前，肯定会先划分好页面，一个一个独立着写的。不过，首先要明确的是，使用 Weex 写出来的是原生应用，页面的概念还和 Web 上一样吗？ Weex 里页面的概念写的有些乱，与下边内容关系...

stackfing 2019-06-25 15:57 评论0 收藏0