# 开发注意事项

在jsnative应用的开发过程中至少有以下几点要特别注意：

不支持 margin、panding 合并写法，例如margin:10px 30px，但支持 margin:10px；
不支持 margin 的 auto属性，要居中需要计算margin-left值；
只支持像素值px作为单位，不支持相对单位（em、rem）；
盒模型计算宽高度不需要减掉padding值，因为已经设置box-sizing:border-box；
不支持 z-index 设置元素层级，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面；
不支持border简写，要分为border-width、border-style、border-color三个值设置，不支持border-radius:50%，需要设置具体数值；
background设置背景色要加background-color，不支持简写；
css不支持设置背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
包裹的父级必须要加上flex-direction属性确定子元素排列方向；
不支持class继承写法，如 .classA text，必须要在每个组件上定义class；
文本值只能用<text>包裹，不支持子组件，lines可指定文本行数，但是只能在class里设置才能生效，在组件上设置无效；
只有text标签可以设置字体大小，字体颜色；
布局不能使用百分比、没有媒体查询；
<image>组件要闭合，src支持引入本地链接，需要明确指定 width 和 height，不支持子组件；
<input />组件必须要‘/’结尾，不支持 click 事件，用 change 替代；
不支持在滚动类型的元素上监听touch、swiper等手势，例如 scroller，list 和 webview 这三个组件；
页面没有bounce回弹效果，只有几个列表组件有bounce效果，包括 list、recycle-list、waterfall；
只有滚动组件才能滚动，其他例如body 和 div，高度设置再高也不会出现滚动，并且设置高度100%无效；
<list> 组件必须加高度，只能在高度指定区域滚动；
支持 :class="" 绑定样式，但需要写成数组 :class="[]" 的形式，不支持对象:class="{}"的写法；
页面控制显隐只可以使用v-if不可以使用v-show;
不支持在class和style中定义相同的样式属性。
Android端在一个页面内使用大量圆角边框会造成性能问题，尤其是多个角的样式还不一样的话更耗费性能。应避免这类使用；
不能在 style 中引入字体文件，字体图标的使用参考：加载自定义字体；

下面有些正确和错误的写法示例对比：

选择器仅支持class 选择器

    /* 错误 */
    #id {}
    .a .b .c {}
    .a > .b {}

    /* 正确 */
    .class {}

border 不支持简写

   /* 错误 */
    .class {
        border: 1px red solid;
    }

    /* 正确 */
    .class {
        border-width: 1px;
        border-style: solid;
        border-color: red;
    }

background 不支持简写

    /* 错误 */
    .class {
        background: red;
    }

    /* 正确 */
    .class {
        background-color: red;
    }