微信小程序语法总结
常用字体样式属性
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;
}
图片和音频
图片
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>
盒模型属性
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>
导航栏示例
/* 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;
}
<!--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>
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>