基本内容
1.icon（图标）
·type 解释：icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
·size 解释：icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
·color 解释：icon的颜色，同 css 的color（支持rbg及颜色名）
wxml：
<icontype="success"size="100rpx"></icon>（单选）已选择 <icontype="success_no_circle"size="100rpx"></icon>（多选）已选择 <icontype="info"size="100rpx"></icon>提示 <icontype="warn"size="100rpx"></icon>强力警告 <icontype="waiting"size="100rpx"></icon>等待 <icontype="cancel"size="100rpx"></icon>停止 <icontype="download"size="100rpx"></icon>下载 <icontype="search"size="100rpx"></icon>搜索图标 <icontype="clear"size="100rpx"></icon>关闭
2.progress（进度条）
常有的几个属性
·percent 解释：百分比0~100（percent="xxx"）xxx是输入的数字如：输入20，进度条会以20%的进度渲染
·show-info （默认值） 解释：在进度条右侧显示百分比
·border-radius 解释：圆角大小（与wxss样式属性一样）
·font-size（默认值：16）解释：右侧百分比字体大小（与wxss样式属性一样）
·stroke-width（默认值：6） 解释：进度条线的宽度
wxml：
<progresspercent="30"show-info="true"border-radius="20rpx"font-size="50rpx"stroke-width="20"></progress>
效果演示：（当然以后开发熟悉了以后，可以通过js中一些逻辑事件函数来控制动态）
3.text（文本组件）
解释：此组件只能存放及字母及数字
3.表单组件（常常与JavaScript结合完成逻辑事件）
1.button（按钮）
解释：此组件的样式与wxss中规定的样式一致，此组件可以通过绑定点击事件与JavaScript之间联系完成开发者想要的逻辑事件
举例：
wxml：
<view>智障是{{name}}</view><buttonbindtap="dianji">点我出现</button>
js：
// pages/shouye/shouye.jsPage({ /** * 页面的初始数据 */data: { name:'' }, dianji:function(){ this.setData({ name:'lqj' }) } })
效果显示：
2. checkbox（多选项目）
·checked（默认值） 解释：当前是否选中，可用来设置默认选中
3.checkbox-group（多项选择器，内部由多个checkbox组成。）
说明：当前我们只是演示静态的组件内容，以后会讲到他与JavaScript之间的通信（数据的传输）
wxml：
<checkbox-group><checkbox></checkbox><checkbox></checkbox><checkbox></checkbox><checkbox></checkbox></checkbox-group>
效果展示：
4.form（表单）
将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
他作为一个与JavaScript相结合使用的组件，我们之后会仔细的讲到！现在我们只知道这个概念就ok！
5.input（输入框）
·value （string字符串类型） 解释：输入框的初始内容
·type （string字符串类型） 解释：input 的类型、
type类型：
wxml：
<inputtype="number"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput1'placeholder="请输入bumber型"/><inputtype="digit"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput2'placeholder="请输入digit型"/><inputtype="idcard"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput3'placeholder="请输入idcard型"/><inputtype="text"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="请输text入型"/>
js：
dianjiinput1:function(e){ console.log(typeof(e.detail.value)) console.log(e) }, dianjiinput2:function(e){ console.log(typeof(e.detail.value)) }, dianjiinput3:function(e){ console.log(typeof(e.detail.value)) }, dianjiinput4:function(e){ console.log(typeof(e.detail.value)) },
效果展示：
confirm-type类型：
举例：
1.右下角按钮为“发送”
wxml：
<inputtype="text"confirm-type="send"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>
效果：
2.右下角按钮为“搜索”
wxml：
<inputtype="text"confirm-type="search"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>
3.右下角按钮为“下一步”
wxml：
<inputtype="text"confirm-type="next"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>
效果：
4.右下角按钮为“前往/开始”
wxml：
<inputtype="text"confirm-type="go"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>
5.右下角按钮为“完成”
wxml：
<inputtype="text"confirm-type="done"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>
