工具截圖
此工具通過可視化操作進行布局,依據iphone6尺寸設置畫布,可以自動生成rpx和百分比的wxss。后續還會增加js代碼自動生成。
工具中組件按照微信小程序開發規范進行了缺省設置,margin、padding、fontsize、fontfamily、color等屬性按照微信視覺一致規范定制而成。
軟件左側是常用組件,中間是畫布,右側是wxss屬性設置面板。
wviewrow組件是小程序view的延伸,自動設置主軸:row。
wviewcolumn組件是小程序view的延伸,自動設置主軸:column。
wtextinput#組件按照微信規范設置字體大小。
wscrollview對應微信的scroll-view組件。
wswiper對應微信的swiper組件。
布局之后,點擊下面的wxml,wxss,wxsspercent(百分比單位),wxssrpx(rpx單位)標簽自動生成代碼。
<ignore_js_op>
基本操作
CTL+
鼠標滾軸:放大縮小畫布
CTL+C:復制
CTL+V:粘貼
CTL+
右箭頭:組件寬度放大微調
CTL+左箭頭:組件寬度縮小微調
組件對齊:多選組件后,鼠標右鍵菜單可以進行組件對齊
工具獲取:群號:422740450 加群請注明來源 和 來意 謝謝!

增加wxss導入功能。導入后雙擊classname后自動刷新畫布中組件樣式


增加設計時padding和margin提示

增加flexbox的align-content屬性


增加flex-wrap屬性,view中組件自動換行。
下圖第一個寬度允許情況下,藍紅兩個view在同一行。第二個自動換行。

view中文字自動換行和省略號

