基础标签
视图view
view：类似div,块级元素
文本text
text：类似span，行内元素
text 组件内只支持 text 嵌套
除了文本节点以外的其他节点都无法长按选中
字体图标icon
type:icon的类型
【可选success/success_no_circle/info/warn/waiting/cancel/download/search/clear】
size：icon的大小【默认23，单位默认为px，支持单位rpx/px/rem】
color：icon的颜色
页面跳转navigator
url：小程序内的跳转链接吗
open-type：跳转方式【默认navigate打开新页面，redirect在当前页面打开】
示例：
<navigator url="/pages/other/other" >跳转其他页面</navigator>轮播和滚动视图
轮播swiper/swiper-item
swiper属性：
indicator-dots：是否显示面板指示点【默认false 】
indicator-color：指示点颜色【默认rgba(0, 0, 0, .3)】
indicator-active-color：当前选中的指示点颜色【默认#000000】
autoplay：是否自动切换【默认false】
interval：自动切换时间间隔【默认5000】
duration：滑动动画时长【默认500】
circular：是否采用衔接滑动【默认false】
vertical：滑动方向是否为纵向【默认false】
示例：
<swiper autoplay="true" circular="true">
<swiper-item>
<image mode="heightFix" src="../../images/swiper/1_800x400.png"></image>
</swiper-item>
</swiper>滚动视图scroll-view
可滚动视图区域：东西摆放不开，可采用左右/上下滚动展示
scroll-x：允许横向滚动【默认false】
scroll-y：允许纵向滚动【默认false】
scroll-top：设置竖向滚动条位置
scroll-left：设置横向滚动条位置
refresher-enabled：开启自定义下拉刷新【默认false】
示例
<scroll-view class="scroll-container" scroll-x="true">
<view class="scroll-item">1</view>
<view class="scroll-item">1</view>
<view class="scroll-item">1</view>
</scroll-view>
.scroll-container {
/* 规定容器内元素不进行换行 */
white-space: nowrap;
}
.scroll-item {
display: inline-block;
width: 100%;
height: 400rpx;
background-color: aquamarine;
}表单
输入框input
value【必填】：输入框的初始内容
placeholder【必填】：输入框为空时占位符
password：是否是密码类型
disabled：是否禁用
maxlength：最大输入长度，设置为 -1 的时候不限制最大长度
focus：获取焦点
type：input 的类型【text文本/number数字/idcard身份证/digit带小数点的数字/nickname昵称】
confirm-type：设置键盘右下角按钮的文字，仅在type='text'时生效【send发送/search搜索/next下一个/go前往/done完成】
多行输入框textarea
value：输入框的内容
placeholder：输入框为空时占位符
disabled：是否禁用【默认false】
maxlength：最大输入长度【默认140，设置为 -1 的时候不限制最大长度】
focus：获取焦点【默认false】
auto-height：是否自动增高【默认false】
开关选择器switch
checked：是否选中【默认false】
disabled：是否禁用【默认false】
type：样式【有效值：switch, checkbox】
color：switch 的颜色【默认#04BE02】
单选框radio
配合 radio-group 形成一组
复选框checkbox
配合 checkbox-group 形成一组
按钮button
type：按钮的样式类型【primary绿色/default白色/warn红色】
size：按钮的大小【default默认大小/mini小尺寸】
plain：按钮是否镂空
disabled：是否禁用
loading：名称前是否带 loading 图标
form-type：用于form组件，点击分别会触发form组件的 submit/reset 事件
多媒体
图片image
src：图片资源地址
mode：图片裁剪、缩放的模式
mode可选的值：
scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top 裁剪模式，不缩放图片，只显示图片的顶部区域
bottom 裁剪模式，不缩放图片，只显示图片的底部区域
center 裁剪模式，不缩放图片，只显示图片的中间区域
left 裁剪模式，不缩放图片，只显示图片的左边区域
right 裁剪模式，不缩放图片，只显示图片的右边区域
top left 裁剪模式，不缩放图片，只显示图片的左上边区域
top right 裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域
音频audio
可通过动态修改src实现切换音乐功能
id：audio 组件的唯一标识符
src：要播放音频的资源地址
loop：是否循环播放【默认false】
controls：是否显示默认控件【默认false】
poster：默认控件上的音频封面的图片资源地址
name：默认控件上的音频名字【默认未知音频】
author：默认控件上的作者名字【默认未知作者】
视频video
src：要播放视频的资源地址，支持网络路径、本地临时路径
duration：指定视频时长
controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）【默认true】
autoplay：是否自动播放【默认false】
loop：是否循环播放【默认false】
muted：是否静音播放【默认false】
initial-time：指定视频初始播放位置【默认0】
show-mute-btn：是否显示静音按钮【默认false】
danmu-list：弹幕列表
danmu-btn：是否显示弹幕按钮，只在初始化时有效，不能动态变更【默认false】
enable-danmu：是否展示弹幕，只在初始化时有效，不能动态变更【默认false】
相机/扫码二维码camera
mode：应用模式，只在初始化时有效，不能动态变更【normal:相机模式 scanCode:扫码模式】【默认normal】
device-position：摄像头朝向【front:前置 back:后置】【默认back】
flash：闪光灯【auto/on/off】【默认auto】
地图map
地图，小程序地图实现功能相对比基础一些，如果要实现完整的地图能力，请参考腾讯地图
腾讯地图：https://lbs.qq.com/product/miniapp/home/
longitude：中心经度
latitude：中心纬度
scale：缩放级别，取值范围为3-20【默认16】
min-scale：最小缩放级别【默认3】
max-scale：最大缩放级别【默认20】
示例:
<map latitude="23.099994" longitude="113.324520" scale="12" min-scale="10" max-scale="18"></map>选择器
普通选择器
<picker bindchange="bindPickerChange" value="{
{index}}" range="{
{array}}">
<view class="picker">
当前选择：{
{array[index]}}
</view>
</picker>
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
index: 0
},
bindPickerChange(e) {
this.setData({
index: e.detail.value
})
}
})
多列选择器
<picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{
{multiIndex}}" range="{
{multiArray}}">
<view class="picker">
当前选择：{
{multiArray[0][multiIndex[0]]}}，{
{multiArray[1][multiIndex[1]]}}，{
{multiArray[2][multiIndex[2]]}}
</view>
</picker>
Page({
data: {
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
multiIndex: [0, 0, 0],
},
bindMultiPickerChange: function (e) {
this.setData({
multiIndex: e.detail.value
})
}
})
时间选择器
<picker mode="time" value="{
{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {
{time}}
</view>
</picker>
Page({
data: {
time: '12:01'
},
bindTimeChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
}
})日期选择器
<picker mode="date" value="{
{date}}" start="2000-09-01" end="2030-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {
{date}}
</view>
</picker>
Page({
data: {
date: '2030-09-01'
},
bindDateChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
}
})省市区选择器
<picker mode="region" bindchange="bindRegionChange" value="{
{region}}">
<view class="picker">
当前选择：{
{region[0]}}，{
{region[1]}}，{
{region[2]}}
</view>
</picker>
Page({
data: {
region: ['广东省', '广州市', '海珠区']
},
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
进度条和滑块选择器
基本进度条progress
percent：百分比0~100
show-info：是否在进度条右侧显示百分比【默认false】
border-radius：圆角大小【默认0】
font-size：右侧百分比字体大小【默认16】
stroke-width：进度条线的宽度【默认6】
activeColor：进度条颜色【默认#09BB07】
backgroundColor：未选择的进度条的颜色【默认#EBEBEB】
active：进度条从左往右的动画【默认false】
duration：进度增加1%所需毫秒数【默认30】
滑动选择器slider
step：步长【取值必须大于 0，并且可被(max - min)整除】
show-value：是否显示当前value【默认false】
min number：最小值【默认0】
max number：最大值【默认100】
disabled：是否禁用
value：当前取值【默认0】
backgroundColor：背景条的颜色【默认#e9e9e9 】
activeColor：已选择的颜色【默认#1aad19】
block-color：滑块的颜色【默认#ffffff】