今天我们来个庖丁解牛。对于一个完整的组合组件，看看通过工具是如何轻松完成的。首先看看九宫格完整的样子。 结构树是这样的。在结构树中，我们可以看到WViewColumn下面有九个WViewRow。WViewColumn之上的我们可以不用管，这些是画布上的内容，为了辅助设计用的。9个WViewRow ...

FlexBox布局中的变幻方式很多，我们继续了解一个左-上下结构的布局分解 左边结构树中WViewRow下面有两个WViewColumn。WViewRow是横向排列，WViewColumn是纵向排列。第一个WViewColumn中放一个图片，第二个放两张图片。如下图展开的结构树。 下面针对第二个 ...

FlexBox的align-content到底是什么鬼，我也搞了好半天才开发出来，目前工具中WViewRow组件使用了此属性，WViewColumn中此属性不起作用。下图是justify-conten ...

工具截图 此工具通过可视化操作进行布局，依据iphone6尺寸设置画布，可以自动生成rpx和百分比的wxss。后续还会增加js代码自动生成。工具中组件按照微信小程序开发规范进行了缺省设置，margin、padding、fontsize、fontfamily、color等属性按照微信视觉一致规范定制 ...

小程序中一般很少大段落的文字，基本是4、5个字的主题、一行标题、一行摘要、两行描述。显示时超出部分用省略号代替。下面结合工具使用介绍一下文字排版的方法。先看效果图。 工具中属性设置如下图：两行文字属性，限制行数=2，表示最多两行，超出部分用省略号代替。 不限制行数属性中限制行数=0，表示在小程序 ...

下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件。如下图 工具使用时，将左侧组件拖拽到设计区域即可。字体大小和颜色都是按照规范设置的。在使用时根据微信要求在不同位置摆放即可。以下截图是text组件使用范例 ...

在设计工具中，根据规范我们定义了大中小三种按钮的尺寸大：720rpx *94rpx 圆角10px 字体18中：360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小：120rpx*60rpx 圆角6px 字体13 文字距离两边最小30这些按钮都放在工具的模板中，如下图： 微信中 ...

工具中为小程序员们准备了符合微信开发规范的模板。之前帖子中介绍的规范都在模板中已经设计好了，可以直接复制粘贴使用。下图中的样式是从模板直接复制过来的。实际使用时只要更换为自己的图片和文字即可。自动生成的wxml和wxss也可以直接使用。从而大大提高了开发效率。 下面是部分模板的展示： ...