一、前一篇我们用.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
}
谢谢阅读。共同进步!