微信小程序之基础组件

    

目录

1、属性类型

2、代码示例

2.1、movable-area和movable-view

2.1.1、movable-area

2.1.2、movable-view

2.2、page-container

 2.3、scroll-view

2.4、share-element

 2.5、swiper

2.5.1、swiper

2.5.2、swiper-item

 2.6、view

2.7、icon

2.8、progress

2.9、text

2.9、button

2.10、checkbox

2.11、editor

2.12、 form

2.13、input

2.14、 keyboard-accessory

2.15、label

2.16、picker

 2.17、radio

2.18、switch

---

    框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。详细介绍请参考微信官方文档-基础组件。

注意：所有组件与属性都是小写，以连字符-连接

1、属性类型

类型	描述	注解
Boolean	布尔值	组件写上该属性，不管是什么值都被当作 true；只有组件上没有该属性时，属性值才为false。 如果属性值为变量，变量的值会被转换为 Boolean 类型
Number	数字	1, 2.5
String	字符串	"string"
Array	数组	[ 1, "string" ]
Object	对象	{ key: value }
EventHandler	事件处理函数名	"handlerName" 是 Page 中定义的事件处理函数名
Any	任意属性

公共属性 

所有组件都有以下属性：

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	详见事件

特殊属性

        几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。

2、代码示例

        代码示例是个人感觉可能用得到的

2.1、movable-area和movable-view

2.1.1、movable-area

         movable-view的可移动区域。

属性说明

属性	类型	默认值	必填	说明
scale-area	Boolean	false	否	当里面的 movable-view 设置为支持双指缩放时， 设置此值可将缩放手势生效区域修改为整个movable-area

 注意：

1. tip: movable-area 必须设置 width 和height属性，不设置默认为10px**
2. tip: 当 movable-view 小于 movable-area 时，movable-view的移动范围是在 movable-area 内；
3. tip: 当 movable-view 大于 movable-area 时，movable-view的移动范围必须包含movable-area（x轴方向和 y 轴方向分开考虑）
4. tip: 若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现（详情参考 enablePassiveEvent 文档）

2.1.2、movable-view

        可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

属性说明

属性	类型	默认值	必填	说明
direction	string	none	否	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	boolean	false	否	movable-view是否带有惯性
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view是否还可以移动
x	number/string		否	定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画；单位支持px（默认）、rpx；
y	number/string		否	定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画；单位支持px（默认）、rpx；
damping	number	20	否	阻尼系数，用于控制 x 或y改变时的动画和过界回弹的动画，值越大移动越快
friction	number	2	否	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled	boolean	false	否	是否禁用
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内
scale-min	number	0.5	否	定义缩放倍数最小值
scale-max	number	10	否	定义缩放倍数最大值
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 - 10
animation	boolean	true	否	是否使用动画
bindchange	eventhandle		否	拖动过程中触发的事件，event.detail = {x, y, source}
bindscale	eventhandle		否	缩放过程中触发的事件，event.detail = {x, y, scale}，x和 y 字段在2.1.0之后支持
htouchmove	eventhandle		否	初次手指触摸后移动为横向的移动时触发，如果 catch 此事件，则意味着 touchmove 事件也被catch
vtouchmove	eventhandle		否	初次手指触摸后移动为纵向的移动时触发，如果 catch 此事件，则意味着 touchmove 事件也被catch

注意事项：

1. tip: movable-view 必须设置 width 和height属性，不设置默认为10px
2. tip: movable-view 默认为绝对定位，top和 left 属性为0px
3. tip: 若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现（详情参考 enablePassiveEvent 文档）

代码示例

主要功能：拖动滑块

<!--wxml文件-->

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <movable-area>
        <movable-view x="0" y="0" direction="all">text</movable-view>
      </movable-area>
    </view>
  </view>
</view>

<!--wxss文件-->
movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100rpx;
  background: #1AAD19;
  color: #fff;
}

movable-area {
  height: 400rpx;
  width: 400rpx;
  margin: 50rpx;
  background-color: #ccc;
  overflow: hidden;
}

暂时都没有想到这个的应用场景

2.2、page-container

        页面容器。小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。个人觉得主要是为了避免太多冗余的界面以及界面切换。

属性说明

