工具簡(jiǎn)介：小程序layout設(shè)計(jì)工具，可視化方式進(jìn)行小程序UI設(shè)計(jì)。通過(guò)鼠標(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

在進(jìn)行工具開發(fā)和使用時(shí)，自己想要是能夠直接在畫布上通過(guò)鼠標(biāo)滑動(dòng)進(jìn)行布局的繪制那該多么方便。最終實(shí)現(xiàn)了此功能。目前市面上看到的類似工具中只有我們提供了鼠標(biāo)繪制布局的功能。
下面是基本的繪制過(guò)程

下圖是在微信開發(fā)者工具中的預(yù)覽效果

在畫布中，按下鼠標(biāo)后滑動(dòng)，所顯示的綠色區(qū)域代表要繪制的view。繪制view之后，通過(guò)工具的屬性面板中設(shè)置flexbox的三個(gè)屬性justify-content、align-items和align-content來(lái)決定內(nèi)部組件的排列方式。

下面說(shuō)一下鼠標(biāo)繪制的原理。

此圖的畫布中有很多方格子。方格子是10px10px，這樣一個(gè)寬300px高200px的view就會(huì)占用3020=600個(gè)方格。內(nèi)部如果有一個(gè)寬200px高100px的view，就占用20*10=200個(gè)方格。通過(guò)這樣的數(shù)學(xué)計(jì)算，便可以將一個(gè)區(qū)域通過(guò)占用方格的數(shù)量區(qū)分出多個(gè)view，便實(shí)現(xiàn)了鼠標(biāo)繪制布局。
如果想更小的定義方格，可以通過(guò)屬性面板的字體大小來(lái)設(shè)置。如下圖：

綠色區(qū)域便代表繪制的view的大小。

詳細(xì)的操作介紹請(qǐng)看視頻
http://v.youku.com/v_show/id_XMTg0OTMzNTQ0MA==.html