提高weex布局开发效率的一点点总结

加入weex开发小组已有几个月的时间，经历了从一开始的磕磕碰碰到现在能够独立负责一个项目的开发。期间整理了一份开发入门文档，也一直在总结效率更高的开发方式。

在开发项目的过程中，我们往往会打开以下几个窗口：

• 产品文档
• 交互文档
• UI图
• HTML文件
• 样式文件
• vue文件

比如，开发一个这样的页面：

仅仅在页面布局的开发阶段，我们就需要频繁的来回切换HTML文件和样式文件，以及很多冗余的样式代码。像这样：

<div class="box">  
    <div class="month">
        <text class="month-text">2018年7月</text>
    </div>
    <div class="cell">
        <div class="cell-header">
            <div class="row">
                <image></image>
                <text class="cell-time">2018-07-30 18:36:44</text>
            </div>
            <text class="cell-status">超时未申诉</text>
        </div>
        <text class="cell-name">普通交通违法（占用机动车道、未佩戴安全头盔等）一行显示不下换行</text>
        <text class="cell-punish">扣罚 ¥ 115.0，账号永久禁用，一行显示不下就换行显示</text>
    </div>
</div>

.box{
    padding-left: 30px;
    padding-right: 30px;
}
.month{
    height: 80px;
    justify-content: center;
}
.month-text{
    font-size: 32px;
    color: #666;
}
.cell{
    background-color: #fff;
    border-radius: 6px;
    padding-left: 30px;
    padding-right: 30px;
}
.cell-header{
    flex-direction: row;
    justify-content: space-between;
}
.cell-time{
    font-size: 28px;
    color: #929292;
}
...

可以看到，很多时候，我们都是在写重复的样式，特别是字体、颜色、边距等等。

其实，UI部门对于APP页面的设计，在这几年的传承下，会遵循一定的设计标准，我们只需总结规律，提取一套通用的样式文件，便可以使我们在开发过程中专注于页面结构的开发，而不至于频繁的切换文件、频繁的写重复样式、频繁的为class取名……

那么，即是作为一套公用样式，它便需要有以下几个特点：

• 全面性
• 灵活性
• 易用性

全面性 顾名思义是要求这套样式是可以满足开发过程中的大部分场景的。我在编写过程中大致分为了几块内容：布局（包括flex相关、宽高、边距等）、字体、颜色、边框等。

灵活性 即将class拆分到最小单位，一个class代表一个样式，各个class之间可以任意组合，以达到最终需要的页面效果。

易用性 所见即所得，从UI图上看到设计稿以后，不需要经过额外的思考，很自然的就将需要的class组合成需要的样式。关于这一点，我在设计通用样式的class名称时，尽量使用最简单的字母+数字的命名方式，比如，设计稿上要求字体颜色 #666 字号16号，那么只需在html文件写

<text class="f16 c6">xxx</text>

在通用样式里， f 代表字号， c 代表字体颜色，因为我们在写 font-size 时，一定会先敲 f ，所以这种命名非常容易记忆。

.f16{
    font-size: 32px;
    /*在weex开发时，需要将设计稿的尺寸放大2倍开发，之所以命名是f16，而不是f32，是为了在看到设计稿的一瞬间就反应到f16上，而非再多一层放大2倍计算的思考*/
}
.c6{
    color: #666;
}

再比如，在使用通用样式前，已经用到了两次的内边距布局：

<div class="pl15 pr15">xxx</div>

.pl15{
    padding-left: 30px;
}
.pr15{
    padding-right: 30px;
}

从截图中可以看到，我在开发违规记录列表页时，遇到特殊情况需要新写样式的情况只有2次。只需引入公用样式，整个开发过程顺畅无比，愉悦度up，up，up！

有同学会觉得将公用文件打包进来会增加文件大小，我看了下，引入公用文件后的打包文件大小是230K，未引入则是228K，这点差距完全可以忽略不计。更何况，不引入的情况下，还需要自己写另外的样式，实际情况会比2K的差距更小。

当然，目前公用样式文件还不够强大，需要weex组同学一起完善它。

以上一些我自己的小想法，本人才疏学浅，若有不足，望各位指正。