Weex 03 UI的基本使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qizewei123/article/details/79315138

前言

UI这方面，无论你以前是从事前端或者移动端，多联系一下，还是很容易上手。
###正文

一些要记住的知识点

• 在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。Flexbox和Android原生相比适配性更强。
• weex中的长度单位只有px;
• 屏幕默认的宽度为750px,高度约为1250px，

flexBox布局概念

weex中使用的是flexbox布局，Android过来的同学需要看一下这个flexbox。前端的同学的话也需要适应一下，weex的flexbox是不支持百分比参数的。

flexBox宽高不支持百分比设定。使用flexBox需要记住几个参数：

1. flex-direction：
   定义了flex容器中flex成员项的排列方向(row:从左到右排列，column:从上到下排列),，默认为column。
2. justify-content：
   定义了flex容器中flex成员项在 主轴 方向上如何排列以处理空白部分。可选参数有：flex-start | flex_end | center | space-between。默认值为flex-start。
   
3. align-items：
   定义了 flex 容器中 flex 成员项在 纵轴 方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。
   
4. Flex成员项:
   该参数仅支持在flexBox内的控件使用。flex属性定义了flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间. 如果一个成员项设置的值为 flex: 2,其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的2倍。

初步编写

• 这是我们项目初始化后的页面，页面代码分为三个部分：template,script，style，分别负责布局，逻辑，样式的代码。
• 我们现在尝试根据官方文档来添加一个控件。

1. 在template中添加布局代码。
   
2. 在Style中给控件添加宽和高(不设置宽高控件会不可见)。
   
3. 效果：
   

• 走到这里，你应该就对weex的代码结构大概有了一个了解。知道如何使用UI，你可以参考官方文档尝试和实践更多的UI控件。
• 看过官方文档你会发现这里的控件是有限的，这是阿里封装的UI库，一样参考文档你就能够轻易的使用它，毕竟国产的框架对中文的支持还是不错的(这可能weex官方文档的唯一优点了)。