先看下工具截圖


視頻介紹
http://player.youku.com/player.php/sid/XMTgyNTQ4NDcyMA==/v.swf

此工具通過可視化操作進行布局，依據iphone6尺寸設置畫布，可以自動生成rpx和百分比的wxss。后續(xù)還會增加js代碼自動生成。
工具中組件按照微信小程序開發(fā)規(guī)范進行了缺省設置，margin、padding、fontsize、fontfamily、color等屬性按照微信視覺一致規(guī)范定制而成。
軟件左側是常用組件，中間是畫布，右側是wxss屬性設置面板。
wviewrow組件是小程序view的延伸，自動設置主軸：row。
wviewcolumn組件是小程序view的延伸，自動設置主軸：column。
wtextinput#組件按照微信規(guī)范設置字體大小。
wscrollview對應微信的scroll-view組件。
wswiper對應微信的swiper組件。
布局之后，點擊下面的wxml，wxss，wxsspercent（百分比單位），wxssrpx（rpx單位）標簽自動生成代碼。

基本操作
CTL+鼠標滾軸：放大縮小畫布
CTL+C：復制
CTL+V：粘貼
CTL+右箭頭：組件寬度放大微調
CTL+左箭頭：組件寬度縮小微調
組件對齊：多選組件后，鼠標右鍵菜單可以進行組件對齊

這是一款小程序ui設計的輔助工具，下載鏈接http://pan.baidu.com/s/1hsBfDXy