常用字体样式属性

font-family (字体类型)

Serif
Sans-serif
Monospace
Cursive
Fantasy

font-size(字体大小)

5px/rpx/cm
large
small
medium
larger
smaller

font-style(字体倾斜)

italic
normal
oblique

font-weight(字体加粗)

bold
bolder
lighter

color (字体颜色)

text-align(文本的对齐方式)

text-indent(首行缩进)

letter-spacing(字母之间的距离)

word-spacing(单词间距，以空格来区分单词)

white-space(文档中的空白处)

text-decoration(文本修饰样式)

text-decoration-color(文本修饰颜色)

利用style和class设置字体样式

view组件支持使用style、class属性来设置组件的样式。
利用style可直接在WXML文件中设置，利用class需要先在WXSS文件中定义样式类。
静态样式一般使用class设置，动态样式一般使用style设置，这样可以提高渲染速度。

在index.wxss和app.wxss中定义样式类的区别

在app.wxss中定义的样式类属于全局样式类，可以在项目的任何文件中使用。
在index.wxss中定义的样式类一般只在index.wxml中使用。

/**app.wxss**/
.box{
	border:1px solid silver;
	margin:20rpx;
	padding:20rpx;
}
.title{
	font-size:25px;
	text-align:center;
	margin-bottom:15px;
	color:red;
}
1
2
3
4
5
6
7
8
9
10
11
12

图片和音频

图片

image组件
支持JPG、PNG、SVG格式，使用src属性指定图片的路径。

音频

首先利用API函数wx.createInnerAudioContext()创建音频上下文，然后设置该上下文的src，并利用play()函数播放音频。

数据绑定

WXML文件中的动态数据通过{{}}符号与JS文件中的数据进行绑定，这样JS中的数据就可以传给WXML文件，这种传递是单向的。

事件绑定

在WXML文件组件标签内利用“bind…=函数名”，绑定组件事件与函数，并在JS文件中定义该事件函数。

例子

首先将图片和音频文件拷贝到根目录下

<!--index.wxml-->
<view class='box'>
	<view class='title'>图片和声音</view>
	<view>
		<image src='{{imgSrc}}' bindtap='tapCat'></image>
	</view>
</view>
1
2
3
4
5
6
7

盒模型属性

none(定义无边框)

dotted(定义一个电线边框)

dashed(定义一个虚线边框)

solid(定义实线边框)

double(定义两个边框)

groove(定义3D沟槽边框。效果取决于边框的颜色值)

ridge(定义3D脊边框。效果取决于边框的颜色值)

inset(定义一个3D的嵌入边框。效果取决于边框的颜色值)

outset(定义一个3D突出边框。效果取决于边框的颜色值)

border-weidth(设置边框宽度)

border-color(设置边框颜色)

页面布局实例

<!--pages/kj/demo113-layout/index.wxml-->
<view class='box'>
	<view class='title'>页面布局示例</view>
	<!--实现三栏水平均匀布局-->
	<view style='display:flex;text-align:center;line-height:80rpx;'>
		<view style='background-color:red;flex-grow:1;'>1</view>
		<view style='background-color:green;flex-grow:1;'>2</view>
		<view style='background-color:blue;flex-grow:1;'>3</view>
	</view>
	---------------------------------
	<!--实现左右混合布局-->
	<view style='display:flex;height:300rpx;text-align:center;'>
		<view style='background-color:red;width:250rpx;line-height:300rpx;'>1</view>
		<view style='display:flex;flex-direction:column;flex-grow:1;line-height:150rpx;'>
			<view style='background-color:green;flex-grow:1;'>2</view>
			<view style='background-color:blue;flex-grow:1;'>3</view>
		</view>
	</view>
	-----------------------------------
	<!--实现上下混合布局-->
	<view style='display:flex;flex-direction:column;line-height:300rpx;text-align:center;'>
		<view style='background-color:red;height:100rpx;line-height:100rpx;'>1</view>
		<view style='flex-grow:1;display:flex;flex-direction:row;'>
			<view style='background-color:green;flex-grow:1;'>2</view>
			<view style='background-color:blue;flex-grow:1;'>3</view>
		</view>
	</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

导航栏示例

/* pages/kuangjia/index/wxss */
navigator{
	margin:5px;
	font-size:20px;
}
.waikuang{
	display:flex;
	flex-direction:row;
	margin:5px 0px;
	padding:5px 0px;
}
.myleft{
	margin-right:10px;
}
.mycenter{
	flex:1;
}
.myright{
	width:40rpx;
	height:40rpx;
	margin-top:5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!--pages/kuangjia/index.wxml>
<view class='box'>
	<view class='title'>框架案例</view>
		<navigator url='HelloWechat/index'>
			<view class='waikuang'>
				<icon type='success' class='myleft'></icon>
				<view class='mycenter'>HelloWechat</view>
				<image src='/images/right-arrow.png' class='myright'></image>
			</view>
		</navigator>
	</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

navigator组件属性

target

在哪个目标上发生跳转，其合法值为self（本身小程序内跳转）和miniProgram（跳转到另一个小程序），默认值为self

url

当前小程序内的跳转地址

open-type

跳转方式

delta

当前open-type为’navigateBack’时有效，表示回退的层数

app-id

当target='miniProgram’时有效，要打开的小程序appID

path

当target=‘miniProgram’时有效，打开的页面路径，如果为空则打开首页

open-type的合法值

navigate

保留当前页面，跳转到应用内的某个页面

redirect

关闭当前页面，跳转到应用内的某个页面

switchTab

跳转到tabBar页面，并关闭其他所有非tabBar页面

reLaunch

关闭所有页面，打开应用内的某个页面

navigateBack

关闭当前页面，返回上一页面或多级页面

exit

退出小程序，target=‘miniProgram’时生效

Icon图标组件的主要属性

type(icon的类型)

有效值：success，success_no_circle，info，warn，waiting，cancel，download，search，clear

size(icon的大小)

color(icon的颜色)

float页面布局示例

<!--pages/index.wxml-->
<view class='box'>
	<view class='title'>Float页面布局</view>
	
	<view class='bg1'>
		<view class='box1'>box1</view>
		<view class='box2'>box2</view>
		<view class='box3'>box3</view>
	</view>

	<view class='bg2'>
		<view class='header'>header</view>
		<view class='leftBar'>leftBar</view>
		<view class='main'>main</view>
		<view class='rightBar'>rightBar</view>
		<view class='footer'>footer</view>
	</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18