属性	类型	默认值	必填	说明
show	boolean	false	否	是否显示容器组件
duration	number	300	否	动画时长，单位毫秒
z-index	number	100	否	z-index 层级
overlay	boolean	true	否	是否显示遮罩层
position	string	bottom	否	弹出位置，可选值为 top bottom right center
round	boolean	false	否	是否显示圆角
close-on-slideDown	boolean	false	否	是否在下滑一段距离后关闭
overlay-style	string		否	自定义遮罩层样式
custom-style	string		否	自定义弹出层样式
bind:beforeenter	eventhandle		否	进入前触发
bind:enter	eventhandle		否	进入中触发
bind:afterenter	eventhandle		否	进入后触发
bind:beforeleave	eventhandle		否	离开前触发
bind:leave	eventhandle		否	离开中触发
bind:afterleave	eventhandle		否	离开后触发
bind:clickoverlay	eventhandle		否	点击遮罩层时触发

 注意：

1. 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器
2. wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面

代码示例

        主要功能：设置弹窗位置和关闭弹窗

<!--js文件-->
Page({
  data: {
    show: false,
    position: 'right',
  },
  onLoad(options) {
    
  },
  exit() {
    this.setData({show: false})
  },
  popup(e) {
    const position = e.currentTarget.dataset.position
    this.setData({
      position,
      show: true,
    })
  },
})

<!--wxml文件-->
<view class="title">弹出位置</view>
<view class="box">
  <button class="btn" bindtap="popup" data-position="right">右侧弹出</button>
  <button class="btn" bindtap="popup" data-position="top">顶部弹出</button>
  <button class="btn" bindtap="popup" data-position="bottom">底部弹出</button>
  <button class="btn" bindtap="popup" data-position="center">中央弹出</button>
</view>

<page-container show="{{show}}" position="{{position}}">
  <view class="detail-page">
    <view >
      <text>Hello World</text>
      <button type="primary" bindtap="exit">退出</button>
    </view>
  </view>
</page-container>

<!--wxss文件-->
page {
  background-color: #f7f8fa;
  color: #323232;
  width: 100%;
  height: 100%;
}

.box {
  margin: 0 12px;
}

.title {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}

.btn {
  display: block;
  width: 100%;
  margin: 10px 0;
  background-color: #fff;
}

.detail-page {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

 2.3、scroll-view

        可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)

属性	类型	默认值	说明
scroll-x	boolean	false	允许横向滚动
scroll-y	boolean	false	允许纵向滚动
upper-threshold	number/string	50	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	50	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	number/string		设置竖向滚动条位置
scroll-left	number/string		设置横向滚动条位置
show-scrollbar	boolean	true	滚动条显隐控制 (同时开启 enhanced 属性后生效)
binddragstart	eventhandle		滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }
binddragging	eventhandle		滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }
binddragend	eventhandle		滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity }
bindscrolltoupper	eventhandle		滚动到顶部/左边时触发
bindscrolltolower	eventhandle		滚动到底部/右边时触发
bindscroll	eventhandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

代码示例

主要功能：获取当前滚动条位置以及设置滚动条位置

<!--js文件-->
Page({
  onLoad(options) {
    var timer = setTimeout(()=>{ 
      wx.pageScrollTo({ 
          selector: "#CD"
      });
      clearTimeout(timer);
    },500)
  },
  onPageScroll:function(e){ // 获取滚动条当前位置
    console.log(e)
  },
})

<!--wxml文件-->

<view id="BJ" style="height: 300rpx;"> 北京 </view>
<view id="SH" style="height: 300rpx;"> 上海 </view>
<view id="SZ" style="height: 300rpx;"> 深圳 </view>
<view id="GZ" style="height: 300rpx;"> 广州 </view>
<view id="HZ" style="height: 300rpx;"> 杭州 </view>
<view id="CD" style="height: 300rpx;"> 成都 </view>

2.4、share-element

        共享元素是一种动画形式，类似于 flutter Hero动画，表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。视觉效果就是点击前的共同元素滑动到了新画面。使用时需在当前页放置 share-element 组件，同时在 page-container 容器中放置对应的 share-element 组件，对应关系通过属性值 key 映射。当设置 page-container 显示时，transform 属性为 true 的共享元素会产生动画。当前页面容器退出时，会产生返回动画

属性说明

属性	类型	默认值	必填	说明
key	string		是	映射标记
transform	boolean	false	否	是否进行动画
duration	number	300	否	动画时长，单位毫秒
easing-function	string	ease-out	否	css缓动函数

代码示例

