原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处
工具简介：小程序layout设计工具，可视化方式进行小程序UI设计。通过鼠标拖拽组件方式进行UI布局。工具提供符合微信视觉统一的模板，并且按照FlexBox方式可视化布局。自动生成wxml和wxss，复制到微信开发者工具中即可同步显示。视频介绍请移步优酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html
下图是微信官方的要求
按照小程序UI设计（3）-符合视觉规范-列表视觉规范同样的方式，我们可以设计一样符合规范的输入项目。
规范中没有说明padding-left的大小，我们暂定是15px。这样最外层view的padding-left和padding-right都是15px。
以
为例制作符合规范的布局。
首先在工具的画布上拖拽WViewRow。
然后设置width=375，padding-left和padding-right为15。再鼠标拖拽过来两个wviewrow，一个宽度是85，一个宽度是375-15-85-15=260。然后修改这两个view的align-items为center，使内部组件纵向居中排列。然后85的view里面拖入wtext17pt组件，260的view拖入winput17pt组件。
然后修改文字内容。
。
输入框的placeholder在“输入提示”中输入。
刚才忘了设置260宽度view的margin-left。规范中规定是5px。
由于增加了margi-left，根据flexbox布局要求会在第二行，这时修改宽度为260-5=255就可以了。
这样一个符合规范的输入项就基本完成了。
如果想自己调整留白、字体大小可以通过属性面板进行调整。
大家可以下载软件实际动手操作一下。下载链接在http://www.wxappclub.com/topic/456
请大家按照以上步骤通过工具完成一个吧，并请跟帖上传设计的截图。
FlexBox属性的操作，请参考小程序UI设计（1）-轻松布局
