工具簡(jiǎn)介：小程序layout設(shè)計(jì)工具，可視化方式進(jìn)行小程序UI設(shè)計(jì)。通過鼠標(biāo)拖拽組件方式進(jìn)行UI布局。工具提供符合微信視覺統(tǒng)一的模板，并且按照FlexBox方式可視化布局。自動(dòng)生成wxml和wxss，復(fù)制到微信開發(fā)者工具中即可同步顯示。視頻介紹請(qǐng)移步優(yōu)酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

下圖是微信官方的要求

按照小程序UI設(shè)計(jì)（3）-符合視覺規(guī)范-列表視覺規(guī)范同樣的方式，我們可以設(shè)計(jì)一樣符合規(guī)范的輸入項(xiàng)目。
規(guī)范中沒有說(shuō)明padding-left的大小，我們暫定是15px。這樣最外層view的padding-left和padding-right都是15px。
以 為例制作符合規(guī)范的布局。
首先在工具的畫布上拖拽WViewRow。

然后設(shè)置width=375，padding-left和padding-right為15。再鼠標(biāo)拖拽過來(lái)兩個(gè)wviewrow，一個(gè)寬度是85，一個(gè)寬度是375-15-85-15=260。然后修改這兩個(gè)view的align-items為center，使內(nèi)部組件縱向居中排列。然后85的view里面拖入wtext17pt組件，260的view拖入winput17pt組件。

然后修改文字內(nèi)容。
。
輸入框的placeholder在“輸入提示”中輸入。
剛才忘了設(shè)置260寬度view的margin-left。規(guī)范中規(guī)定是5px。

由于增加了margi-left，根據(jù)flexbox布局要求會(huì)在第二行，這時(shí)修改寬度為260-5=255就可以了。

這樣一個(gè)符合規(guī)范的輸入項(xiàng)就基本完成了。
如果想自己調(diào)整留白、字體大小可以通過屬性面板進(jìn)行調(diào)整。

大家可以下載軟件實(shí)際動(dòng)手操作一下。下載鏈接在http://m.guanlustone.com/topic/456
請(qǐng)大家按照以上步驟通過工具完成一個(gè)吧，并請(qǐng)跟帖上傳設(shè)計(jì)的截圖。
FlexBox屬性的操作，請(qǐng)參考小程序UI設(shè)計(jì)（1）-輕松布局