工具中为小程序员们准备了符合微信开发规范的模板。之前帖子中介绍的规范都在模板中已经设计好了，可以直接复制粘贴使用。
下图中的样式是从模板直接复制过来的。实际使用时只要更换为自己的图片和文字即可。自动生成的wxml和wxss也可以直接使用。从而大大提高了开发效率。

 
下面是部分模板的展示：
 
 
 

小程序UI设计（10）-巧用模板，事半功倍的更多相关文章

  1. 小程序UI设计（1）-布局

    工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模 ...

  2. 小程序UI设计（4）-符合视觉规范-表单输入视觉规范

    下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层v ...

  3. 小程序UI设计（3）-符合视觉规范-列表视觉规范

    上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求   在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direc ...

  4. 小程序UI设计（9）-文字排版

    小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图.  工具中属性设置如下图:两行文字属 ...

  5. 小程序UI设计（2）-符合视觉规范-字体规范

    下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件.如下图 工具使用时,将左侧组件拖拽到设计区域即可.字体大小和颜色都是按照规范设置的.在使用时根据微信要求在不同位置摆放即 ...

  6. 小程序UI设计之-介绍篇

    工具截图 此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss.后续还会增加js代码自动生成.工具中组件按照微信小程序开发规范进行了缺省设置,margin ...

  7. 小程序UI设计（5）-符合视觉规范-按钮视觉规范

    在设计工具中,根据规范我们定义了大中小三种按钮的尺寸大:720rpx *94rpx 圆角10px 字体18中:360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小:120rpx*60 ...

  8. 小程序UI设计（7）-布局分解-左-上下结构

    FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...

  9. 小程序UI设计（8）-布局分解-FlexBox的align-content应用

    FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-conten ...

随机推荐

  1. zebra 配置问题导致服务起不来

    由于配置错误的原因,导致 zebra 起不来,具体报错如下: zebra 起不来,导致 ospf 也起不来,报错如下: Job ospfd.service/start failed with resu ...

  2. CSRF类型

    按照请求类型来区分.分为:GET类型和POST类型 按照攻击类型分类,CSRF可分为:HTML CSRF攻击,JSOM HiJacking攻击和FIash CSRF攻击 HTML CSRF攻击 HTM ...

  3. prometheus 监控jvm-tomcat

    1.prometheus的配置 - job_name: 'java01' #按照这个来分组 scrape_interval: 10s static_configs: - targets: ['192. ...

  4. FTL方面综述

    FTL 1.百度百科 http://baike.baidu.com/link?url=HJ94Rz2Td83V8OW-6dD_h_P8CZb9VFR6HznPDopY_SFdfXDaMriYcBm1X ...

  5. Linux文件属性之时间戳及文件名知识详解

    ls  -lhi 7.8.9三列是时间(默认是修改时间) modify    修改时间 -----mtime     一般是修改文件内容 change   改变时间----ctime      文件的 ...

  6. vsphere6.7+Horizon7.8推送桌面遇到的一些问题

    系统环境 esxi6.7+vSphere6+Horizon7.8 VC环境为windows server 2016 standard 问题描述 vc安装 链接外部数据库找不到DSN 安装view co ...

  7. 走近kafka-文件存储

    过期的数据才会被自动清除以释放磁盘空间.比如我们设置消息过期时间为2天,那么这2天内的所有消息都会被保存到集群中,数据只有超过了两天才会被清除. Kafka只维护在Partition中的offset值 ...

  8. 数据去重 -uniq

    也是经常和管道 一起操作的. -c  每行出现的次数 -d  仅仅显示重复行 -u  仅仅显示不重复行 -i  忽略大小写 注: 在对字母进行去重的时候, 一定要先对文件进行排序之后,去重的功能才可以 ...

  9. MySQL+navicat-1064 Error解决方案

    MySQL+navicat-1064 Error解决方案 错误 #1064 - You have an error in your SQL syntax; check the manual that ...

  10. 避免同一个文件被#include多次，可以用以下两种方式

    1.#ifndef方式 2.#pragma once方式 方式一: #ifndef  _SOMEFILE_H_ #define _SOMEFILE_H_ ... ...//一些声明语句    #end ...