微信小程序的组件总结

本文介绍微信小程序的组件

视图容器

基础内容

表单组件

导航组件

媒体组件

1. 视图容器
   • view

   布局容器
   <view hover-class='bg'>222</view>
   可以添加的属性如下
   hover-class 点击展示的类名
   hover-stop-propagation 是否阻止冒泡
   hover-start-time 点击多久出现hover效果
   hover-stay-time 点击取消hover效果持续时间
   

   • scroll-view

   可滚动容器
   <scroll-view style="height: 200rpx;" scroll-y scroll-into-view="aa">
       <view style="height: 100rpx;background: red;">111</view>
       <view style="height: 100rpx;background: yellow;" id="aa">222</view>
       <view style="height: 100rpx;background: black;" >333</view>
   </scroll-view>
   可用的属性如下
       scroll-x 是否允许横向滚动
       scroll-top="20" 设置纵向滚动条位置
       scroll-left="20" 设置横向滚动条位置
       scroll-into-view 指定哪个要显示的子元素的id
       scroll-with-animation 设置滚动定位时，是否显示动画
       enable-back-to-top 是否，双击回顶部（安卓），单击回顶部（苹果）
       bindscrolltoupper 滚动到头部触发事件
       bindscrolltolower 滚动到尾部触发事件
       bindscroll 滚动时触发事件
       upper-threshold="50" 设置scrolltoupper距离顶部触发的距离
       lower-threshold 设置scrolltolower距离顶部触发的距离
   

   • swiper

   轮播图组件
   imgUrls: [
     'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
     'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
     'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
   ]
   <swiper indicator-dots="true" style="width:300rpx;">
       <block wx:for="{{imgUrls}}">
           <swiper-item>
               <image src="{{item}}" width="355" height="150"/>
           </swiper-item>
       </block>
   </swiper>
   可用属性如下
       indicator-dots 是否显示指示点
       indicator-color="rgba(0,0,0,0.1)" 未选中指示点颜色
       indicator-active-color="#1aad16" 选中指示点颜色
       current='1' 设置当前展示图片的索引
       autoplay 是否自动播放
       interval='1000' 自动切换时间间隔
       duration 设置动画持续时间
       circular 是否循环播放图片
       vertical 是否纵向轮播
       bindchange 图片索引触发事件，event.detail.current获取当前索引
   

   • movable-view

   可移动区域
   <movable-area style="height: 500rpx;width: 500rpx;background: red;">
       <movable-view style="height: 50rpx;width: 50rpx;background: blue;" direction="all">
       </movable-view>
   </movable-area>
   可用属性如下
       direction 可移动的方向，属性值有all、vertical、horizontal、none
       inertia 滑动是否有惯性，可以设置friction="10" 来设置摩擦系数，控制惯性大小
       out-of-bounds 滑块是否可以超过边界，可以设置阻尼系数damping="50"，设置反弹的大小
       x="50" 初始x偏移量，阻尼系数也可以用于手动设置x,y的过渡动画
       y="50" 初始y偏移量
   

   • cover-view

   覆盖于原生组件之上的容器，map、video、canvas、camera
   <video>
       <cover-view>
           <cover-viewbindtap="play">
               <cover-image src="../../images/t1.jpg" />
           </cover-view>
           <cover-view>00:00</cover-view>
       </cover-view>
   </video>
   

2. 基础内容
   • icon

   内置图标 <icon type="success" size="25" color="green"></icon>
   可用属性如下
       type 设置icon的类型，success, success_no_circle, info, warn, waiting, cancel, download, search, clear
       size 设置icon的大小
       color 设置icon的颜色
   

   • text

   文本组件 <text selectable='true' decode='true'>11&nbsp;1</text>
   可用属性如下
       selectable 文字是否可选择
       decode 是否可以解码&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;特殊字符
   

   • rich-text

   富文本组件
   <rich-text nodes="{{nodes}}"></rich-text>
   nodes: [{
       name: 'div', // 标签名
       attrs: { // 标签的属性
           class: 'div_class',
           style: 'line-height: 60px; color: red;'
       },
       children: [{ // 子节点
           type: 'text', // 文本类型
           text: 'Hello&nbsp;World!'
       }]
   }]
   

   • progress

   设置进度条 <progress percent="20" show-info style="width: 400rpx;"/>
   可用属性如下
       percent 百分比
       show-info 是否显示文字百分比
       stroke-width="20" 设置进度条的高度
       activeColor="red" 设置已读进度条的颜色
       backgroundColor="black" 设置未读进度条的颜色
       active 是否显示进度条动画
       active-mode="forwards" 动画从头播backwards，动画从上次结束点接着播forwards
   

