工具簡介：小程序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.mkhyf.com/topic/456
請大家按照以上步驟通過工具完成一個吧，并請跟帖上傳設計的截圖。
FlexBox屬性的操作，請參考小程序UI設計（1）-輕松布局