用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-12-2 08:35:36 comeonliuqd原创达人 layout可视化工具 楼主 25811
本帖最后由 comeonliuqd 于 2016-12-2 08:35 编辑
工具简介:小程序layout设计工具,可视化方式进行小程序UI设计。通过鼠标拖拽组件方式进行UI布局。工具提供符合微信视觉统一的模板,并且按照FlexBox方式可视化布局。自动生成wxml和wxss,复制到微信开发者工具中即可同步显示。视频介绍请移步优酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

小程序中一般很少大段落的文字,基本是4、5个字的主题、一行标题、一行摘要、两行描述。显示时超出部分用省略号代替。
下面结合工具使用介绍一下文字排版的方法。先看效果图。
2016-12-02_08-25-11.png

2016-12-02_08-25-34.png
工具中属性设置如下图:
两行文字属性,限制行数=2,表示最多两行,超出部分用省略号代替。
2016-12-02_08-27-34.png
不限制行数属性中限制行数=0,表示在小程序中根据文字内容自动拉伸。
2016-12-02_08-29-31.png
一行文字属性中限制行数=1,表示文字只显示一行,超出部分省略号代替。
2016-12-02_08-30-44.png
以上文字是显示在view中的,自动生成的wxml如下:
[XML] 纯文本查看 复制代码
  <view class="WViewColumn1" style="">
    <view class="WViewRow1" style="">工欲善其事必先利其器。layout设计工具是为小程序开发而专门定制的。开发初衷是为了提高UI设计效率。在平时项目开发时,由于本人不是专业美工设计,因此在UI设计上浪费了很多时间。所以“一怒之下”开发了这个工具。</view>
    <view class="WViewRow2" style="">工欲善其事必先利其器。layout设计工具是为小程序开发而专门定制的。开发初衷是为了提高UI设计效率。在平时项目开发时,由于本人不是专业美工设计,因此在UI设计上浪费了很多时间。所以“一怒之下”开发了这个工具。</view>
    <view class="WViewRow3" style="">工欲善其事必先利其器。layout设计工具是为小程序开发而专门定制的。开发初衷是为了提高UI设计效率。在平时项目开发时,由于本人不是专业美工设计,因此在UI设计上浪费了很多时间。所以“一怒之下”开发了这个工具。</view>
  </view>

自动生成的wxss如下:
[CSS] 纯文本查看 复制代码
.WViewColumn1{
box-sizing:border-box;
 display:flex;
 justify-content:flex-start;
 align-items:flex-start;
 flex-direction:column; 
 flex-wrap:nowrap; 
 align-content:stretch; 
 width:100%;
 height: 1960rpx; 
 background-color: transparent; 
 color: #FFFFFF; 
 font-size: 20PX; 
 line-height:40rpx; 

}
.WViewRow1{
box-sizing:border-box;
 display:flex;
 justify-content:flex-start;
 align-items:flex-start;
 flex-direction:row; 
 flex-wrap:wrap; 
 align-content:stretch; 
margin: 16rpx 0rpx 0rpx 0rpx; 
 width:100%;
 height: 4%; 
 display: -webkit-box;
display: -moz-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
 background-color: #FFFFFF; 
 color: #000000;  font-size: 20PX; 
 line-height:40rpx; 

}
.WViewRow2{
box-sizing:border-box;
 display:flex;
 justify-content:flex-start;
 align-items:flex-start;
 flex-direction:row; 
 flex-wrap:wrap; 
 align-content:stretch; 
margin: 16rpx 0rpx 0rpx 0rpx; 
 width:100%;
 height: 12%; 
 background-color: #FFFFFF; 
 color: #000000;  font-size: 20PX; 
 line-height:40rpx; 

}
.WViewRow3{
box-sizing:border-box;
 display:flex;
 justify-content:flex-start;
 align-items:flex-start;
 flex-direction:row; 
 flex-wrap:wrap; 
 align-content:stretch; 
margin: 16rpx 0rpx 0rpx 0rpx; 
 width:100%;
 height: 2%; 
 display: -webkit-box;
display: -moz-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
 background-color: #FFFFFF; 
 color: #000000;  font-size: 20PX; 
 line-height:40rpx; 

}

view行高的设置根据字体大小而定,比如20px大小的字体,显示两行的话Height=40;显示一行的话Height=20。不需要限制高度的不用写Height。

开专区啦!恭喜恭喜!还有专属logo呢。
笑若天河 发表于 2016-12-3 10:43
开专区啦!恭喜恭喜!还有专属logo呢。

发新帖
您需要登录后才可以回帖 登录 | 立即注册