3. 表单组件
   • button

   按钮组件 <button type="primary" size="mini"> 222 </button>
   可用属性如下
       type 指定按钮的类型 primary default warn
       size 设置按钮大小 default mini
       plain 去掉按钮背景色
       disabled 按钮禁用
       loading 是否展示loading动画
       hover-class 点击态类
       hover-stop-propagation 点击态是否冒泡
       hover-start-time 点击态开始时间
       hover-stay-time 点击态持续时间
       form-type 配合form表单组件使用，submit reset
       open-type 打开微信的开放功能
           contact 打开客服对话窗口
               contact还可以配合如下属性使用
                   show-message-card 是否开启分享卡片
                   send-message-title 设置分享卡片的标题
                   send-message-path 分享卡片的路径
                   send-message-img 分享卡片的封面图片
                   bindcontact 用户打开会话的回调
           share 打开分享界面
           getUserInfo 获取用户信息，对应的绑定事件是 bindgetuserinfo
               <button type="primary" open-type="getUserInfo" bindgetuserinfo='myFn'>3</button>
               myFn: function(obj) {}
               还可以设置lang属性，控制用户信息的语言 zh_CN zh_TW en
           getPhoneNumber 获取用户手机号，对应的绑定事件是 bindgetphonenumber
   

   • checkbox

   复选框组件
       <checkbox-group bindchange="myFn">
           <label> <checkbox value="男"/> 男 </label>
           <label> <checkbox value="女"/> 女 </label>
       </checkbox-group>
   checkbox-group可用属性如下
       bindchange 绑定选择回调
   checkbox可用属性如下
       value 设置复选框值
       disabled 是否禁用
       checked 是否选中
       color 设置复选框选中的颜色
   

   • form

   表单提交组件
       <form bindsubmit='myFn' bindreset='myFn1'>
           <checkbox-group name="cbox">
               <label> <checkbox value="男"/> 男 </label>
               <label> <checkbox value="女"/> 女 </label>
           </checkbox-group>
           <view>
           <button form-type='submit'>提交</button>
           <button form-type='reset'>重置</button>
           </view>
       </form>
   每一个表单组件都需要使用name属性，作为提交的字段名
   

   • input

   表单输入组件
       <input placeholder='请输入...'></input>
   可用属性如下
       value 设置表单的值
       type 输入框的类型 text number idcard digit
       password 是否密码框
       placeholder 占位符
       placeholder-style 占位符样式
       placeholder-class 占位符类
       disabled 是否禁用
       maxlength 最大输入长度
       focus 自动聚焦
           配合cursor可以设置光标位置
       confirm-type 设置键盘右下角按钮 send search next go done
       confirm-hold 点击右下角按钮是否是否收起键盘
       bindinput 用户输入事件
       bindfocus 用户聚焦事件
       bindblur 用户失去焦点事件
       bindconfirm 点击右下角按钮事件
   

   • label

   label控件，和一般的html写法一样
   <label for="id">聚焦</label>
   <input id="id" placeholder='请输入...'></input>
   

   • picker

   选择器控件 <picker range='{{[1,2,3,4,5]}}'>选择器</picker>
   可用属性如下
       mode 设置选择器类型
           selector 默认的普通选择器
               range 设置选择的item
               value="2" 设置选中的item索引
               disabled 是否禁用
               bindchange 改变事件
           multiSelector 多选选择器
               <picker mode="multiSelector" range='{{[[1,2,3,4,5], [1,2,3,4,5]]}}' value="{{[1,2]}}">选择器</picker>
               属性同上，不过多了一个bindcolumnchange，单个列值改变触发
           time 事件选择器
               <picker mode = "time" value="12: 00">选择器</picker>
               value 设置时间值
               bindchange 改变事件
               disabled 是否禁用
           date 日期选择器
               <picker mode = "date" value="2017-06-01''">选择器</picker>
               fields="year" 只显示指定的日期部分 year month day
           region 省市级联选择器
               <picker mode = "region" value="{{['湖北省', '武汉市', '武昌区']}}">选择器</picker>
               custom-item="全部" 添加额外项
   

   • picker-view

   自定义选择器
       <view style="width: 100%; height: 300px;">
           <picker-view style="width: 100%; height: 100%;" value="{{[0,1,2]}}">
               <picker-view-column>
                   <view>11</view>
                   <view>22</view>
                   <view>33</view>
               </picker-view-column>
               <picker-view-column>
                   <view>11</view>
                   <view>22</view>
                   <view>33</view>
               </picker-view-column>
               <picker-view-column>
                   <view>11</view>
                   <view>22</view>
                   <view>33</view>
               </picker-view-column>
           </picker-view>
       </view>
   picker-view可用属性如下
       value 设置item索引值
       indicator-style 设置选择器样式
       indicator-class 样式类名
       mask-style 遮罩层样式
       mask-class 遮罩层类名
       bindchange 改变事件
   picker-view-column 只是选择器列的容器
   

   • radio

   单选组件
       <radio-group>
           <label> <radio value="男" /> 男 </label>
           <label> <radio value="女" /> 女 </label>
       </radio-group>
   radio-group可用属性
       bindchange
   radio可用属性
       value 设置单选框值
       checked 是否选中
       disabled 是否禁用
       color 选中颜色
   

   • slider

   滑动条选择器
       <slider step='1'></slider>
   可用属性如下
       min 设置最小值
       max 设置最大值
       step 滑动步长 （要求能被max-min整除）
       disabled 是否禁用
       value 设置初始值
       backgroundColor 选择条的背景颜色
       activeColor 选择条选中部分的颜色
       show-value 是否显示选中的值
       bindchange 拖动，手松开是触发
       bindchanging 拖动，手不松开一直触发
   

   • switch

   切换按钮组件 <switch></switch>
   可用属性如下
       checked 是否选中
       type 组件类型，默认switch，可以设置成checkbox复选框
       bindchange 改变事件
       color 选中的颜色
   

   • textarea

   文本域组件 <textarea style="border: 1px solid #ccc;"></textarea>
   可用属性如下
       value 文本框值
       placeholder 占位符
       placeholder-style 占位符样式
       placeholder-class 占位符类
       disabled 是否禁用
       maxlength 最大输入长度
       auto-focus 聚焦
       auto-height 自动增高
       fixed 父元素是fixed，需要设置此属性
       cursor 设置光标的位置
       show-confirm-bar 是否显示键盘完成栏
       bindfocus 聚焦时触发
       bindblur 失去焦点触发
       bindlinechange 输入框换行触发
       bindinput 输入时触发
       bindconfirm 点击完成触发
   

4. 导航组件
   • navigator

   页面跳转组件 <navigator url="/pages/logs/logs" >跳转到新页面</navigator>
   可用属性如下
       url 设置跳转链接
       open-type 设置跳转方式
           navigate 跳转指定页面（非tabbar页）
           redirect 跳转指定页面（非tabbar页，并且销毁当前页）
           switchTab 跳转到tabbar页
           reLaunch 销毁所有页面，跳转到任意指定页
           navigateBack 后退，配合delta属性，设置回退层数
       hover-class 点击类
       hover-stop-propagation 点击态是否冒泡
       hover-start-time 点击态开始出现时长
       hover-stay-time 点击结束点击态持续时间
   

5. 媒体组件
   • audio

   播放音乐组件 <audio controls src="/刘若英 - 念念.mp3"></audio>
   可用属性如下
       id 设置组件id
       src 音乐文件路径
       loop 是否循环播放
       controls 是否显示默认控件
       poster 封面图片
       name 音乐名字
       author 音乐作者
       binderror 发生错误触发事件
       bindplay 开始播放触发
       bindpause 暂停播放触发
       bindtimeupdate 播放进度改变触发
       bindended 播放结束触发
   

   • image

   图片组件 <image style="width: 500rpx; height: 500rpx; background-color: #eeeeee;"src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"></image>
   可用属性如下
       src 图片路径
       mode 图片模式，所有的模式如下
           scaleToFill 默认值，拉伸图片占满image元素
           aspectFit 保持图片原始比例
           aspectFill 保持原始比例，显示一部分
           widthFix 原始比不变，宽度固定，高度自适应
           top 保持图片原始大小，只显示头部
           bottom, center, left, right, top left, top right, bottom left, bottom right
   

   • video

   视频组件 <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls></video>
   可用属性如下
       src 视频网址
       initial-time="100" 设置初始播放位置，单位秒
       duration 设置视频时长，单位秒
       controls 是否显示默认播放控件
       enable-danmu 是否开启弹幕
       danmu-btn 是否开启控制弹幕的按钮
       danmu-list 设置弹幕列表信息，写法如下
           [
               {
                   text: '第 1s 出现的弹幕',
                   color: '#ff0000',
                   time: 1
               },
               {
                   text: '第 3s 出现的弹幕',
                   color: '#ff00ff',
                   time: 3
               }
           ]
       autoplay 是否自动播放
       loop 是否循环播放
       muted 是否静音播放
       page-gesture 是否在非全屏模式下开启亮度和音量调节
       direction 设置视频全屏的方向，0 代表竖向，90 代表横向
       bindplay 播放时触发的事件
       bindpause 暂停时触发的事件
       bindended 视频播放完成触发的事件
       bindtimeupdate 播放进度变化时触发事件
       bindfullscreenchange 视频切换全屏时触发
       objectFit 视频自适应的规则 contain：包含，fill：填充，cover：覆盖
       poster 视频的封面图片
   

   • camera

   照相机组件 <camera device-position='back' falsh="off" style="width: 100%; height: 300px;"></camera>
   可用属性如下
       device-position 使用前置还是后置摄像头 front back
       flash 闪光灯设置 auto, on, off
       bindstop 摄像头意外关闭触发
       binderror 用户禁止摄像头触发
   