<!--js文件-->
var Allcontacts = [
  { id: 1, name: 'Frank', img: 'frank.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 2, name: 'Susan', img: 'susan.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 3, name: 'Emma', img: 'emma.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 4, name: 'Scott', img: 'scott.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 5, name: 'Bob', img: 'bob.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 6, name: 'Olivia', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 7, name: 'Anne', img: 'anne.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 8, name: 'sunny', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }
]
Page({

  data: {
    contacts: Allcontacts,
    contact: Allcontacts[0],
    transformIdx: 0,
    position: 'center',
    duration: 300,
    show: false,
    overlay: false
  },
  showNext(e) {
    const idx = e.currentTarget.dataset.idx
    this.setData({
      show: true,
      contact: Allcontacts[idx],
      transformIdx: idx
    })
  },

  showPrev() {
    this.setData({
      show: false
    })
  },

  onBeforeEnter(res) {
    console.log(res)
  },
  onEnter(res) {
    console.log(res)
  },
  onAfterEnter(res) {
    console.log(res)
  },
  onBeforeLeave(res) {
    console.log(res)
  },
  onLeave(res) {
    console.log(res)
  },
  onAfterLeave(res) {
    console.log(res)
  },

  onLoad(options) {

  },

})

<!--wxml文件-->

<view>
	<view class="screen screen1">
		<block wx:for="{{contacts}}" wx:key="id" wx:for-item="contact">
			<view class="contact" bindtap="showNext" data-idx="{{index}}">
				<share-element duration="{{duration}}" class="name" key="name" transform="{{transformIdx === index}}">
					{{contact.name}}
				</share-element>
				<view class="list">
					<view>Phone: {{contact.phone}}</view>
					<view>Mobile: {{contact.mobile}}</view>
					<view>Email: {{contact.email}}</view>
				</view>
			</view>
		</block>
	</view>
</view>

<page-container
	show="{{show}}"
	overlay="{{overlay}}"
	close-on-slide-down
  duration="{{duration}}"
  position="{{position}}"
  bindbeforeenter="onBeforeEnter"
  bindenter="onEnter"
  bindafterenter="onAfterEnter"
  bindbeforeleave="onBeforeLeave"
  bindleave="onLeave"
  bindafterleave="onAfterLeave"
  bindclickoverlay="onClickOverlay"
>
	<view class="screen screen2">
		<view class="contact">
			<share-element class="name" key="name" duration="{{duration}}" transform>
				{{contact.name}}
			</share-element>
			<button class="screen2-button" bindtap="showPrev" hidden="{{!show}}" hover-class="none">Click Me</button>
		</view>
	</view>
</page-container>

<!--wxss文件-->
page {
  color: #333;
  background-color: #ddd;
  overflow: hidden;
}
button {
  border: 0 solid #0010ae;
  background-color: #1f2afe;
  color: #fff;
  font-size: 120%;
  padding: 8px 16px;
  outline-width: 0;
  -webkit-appearance: none;
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
}

.screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.contact {
  position: relative;
  padding: 16px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.avatar {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 0;
}

.name {
  height: 65px;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}

.list {
  padding-top: 8px;
  padding-left: 32px;
}

.screen1 {
  overflow-y: scroll;
  padding: 0;
}

.screen1 .contact {
  margin: 16px;
  height: auto;
  width: auto;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.screen2-button {
  display: block;
  margin: 24px auto;
}

.paragraph {
  -webkit-transition: transform ease-in-out 300ms;
  transition: transform ease-in-out 300ms;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.enter.paragraph {
  transform: none;
}

 2.5、swiper

2.5.1、swiper

        滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
snap-to-edge	boolean	false	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素
display-multiple-items	number	1	否	同时显示的滑块数量
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上

注意： 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。 

2.5.2、swiper-item

        仅可放置在swiper组件中，宽高自动设置为100%

属性	类型	默认值	必填	说明
item-id	string		否	该 swiper-item 的标识符
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息

 代码示例

主要功能：动画的播放效果，建议看微信官方文档-swiper在开发者工具的预览效果

<!--js文件-->
Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
  },
})


<!--wxml文件-->
<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper
        indicator-dots="{{true}}" autoplay="{{true}}" >
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
</view>


<!--wxss文件-->

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
.page-body{
  padding-top: 60rpx;
}
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 80rpx;
}
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.page-section-gap .page-section-title{
  padding-left: 0;
  padding-right: 0;
}

.demo-text-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1AAD19;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}

 2.6、view

        视图容器，最常用的，几乎是一直用，所以没什么好说的

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

如果需要使用滚动视图，请使用 scroll-view 

2.7、icon

图标组件。属性说明

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
color	string		否	icon的颜色，同 css 的color

代码示例

  <view class="icon-box">
    <icon class="icon-box-img" type="success" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">成功</view>
      <view class="icon-box-desc">用于表示操作顺利完成</view>
    </view>
  </view>

2.8、progress

        进度条。组件属性的长度单位默认为px。

