小程序UI設計之-介紹篇


工具截圖
 
此工具通過可視化操作進行布局,依據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中文字自動換行和省略號
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM