微信小程序|微信小程序语法总结微信小程序|小程序

常用字体样式属性 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文件中定义该事件函数。
例子首先将图片和音频文件拷贝到根目录下

图片和声音

盒模型属性 none(定义无边框) dotted(定义一个电线边框) dashed(定义一个虚线边框) solid(定义实线边框) double(定义两个边框) groove(定义3D沟槽边框。效果取决于边框的颜色值) ridge(定义3D脊边框。效果取决于边框的颜色值) inset(定义一个3D的嵌入边框。效果取决于边框的颜色值) outset(定义一个3D突出边框。效果取决于边框的颜色值) border-weidth(设置边框宽度) border-color(设置边框颜色) 页面布局实例

页面布局示例 1 2 3 --------------------------------- 1 2 3 ----------------------------------- 1 2 3

导航栏示例

/* 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; }