属性	类型	默认值	必填	说明
percent	number		否	百分比0~100
show-info	boolean	false	否	在进度条右侧显示百分比
border-radius	number/string	0	否	圆角大小
font-size	number/string	16	否	右侧百分比字体大小
stroke-width	number/string	6	否	进度条线的宽度
color	string	#09BB07	否	进度条颜色（请使用activeColor）
activeColor	string	#09BB07	否	已选择的进度条的颜色
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色
active	boolean	false	否	进度条从左往右的动画
active-mode	string	backwards	否	backwards: 动画从头播；forwards：动画从上次结束点接着播
duration	number	30	否	进度增加1%所需毫秒数
bindactiveend	eventhandle		否	动画完成事件

代码示例

<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

2.9、text

<text> Hello World </text>

2.9、button

属性	类型	默认值	说明
size	string	default	按钮的大小 default：默认大小 mini：小尺寸
type	string	default	按钮的样式类型 primary：绿色 default：白色 warn：红色
plain	boolean	false	按钮是否镂空，背景色透明
disabled	boolean	false	是否禁用
loading	boolean	false	名称前是否带 loading 图标
form-type	string		用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
open-type	string		微信开放能力 contact：打开客服会话 share：触发用户转发 getPhoneNumber：获取用户手机号 getUserInfo：获取用户信息 launchApp：打开APP openSetting：打开授权设置页 feedback：打开“意见反馈”页面 chooseAvatar：获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息
lang	string	en	指定返回用户信息的语言， zh_CN 简体中文， zh_TW 繁体中文， en 英文

 代码示例

<button type="primary">Click Me</button>

2.10、checkbox

属性	类型	默认值	必填	说明
value	string		否	checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
disabled	boolean	false	否	是否禁用
checked	boolean	false	否	当前是否选中，可用来设置默认选中
color	string	#09BB07	否	checkbox的颜色，同 css 的color

代码示例

<label class="checkbox">
    <checkbox value="cb" checked="true"/>选中
</label>

<checkbox value="{{item.value}}" checked="{{item.checked}}"/>

2.11、editor

        富文本编辑器，可以对图片、文字进行编辑。编辑器内支持部分 HTML 标签和内联样式，不支持class和id

属性	类型	默认值	说明
read-only	boolean	false	设置编辑器为只读
placeholder	string		提示信息
show-img-size	boolean	false	点击图片时显示图片大小控件
show-img-toolbar	boolean	false	点击图片时显示工具栏控件
show-img-resize	boolean	false	点击图片时显示修改尺寸控件
bindready	eventhandle		编辑器初始化完成时触发
bindfocus	eventhandle		编辑器聚焦时触发，event.detail = {html, text, delta}
bindblur	eventhandle		编辑器失去焦点时触发，detail = {html, text, delta}
bindinput	eventhandle		编辑器内容改变时触发，detail = {html, text, delta}
bindstatuschange	eventhandle		通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式

2.12、 form

        将组件内的用户输入的switch input checkbox slider radio picker 提交。当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性	类型	默认值	说明
report-submit	boolean	false	是否返回 formId 用于发送模板消息
report-submit-timeout	number	0	等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId
bindsubmit	eventhandle		携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset	eventhandle		表单重置时会触发 reset 事件

2.13、input

        输入框。该组件是原生组件，使用时请注意相关限制

2.14、 keyboard-accessory

        设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图。视图最大高度为 200px

2.15、label

        用来改进表单组件的可用性。

        使用 for 属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch, input。

属性	类型	默认值	必填	说明
for	string		否	绑定控件的 id

2.16、picker

从底部弹起的滚动选择器

属性	类型	默认值	说明
header-text	string		选择器的标题，仅安卓可用
mode	string	selector	选择器类型 selector：普通选择器 multiSelector：多列选择器 time：时间选择器 date：日期选择器 region：省市区选择器
disabled	boolean	false	是否禁用
bindcancel	eventhandle		取消选择时触发

 2.17、radio

单选项目

属性	类型	默认值	说明
value	string		radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
checked	boolean	false	当前是否选中
disabled	boolean	false	是否禁用
color	string	#09BB07	radio的颜色，同 css 的color

2.18、switch

开关选择器。

属性	类型	默认值	说明
checked	boolean	false	是否选中
disabled	boolean	false	是否禁用
type	string	switch	样式，有效值：switch, checkbox
color	string	#04BE02	switch 的颜色，同 css 的 color
bindchange	eventhandle		点击导致 checked 改变时会触发 change 事件，event.detail={ value}

 我真的是晕倒了，感觉后面没有值得写的，只能熟悉的看一遍就算了