weex踩坑日记

1、文字只能放在text里面，包括字体图标<text class="main-icon icon">&#xe7b8;</text>

2、cell不支持任何样式，高度随内部子元素样式撑开，margin登也在内部样式设置

3、css样式不支持嵌套写法：

  .icon-big .icon{
        font-family: iconfont;
        text-align: center;
        font-size: 70px;
    }

只能有一层

    .icon{
        font-family: iconfont;
        text-align: center;
        font-size: 70px;
    }

4、只支持flex布局，元素默认flex属性,无需单独定义display: flex；

5、只支持px单位

6、后面的class样式无法覆盖前面class的样式（针对相同样式）：

<text class="add-icon icon icon-big">&#xe600;</text>

icon-big的color覆盖不了icon的color值

7、导航栏动态切换时不能像vue那样：

<text class="video-icon icon" :class="{'active':active === 'video'}">&#xe602;</text>

在浏览器上有效，真机上无效

要通过函数返回才有效：

<text class="main-icon icon" :class="[this.isActive('')]">&#xe7b8;</text>

methods: {
            isActive(key) {
                return this.active === key ? 'active' : ''
            }
        }

8、flex默认方向是垂直的，而不是水平的

9、border-radius 不能简写，要分开写，真机上才有效果：

border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;

10、字体图标的引入方式：

在主文件的created里引入

created() {
    const domModule = weex.requireModule('dom')
            domModule.addRule('fontFace', {
            'fontFamily': "iconfont",
            'src': "url('http://at.alicdn.com/t/font_756234_tyj51mywenc.ttf')"
     })
}

weex字体图标引入方式

11、动态改变class和点击事件不能放在同一个元素上，不然真机上不生效

<div class="bar-item" :class="[this.isActive('service')]" @click="barHandle('service')">
            <text>云服</text>
        </div>

必须分开

<div class="bar-item" @click="barHandle('service')">
   <text :class="[this.isActive('service')]">云服</text>
</div>

通过内部元素控制样式

12、宽度适配以750px为准

13、border也不支持缩写，必须分开写：

border-top-color: #ccc;
border-top-style: solid;
border-top-width: 1px;

14、背景色：

background-color: red;

15、不支持z-index，越靠后的元素，层级越高

16、定位元素，超出容器边界不可见，安卓下overflo默认为hidden

17、支持线性渐变linear-gradient,不支持径向渐变radial-gradient

18、box-shadow只支持ios，andriod不支持

19、ios中image不支持定义单个border-radius

20、a组件跳转地址必须是weex打包后的文件，不能是其它html文件，如：http://baidu.com

21、template下第一个父元素（唯一一个）必须是div

22、样式必须用id或class选择器才生效

23、模板的第一个父元素必须是一个纯粹的div（无class，无行间样式，无点击事件等），才不会影响到内部的自定义组件样式

24、input组件必须闭合，不然真机不能显示

25、image必须设置宽高样式

26、slider轮播图的indicator指示器的定位是相对应图片中间的，slider设置了relative定位后，indicator要设置成absolute绝对定位

27、vue-router的时候不能用router-link，只能用编程时导航方式跳转