6. 地图组件
   • map

   地图控件 <map longitude="113.324520" latitude="23.099994"  show-location style="width: 100%; height: 300px;"></map>
   相关属性如下
       longitude 设置经度
       latitude 设置纬度
       scale 初始缩放级别 5~18 默认是16
       include-points 当前实体要包含的点，数组
       show-location 定位点是否带方向
       bindmarkertap 标记点被点击触发
       bindcallouttap 点击标记点提示框触发
       bindcontroltap 点击自定义控件触发
       bindregionchange 地图移动触发
       bindtap 点击地图触发
       bindupdated 地图loaded触发
       controls 地图固定自定义控件，写法如下
           [{
               id: 'map',
               position: { 控件的位置
                   left: 0,
                   top: 300 - 50,
                   width: 50,
                   height: 50
               },
               iconPath: '/images/t1.jpg', 控件的图片
               clickable: true 是否可点击
           }]
       markers 地图标记点，写法如下
           [{
               id: 0, // 标记点id
               latitude: 23.099994, // 标记点坐标
               longitude: 113.324520,
               title: '测试', // 标记点的标题
               iconPath: '...', // 标记点图片
               rotate: 90, // 标记点旋转角度
               alpha: 0.5, // 标记点透明度
               width: 50, // 标记点宽度
               height: 50, // 标记点高度
               callout: ... // 自定义标记点提示框
                   传递对象，可选属性如下
                   content 显示的文本
                   color 文本的颜色
                   fontSize 文本字体大小
                   borderRadius 边框圆角
                   bgColor 背景颜色
                   padding: '30' 文本周围空隙
                   textAlign 文本对齐方式
                   display 设置提示框的显示形式 'BYCLICK' 点击后显示，'ALWAYS': 一直显示
               label: ... 设置标记点下方说明
                   传递对象，可用属性如下
                   content 文本
                   color 字体颜色
                   fontSize 字体大小
                   x 设置点偏移量
                   y
                   borderWidth 边框宽度
                   borderColor 边框颜色
                   borderRadius 边框圆角
                   bgColor 背景颜色
                   padding 文本周围空隙
                   textAlign 文本对齐方式
           }]
       polyline 画线，写法如下
           [{
               points: [{ 设置坐标点
                   longitude: 113.3245211,
                   latitude: 23.10229
               }],
               color: "#FF0000DD", 设置线的颜色
               width: 线的宽度
               dottedLine 是否虚线
               arrowLine 是否有箭头
               arrowIconPath 箭头图片路径
               borderColor 边框颜色
               borderWidth 边框宽度
           }]
       circles 画圆，写法如下
           [{
               longitude: 113.3245211, 圆中心坐标
               latitude: 23.10229,
               color: "#FF0000DD", 圆边框的颜色
               fillColor: "#000000AA", 圆填充颜色
               radius: 100, 圆半径
               strokeWidth: 5 圆边框宽度
           }]