1.1.1 微信小程序--我的第一个小程序（续：.wxss设置样式）

一、前一篇我们用.wxml文件搭建出来了页面框架，如下图：

但是页面里的内容，包括图片、文字都是按默认格式显示的。怎么才能按照我们想要的样式显示呢？

※   预想，先定个想像的结果：

1.图片缩小、居右

2.每行字体比前一行小，名字加粗

3.每行颜色都不一样

4.每行居左、居中、居右交替

 

先了解一下wxss（不想看的直接看：二、先看看官方给的参数（别太纠结，用的时候再查））

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

• 尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

 

---

 

开始吧。

二、先看看官方给的image参数（别太纠结，用的时候再查）：

属性名	类型	默认值	说明	最低版本
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效	1.5.0
binderror	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
bindload	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

注1：image组件默认宽度300px、高度225px 注2：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

此处重点：

使用flex布局，默认布局下块级元素是会换行的，但设置了flex布局后默认就都水平排列了
（水平方向）justify-content:

flex-start（居于轴线的开头）

center（居于轴线的中间）

flex-end（居于轴线的末端）

space-around（将子元素按比例排列在轴线上）

space-between（将子元素排列在轴线两端） 
（垂直方向）align-items:

同justify-content 

图片设置代码：

.wxml

<view class='imagesize'>                    //用class来声明样式名
  <image src="{{img}}" class='in-image'>    // in-img   
  </image>
</view>

.wxss

.imagesize{
  display:flex;                           //flex布局
  align-items: flex-start;                //垂直轴线的开头
  justify-content: flex-end;              //水平轴线的末端
}
.imagesize image {                        //设置图片尺寸，**这里是我在官方那没找到的
  width: 400rpx;
  height: 400rpx;
  }

字体设置

wxss 文本属性（text）
属性	说明	语法(属性值)
color	设置文本颜色
direction	设置文本方向。	ltr:文本方向从左到右;rtl:文本方向从右到左
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本	left：把文本排列到左边。默认值，由浏览器决定。 right：把文本排列到右边。 center：把文本排列到中间。 justify：实现两端对齐文本效果。 inherit: 规定应该从父元素继承 text-align 属性的值。
text-decoration	向文本添加修饰	underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影	text-shadow: h-shadow v-shadow blur color; h-shadow:水平阴影的位置,允许负值; v-shadow:垂直阴影的位置,允许负值; blur:模糊的距离; color:阴影的颜色
text-transform	控制元素中的字母	capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

wxss 字体属性（font）
属性	说明	语法(属性值)
font	在一个声明中设置所有字体属性	font:font-style font-variant font-weight font-size/line-height font-family(按顺序)
font-style	指定文本的字体样式	normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。
font-variant	以小型大写字体或者正常字体显示文本	normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承 font-variant 属性的值。
font-weight	指定字体的粗细	normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 inherit 规定应该从父元素继承字体的粗细。
font-size	指定文本的字体大小	smaller 把 font-size 设置为比父元素更小的尺寸。 larger 把 font-size 设置为比父元素更大的尺寸。 length 把 font-size 设置为一个固定的值。 % 把 font-size 设置为基于父元素的一个百分比值。
font-family	指定文本的字体系列

.wxml

<view class='titlesize'>{{title}}</view>            //声明titlesize样式名，下面也是
<view class='introsize'>介绍：{{intro}}</view>
<view class='phonesize' bindtap='callme'>手机：{{contact}}</view>
<view class='adresssize'>地址: {{address}}</view>
<view class='wechatsize'>微信号：{{wechat}}</view>
<view class='emailsize'>邮箱：{{email}}</view>

.wxss

.titlesize{
  font-size: 45px;                       //字号
  font-weight: bold;                     //加粗
  text-align:center;                     //居中
  color:red                              //红色
}
.introsize{
  font-size: 20px;
  font-weight: normal;
  text-align:left;
  color:blue
}
.phonesize{
  font-size: 18px;
  font-weight: normal;
  text-align:right;
  color:green
}
.adresssize{
  font-size: 16px;
  font-weight: normal;
  text-align:center;
  color:salmon
}
.wechatsize{
  font-size: 14px;
  font-weight: normal;
  text-align:left;
  color:darkblue
}
.emailsize{
  font-size: 12px;
  font-weight: normal;
  text-align:right;
  color:lightblue
}

先看显示结果图（代码等下完整给）：

已完成预想的4点。

三、代码（主要看懂代码，要改的再查也行）：

其实只是在.wxml文件里加了class=‘’，用来声明样式名。

又在.wxss里给出了详细设置。

本篇在上篇代码之上改的，没给的其他都没改，代码如下：

aboutme.wxml

<!--aboutme.wxml-->

<view class='imagesize'>
  <image src="{{img}}" class='in-image'>
  </image>
</view>
<view class='titlesize'>{{title}}</view>
<view class='introsize'>介绍：{{intro}}</view>
<view class='phonesize' bindtap='callme'>手机：{{contact}}</view>
<view class='adresssize'>地址: {{address}}</view>
<view class='wechatsize'>微信号：{{wechat}}</view>
<view class='emailsize'>邮箱：{{email}}</view>

aboutme.wxss

.imagesize{
  float: right;
}
.imagesize image {
  
  width: 400rpx;
  height: 400rpx;
  }
.titlesize{
  font-size: 45px;
  font-weight: bold;
  text-align:center;
  color:red
}
.introsize{
  font-size: 20px;
  font-weight: normal;
  text-align:left;
  color:blue
}
.phonesize{
  font-size: 18px;
  font-weight: normal;
  text-align:right;
  color:green
}
.adresssize{
  font-size: 16px;
  font-weight: normal;
  text-align:center;
  color:salmon
}
.wechatsize{
  font-size: 14px;
  font-weight: normal;
  text-align:left;
  color:darkblue
}
.emailsize{
  font-size: 12px;
  font-weight: normal;
  text-align:right;
  color:lightblue
}

谢谢阅读。共同进步！