工具簡介：小程序layout設計工具，可視化方式進行小程序UI設計。通過鼠標拖拽組件方式進行UI布局。工具提供符合微信視覺統一的模板，并且按照FlexBox方式可視化布局。自動生成wxml和wxss，復制到微信開發者工具中即可同步顯示。視頻介紹請移步優酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

在進行工具開發和使用時，自己想要是能夠直接在畫布上通過鼠標滑動進行布局的繪制那該多么方便。最終實現了此功能。目前市面上看到的類似工具中只有我們提供了鼠標繪制布局的功能。
下面是基本的繪制過程

下圖是在微信開發者工具中的預覽效果

在畫布中，按下鼠標后滑動，所顯示的綠色區域代表要繪制的view。繪制view之后，通過工具的屬性面板中設置flexbox的三個屬性justify-content、align-items和align-content來決定內部組件的排列方式。

下面說一下鼠標繪制的原理。

此圖的畫布中有很多方格子。方格子是10px10px，這樣一個寬300px高200px的view就會占用3020=600個方格。內部如果有一個寬200px高100px的view，就占用20*10=200個方格。通過這樣的數學計算，便可以將一個區域通過占用方格的數量區分出多個view，便實現了鼠標繪制布局。
如果想更小的定義方格，可以通過屬性面板的字體大小來設置。如下圖：

綠色區域便代表繪制的view的大小。

詳細的操作介紹請看視頻
http://v.youku.com/v_show/id_XMTg0OTMzNTQ0MA==.html