weex开发必备知识

weex是基于Vue.js的用于编写原生APP的框架，对于刚刚接触weex的同学们来说顺利的完成前端页面编写工作还是比困难的，因此本人总结了一些关于weex的基础知识，以便于帮助同学们更快的进行weex开发工作。

样式、布局方面

• weex推荐使用flex布局，且不需要写display：flex样式。如：

<template>
  <div>
      <div class='content_text'>
        <text>1</text>
        <text>2</text>
        <text>3</text>
      </div>
  </div>
</template>
<style scoped>
    .content_text{
        justify-content: space-between;
        align-item: center;
     }
</style>

• css样式中单位只能为px，不能设置百分比、rem、vw、vh等其它单位。

  width：720px=100%
  height：1250px=100%

• css中不支持缩写属性，必须分开写。如：

  border：1px solid red;（不生效）
  应该写成：
  border-width: 1px;
  border-style: solid;
  border-color: red;

• weex中不支持阴影，设置box-shadow不起作用。

组件方面

<text>组件

1. 所有文本必须用<text>组件包裹
2. <text>组件内只能包含文本值，也可以用{{}}插入变量值作为文本内容
3. <text>组件具有一个lines的样式，意思为超出后显示省略号。（注：不可以写在标签属性上，必须写在样式里）如：

 <template>
  <div>
      <!--生效-->
      <text class="content_text">weex文本值必须用text组件包裹</text>
      <!--不生效-->
      <text lines="1">weex文本值必须用text组件包裹</text>
  </div>
</template>
<style scoped>
    .content_text{
        text-align: center;
        font-size:50px;
        lines:1;
     }
</style>