• 小程序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中文字自动换行和省略号
     
  • 相关阅读:
    阿里云服务器,http免费转https详细教程
    springboot系列总结(二)---springboot的常用注解
    springboot系列总结(一)---初识springboot
    java 查询当天0点0分0秒
    mysql各个版本驱动jar包下载 mysql/mysql-connector-java/5.1.22
    泰坦尼克 学习
    切片
    忽略warning 警告
    迭代 递归 循环 遍历
    标准化 归一化
  • 原文地址:https://www.cnblogs.com/myloveblogs/p/6169514.html
Copyright © 2020-2023  润新知