前端样式库WeUI及wxss / 小程序设计与开发 #6

https://weui.io

类似于bootstrap这样的前端样式库，微信小程序也有自己的前端库，那就是WeUI。这里总结它的基本用法，和常用wxss样式（类似css）。

使用方法一(直接使用样式)：
前端样式参考weui |
github

1. 复制weui.wxss(style中,WeUI v1.1)到项目根目录中(app.wxss同级目录)
2. app.wxss引用weui.wxss(全局引用)：
   /app.wxss/
   @import "weui.wxss";
3. 当前页面使用，拷贝对应的wxml、wxss和js文件。

使用方法二(以组件的形式)：

1. app.json中注册
    "useExtendedLib": {
       "weui": true
     },
2. app.wxss引用weui.wxss(全局引用)
   /**app.wxss**/
   @import "weui.wxss";    
3. 当前页面注册(例如test.json)
   "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-badge": "weui-miniprogram/badge/badge"
  }
4. 当前页面使用
 <mp-cell link>
    <view style="display: inline-block; vertical-align: middle">单行列表</view>
    <mp-badge content="8" style="margin-left: 5px;"/>
</mp-cell> 

WeUI组件

1. weui.io上找到相应的组件样式。
2. 查找weui--wxcss -> example中的组件包，每个文件都包含对应的wxml、wxss和js文件，把它们拷贝到相应的位置。
3. 对样式进行修改。可以直接在原有的基础上增加新样式，比如class="page__title title2"

常用wxss样式（类似css）

WXSS主要控制页面的样式，比如页面的布局，字体大小、颜色、阴影等。

文档 |
css文档 |
HTML5基础语法规范

单位：盒子用rpx, 文字用px单位。

字体属性

字体大小：一级标题19px ，二级标题17px。（其中文本15px，可以在app.wxss中统一设置）
font-size: 15px;         //字体大小
line-height: 22px;       //行间距
color: rgb(66, 66, 66);  //字体颜色
font-family: 微软雅黑，宋体； //一般就用默认字体
text-align: center;   //文本居中
text-shadow: 2px 2px 5px red; //阴影

图片属性

设计图大小为：750*1334 px(12.7*22.6cm  300dpi)
mode='widthFix' 宽度占满，高度自动变化，保持原图宽高比不变
<image src='' mode='widthFix'></image>
image{
  display:flex;
  width: 100%;
  margin: 0 auto;  //盒子居中
}

盒子属性

width: 200rpx;
height: 150rpx; 
background-color: aqua; //背景色
border: 1px solid red; //边框, border-bottem
border-radius: 25rpx; //圆角
box-shadow: 2px 2px 5px red; //阴影
margin: 20rpx 20rpx;  //外边距
padding-bottom: 5rpx; //内边距
margin: 0 auto;  //盒子居中