小程序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中文字自动换行和省略号