• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序UI设计之-介绍篇

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

工具截图
 
此工具通过可视化操作进行布局,依据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(百分比单位),wxs-s-rpx(rpx单位)标签自动生成代码。
<ignore_js_op> 

基本操作
CTL+鼠标滚轴:放大缩小画布
CTL+C:复制
CTL+V:粘贴
CTL+右箭头:组件宽度放大微调
CTL+左箭头:组件宽度缩小微调
组件对齐:多选组件后,鼠标右键菜单可以进行组件对齐
 
工具获取:群号:422740450  加群请注明来源  和  来意 谢谢!

增加wxss导入功能。导入后双击classname后自动刷新画布中组件样式



增加设计时padding和margin提示
增加flexbox的align-content属性
增加flex-wrap属性,view中组件自动换行。
下图第一个宽度允许情况下,蓝红两个view在同一行。第二个自动换行。
view中文字自动换行和省略号
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap