click me to scroll into view click me to scroll
（2）在js文件里设置颜色的数组，绑定to View和scroll Top 数据值，提供bindscrolltoupper、 bindscrolltolower、bindscroll、scroll-into-view、scroll-top事件函数，具体代码如下。
var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({
data: {
toView: 'red', scrollTop: 100
},
upper: function(e) { console.log(e)
},
lower: function(e) { console.log(e)
},
scroll: function(e) { console.log(e)
},
tap: function(e) {
for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) {
this.setData({ toView: order[i + 1]
})
break
}
}
},
tapMove: function(e) { this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
这样就可以实现纵向滚动了，可以滚动到指定区域，也可以滚动到指定的位置，同时滚动到顶部或底部会触发相应的事件，在滚动过程中也可以触发相应的事件。
2．横向滚动
在使用“今日头条”或“腾讯新闻”时，在新闻列表的上方都会有新闻频道供我们选择，可以向左滑动和向右滑动来查看相应类别的新闻，可以采用scroll-view来实现这些新闻频道的横向滚动。
今日头条新闻频道
在wxml文件里使用scroll-view进行布局，设置scroll-x="true"横向滚动，具体代码如下。
新闻频道横向滚动
推荐
视频热点本地社会娱乐科技汽车体育财经军事国际时尚游戏美文
这样就可以实现横向滚动了，可以向左滑动和向右滑动。
3.1.3 swiper滑块视图容器
swiper滑块视图容器用来在指定区域内切换显示内容，常用来制作海报轮播效果和页签内容切换效果，它的属性如表所示。
swiper属性
属性 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 current Number 0 当前所在页面的 index interval Number 5000 自动切换时间间隔 duration Number 500 滑动动画时长 circular Boolean false 是否采用衔接滑动 bindchange EventHandle current 改变时会触发 change 事件，event.detail = {current: current}
1．海报轮播效果海报轮播效果常用来展示商品图片信息或者广告信息，是很多网站或者App软件都会采用的一种布局方式，如图所示。
海报1 海报2
（1）在wxml文件里，采用swiper滑块视图容器组件进行海报轮播区域的布局，具体代码如下：
（2）在js文件里，提供海报轮播的图片，设置是否自动播放，提供轮播的时长等数据，通过数据绑定的方式渲染到页面上，具体代码如下。
Page({
data:{ indicatorDots:true, autoplay:true, interval:5000, duration:1000, imgUrls:[
]
}
})
设置autoplay等于true时就可以自动进行海报轮播，设置indicatorDots等于true，代表显示面板指示点，同时可以设置interval自动切换时长、duration滑动动画时长。
2．页签内容切换效果
swiper滑块视图容器除了可以用来实现海报轮播效果，还可以实现页签切换效果。页签切换效果常用于多种方式的登录或者多种类别的切换，如图所示。
页签切换效果
（1）进入到wxml文件里，进行账号密码登录和手机快捷登录的界面布局设计，具体代码如下。
账号密码登录
手机快捷登录
我是用来进行账号密码登录的区域
我是用来进行手机快捷登录的区域
（2）进入到wxss文件里，给页面文件添加样式，具体代码如下。
.loginTitle{
display: flex;
flex-direction: row; width: 100%;
}
.select{
font-size:12px; color: red; width: 50%;
text-align: center; height: 45px;
line-height: 45px;
border-bottom:5rpx solid red;
}
.default{
font-size:12px; margin: 0 auto; padding: 15px;
}
.hr{
border: 1px solid #cccccc; opacity: 0.2;
}
（3）进入到js文件里，提供窗口的宽度、高度、当前面板的索引值，提供页签切换函数，具体代码如下。
Page({
data:{
currentTab:0, winWidth:0, winHeight:0
},
onLoad:function(options){ var page = this; wx.getSystemInfo({
success: function(res) { console.log(res);
page.setData({winWidth:res.windowWidth}); page.setData({winHeight:res.windowHeight});
}
})
},
switchNav:function(e){ var page = this;
if(this.data.currentTab == e.target.dataset.current){ return false;
}else{
page.setData({currentTab:e.target.dataset.current});
}
}
})
这样就可以实现在两种登录状态之间切换的效果了。页签切换时，页签的标题呈现为选中的状态，同时对应的内容也随之进行切换。
3.1.4 movable-view可移动视图容器
movable-view是一个可移动视图容器，在页面中可以做拖曳滑动。在使用这个组件的时候，需要先定义可移动区域movable-area，然后定义直接子节点movable-view，否则不能移动。movable-area 必须设置 width和height属性，不设置默认为10px；movable-view 必须设置width和height属性，不设置默认为10px， movable-view 默认为绝对定位，top和left属性为0px。movable-view可移动视图容器的属性如表所示。
movable-view属性
属性 类型 默认值 说明 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的值会触发动画 y Number / String 定义y 轴方向的偏移，如果y 的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 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 bindchange
EventHandle
拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}， 其中source表示产生移动的原因，值可为touch（拖动）、touch-out- of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） bindscale EventHandle 缩放过程中触发的事件，event.detail = {scale: scale}
movable-view提供了两个特殊事件：htouchmove事件，指初次手指触摸后的移动为横向移动，如果 catch此事件，则意味着touchmove事件也被catch；vtouchmove事件，指初次手指触摸后的移动为纵向移动，如果catch此事件，则意味着touchmove事件也被catch。下面使用movable-view可移动视图容器组件来进行滑动，黄色区域代表可以移动的区域，红色方块代表可以移动的组件，如图所示。
可移动视图容器
（1）在wxml文件里，使用movable-area和movable-view视图容器组件进行布局，具体代码如下。
（2）在js文件里，提供拖动函数、缩放函数，通过数据绑定的方式渲染到页面上，具体代码如下。
Page({
data: {
x: 0,
y: 0
},
tap: function (e) { this.setData({
x: 30,
y: 30
});
},
onChange: function (e) { console.log(e.detail)
},
onScale: function (e) { console.log(e.detail)
}
})
3.1.5 cover-view覆盖原生组件的视图容器
cover-view、cover-image这两个是覆盖原生组件的视图容器。比如在使用地图组件时，地图组件本身的功能很有局限，但是想放置一些特殊的内容或图片，这时就需要使用覆盖地图组件的视图容器。
cover-view是指覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、 camera，只支持嵌套cover-view、cover-image。
cover-image是指覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view一样，支持嵌套 cover-view。
下面使用cover-view、cover-image覆盖原生组件的视图容器组件，在video视频播放组件上放置播放、暂停两个图片，同时放置一个时间内容显示区域，如图所示。
视频播放 覆盖视频播放组件
（1）在wxml文件里使用cover-view、cover-image覆盖原生组件的视图容器组件进行布局，具体代码如下。
0a0201000400" controls="{{false}}" event-model="bubble" style="width:100%">
00:00
（2）在wxss文件里添加样式，具体代码如下。
.controls {
position: relative; top: 50%; height: 50px;
margin-top: -25px; display: flex;
}
.play,.pause,.time { flex: 1;
height: 100%;
}
.time {
text-align: center;
background-color: rgba(0, 0, 0, .5); color: white;
line-height: 50px;
}
.img {
width: 40px; height: 40px; margin: 5px auto;
}
（3）在js文件里，提供视频播放、暂停函数，初始化视频播放组件，具体代码如下。
Page({
onReady() {
this.videoCtx = wx.createVideoContext('myVideo')
},
play() {
this.videoCtx.play()
},
pause() { this.videoCtx.pause()
}
})
3.2基础内容组件
基础内容组件包括icon图标组件、text文本组件、progree进度条组件、rich-text富文本组件。
3.2.1 icon图标
微信小程序提供了丰富的图标组件，这些图标组件应用于不同的场景，有成功、警告、提示、取消、下载等不同含义，如图3.10所示。
图 标
icon图标组件有3个属性：图标的类型type、图标的大小size和图标的颜色color，如表所示。
图标属性
属性 类型 默认值 说明 type String icon的类型，有效值有：success、success_no_circle、info、 warn、waiting、cancel、download、search、clear size Number 23 icon的大小，单位为px color Color icon的颜色，同css的color
如何绘制图标呢？（1）在wxml文件里，利用icon组件进行界面布局，具体代码如下。
（2）在js文件里，给图标的大小、颜色和类型提供数据，具体代码如下。
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'info_circle', 'cancel', 'search', 'clear'
]
}
})
3.2.2 text文本
text文本组件支持转义符"\\"，比如换行\\n、空格\。
下面我们来看转义符的使用，具体代码如下：
我爱北京\我爱中国
我爱北京\\n我爱中国
界面效果如图所示。
转义符效果
从图中可以看出，\具有空格功能，\\n具有换行功能，同时也可以看出text文本组件是放置在同一行里，这一点不同于view组件，每个view组件都是单独一行。
3.2.3 progress进度条
Progress进度条组件是一种提高用户体验度的组件，可以通过进度条看到完整视频的长度、当前播放的进度，这样让用户能合理地安排自己的时间，提高用户体验度。微信小程序也提供了progress进度条组件， 它的属性如表所示。
进度条属性
属性 类型 默认值 说明 percent Float 无 百分比为0～100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Number 6 进度条线的宽度，单位为px Color Color #09BB07 进度条颜色 active Boolean false 进度条从左往右的动画
示例代码如下：
界面效果如图所示。
进度条效果
3.2.4 rich-text富文本
rich-text富文本组件，可以在WXML页面文件显示一些富文本内容，比如显示HTML的一些元素内容。它有一个nodes节点列表属性，nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降。nodes支持两种节点，通过type来区分，分别是元素节点和文本节点，
它默认的是元素节点，即在富文本区域里显示的HTML节点。
1.元素节点：type= node
元素节点
属性 类型 默认值 说明 name 标签名 String 支持部分受信任的HTML节点 attrs 属性 Object 支持部分受信任的属性，遵循Pascal命名法 children 子节点列表 Array 结构和nodes一致
2.文本节点：type= text文本节点
属性 类型 默认值 说明 text 文本 String 支持entities
示例代码如下：
Page({
data: {
nodes: [{
name: 'div', attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{ type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
3.3丰富的表单组件
微信小程序提供了丰富的表单组件：button按钮组件、checkbox多项选择器组件、radio单项选择器组件、input单行输入框组件、textarea多行输入框组件、label改进表单可用性组件、picker滚动选择器组件、slider滑动选择器组件、switch开关选择器组件、form表单组件10种表单组件。
3.3.1 button按钮
button按钮组件提供3种类型按钮：基本类型按钮、默认类型按钮和警告类型按钮。同时提供两种大小形状的按钮：默认和mini两种大小按钮，如图所示。
按钮类型和大小
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
无
有效值为：submit、reset。用于 组件，单击分别会触发 submit、reset 事件 hover-class
String
button-hover
指定按钮按下去的样式类。当hover-class="none" 时，没有单击态效果 hover-start-time Number 50 按住后多久出现单击态，单位为毫秒 hover-stay-time Number 400 手指松开后单击态保留时间，单位为毫秒
从按钮属性中可以看出按钮可以设置不同大小、不同类型、是否镂空、是否禁用、按钮名称前是否带loading图标。针对form表单组件，按钮组件提供了提交表单和重置表单两个功能，具体代码如下所示。 default primary warn 点击设置以上按钮disabled属性点击设置以上按钮plain属性点击设置以上按钮loading属性var types = ['default', 'primary', 'warn'] var pageObject = {
data: {
defaultSize: 'default', primarySize: 'default', warnSize: 'default', disabled: false,
plain: false, loading: false
},
setDisabled: function(e) { this.setData({
disabled: !this.data.disabled
})
},
setPlain: function(e) { this.setData({
plain: !this.data.plain
})
},
setLoading: function(e) { this.setData({
loading: !this.data.loading
})
}
}
for (var i = 0; i < types.length; ++i) { (function(type) {
pageObject[type] = function(e) { var key = type + 'Size'
var changedData = {} changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default' this.setData(changedData)
}
})(types[i])
}
Page(pageObject)
界面效果如图所示。
按钮效果
3.3.2 checkbox多项选择器
checkbox多项选择器组件，也就是我们常说的复选框，它用来进行多项选择，它的属性如表所示。
多项选择器属性
属性 类型 默认值 说明 value String disabled Boolean False 是否禁用 checked Boolean False 当前是否选中，可用来设置默认选中 color Color checkbox的颜色，同css的color
checkbox-group是用来容纳多个checkbox多项选择器的容器，它有一个绑定事件bindchange，下面演示一下checkbox多项选择器的使用，以及如何获取选中的value值。
（1）在wxml文件里使用checkbox进行界面布局，具体代码如下所示。
（2）在js文件里，添加checkboxChange 事件函数，获取复选框选中的值，将其打印出来，具体代码如下所示。
Page({
checkboxChange:function(e){ console.log(e.detail.value)
}
})
界面效果如图所示。
复选框value值
从图中可以看出，被禁用的复选框是不能使用的，在checkbox-group上面绑定bindchange事件，每次勾选时，会把所有勾选的复选框的值以数组的形式存在detail里。
3.3.3 radio单项选择器
radio单项选择器是与checkbox多项选择器对立的一个组件，每次只能选中一个radio单项选择器，选项间是一种互斥关系，它的属性如表所示。
单项选择器属性
属性 类型 默认值 说明 value String change 事件会携带
disabled Boolean False 是否禁用 checked Boolean False 当前是否选中，可用来设置默认选中 color Color radio的颜色，同css的color
radio-group是用来容纳多个radio单项选择器的容器，它有一个绑定事件bindchange，下面演示一下radio单项选择器的使用。
（1）在wxml文件里使用radio单项选择器进行界面布局，具体代码如下所示。
（2）在js文件里，添加radioChange 事件函数，获取单项选中的值，将其打印出来，具体代码如下所示。
Page({
radioChange: function(e) { console.log('radio发生change事件，携带value值为：', e.detail.value)
}
})
界面效果如图所示。
单项选择器value值
从图中可以看出，被禁用的单项选择器是不能使用的，在radio-group上面绑定bindchange事件，每次勾选时，只能使一个选项呈现为选中状态，同时会把相应的值存在detail里。
3.3.4 input单行输入框
input单行输入框，用来输入单行文本内容，它的属性如表所示。
单行输入框属性
属性 类型 默认值 说明 Value String 输入框的初始内容 Type String Text input 的类型，有效值为text、number、idcard、digit Password Boolean False 是否是密码类型 Placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class String input-placeholder 指定 placeholder 的样式类 Disabled Boolean False 是否禁用 Maxlength Number 140 最大输入长度，设置为 -1 的时候不最大长度 cursor-spacing
Number
0
指定光标与键盘的距离，单位为px。取input距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 auto-focus Boolean False （即将废弃，请直接使用focus）自动聚焦，拉起键盘 Focus Boolean False 获取焦点 Bindinput
EventHandle
当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接返回一个字符串，将替换输 入框的内容 Bindfocus EventHandle 输入框聚焦时触发，event.detail = {value: value} Bindblur EventHandle 输入框失去焦点时触发，event.detail = {value: value} Bindconfirm EventHandle 单击完成按钮时触发，event.detail = {value: value}
示例代码如下：（1）在wxml文件里利用input单行输入框进行布局，具体代码如下所示。
使得输入框获取焦点
你输入的是：{{inputValue}}
（2）在js文件里给input单行输入框添加相应的事件并提供数据，具体代码如下所示。
Page({
data: {
focus: false, inputValue: ''
},
bindButtonTap: function() { this.setData({
focus: true
})
},
bindKeyInput: function(e) { this.setData({
inputValue: e.detail.value
})
},
bindReplaceInput: function(e) { var value = e.detail.value var pos = e.detail.cursor if(pos != -1){
//光标在中间
var left = e.detail.value.slice(0,pos)
//计算光标的位置
pos = left.replace(/11/g,'2').length
}
//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
return {
value: value.replace(/11/g,'2'), cursor: pos
}
//或者直接返回字符串,光标在最后边
//return value.replace(/11/g,'2'),
},
bindHideKeyboard: function(e) { if (e.detail.value === '123') {
//收起键盘wx.hideKeyboard()
}
}
})
界面效果如图所示。
input单行输入框
3.3.5 textarea多行输入框
textarea多行输入框是与input单行输入框对应的一个组件，它可以输入多行文本内容，它的属性如表所示。
多行输入框属性
属性 类型 默认值 说明 value String 输入框的内容 placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class String input-placeholder 指定 placeholder 的样式类 disabled Boolean False 是否禁用 maxlength Number 140 最大输入长度，设置为 -1 的时候不最大长度 cursor-spacing
Number
0
指定光标与键盘的距离，单位为px。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 auto-focus Boolean False （即将废弃，请直接使用 focus）自动聚焦，拉起键盘 focus Boolean False 获取焦点 auto-height Boolean False 是否自动增高，设置auto-height时，style.height不生效 fixed
Boolean
False
如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true bindlinechange
EventHandle
输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} bindinput
EventHandle
当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接返回一个字符串，将替换输入框的内容 bindfocus EventHandle 输入框聚焦时触发，event.detail = {value: value} bindblur EventHandle 输入框失去焦点时触发，event.detail = {value: value} bindconfirm EventHandle 单击完成按钮时触发，event.detail = {value: value}
示例代码如下所示：
3.3.6 label改进表单可用性
label组件是用来改进表单可用性的，目前可以用来改进的组件有：
1．label组件没有定义for属性
label组件没有定义for属性时，在label内包含
（1）在wxml文件里利用label组件布局，把第一个组件隐藏起来，具体代码如下所示。
我是button按钮我是label组件内的内容
（2）在js文件里添加clickBtn、checkboxChange、radioChange 3个事件函数，分别打印不同的信息，具体代码如下所示。
Page({
clickBtn:function(){ console.log("单击了按钮组件");
},
checkboxChange:function(){ console.log("单击了多项选择器组件");
},
radioChange:function(){ console.log("单击了单选选择器组件");
}
})
（3）在wxml界面里可以看到
没有定义for属性
从这里可以看出，label组件内有多个组件时，会触发第一个组件。
2．label组件定义for属性
label组件定义for属性后，它会根据for属性的值找到与组件id一样的值，然后触发这个组件的相应事件。
下面演示一下它的使用：
（1）在wxml文件里利用label组件布局，把第一个组件隐藏起来，给label定义for等于man，让它找到id值等于man组件，然后触发该组件的事件，具体代码如下所示。
我是button按钮我是label组件内的内容
（2）在js文件里添加clickBtn、checkboxChange、radioChange 3个事件函数，分别打印不同的信息，具体代码如下所示。
Page({
clickBtn:function(){ console.log("单击了按钮组件");
},
checkboxChange:function(){ console.log("单击了多项选择器组件");
},
radioChange:function(){ console.log("单击了单选选择器组件");
}
})
（3）在wxml界面里可以看到
定义for属性
3.3.7 picker滚动选择器
picker滚动选择器，支持3种滚动选择器：普通选择器、时间选择器、日期选择器。默认的是普通选择器，如图所示。
普通选择器 时间选择器 日期选择器
这3种选择器是通过mode来区分的，普通选择器mode = selector，时间选择器mode = time，日期选择器mode = date，每种类型选择器的属性不同。
1．普通选择器：mode = selector
普通选择器属性
属性 类型 默认值 说明 Range Array / Object Array [] mode为 selector 时，range 有效 range-key
String
当 range 是一个 Object Array 时，通过 range-key 来指定Object 中 key 的值作为选择器显示内容
Value Numbe 0 value 的值表示选择了 range 中的第几个（下标从 0 开始） Bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value} disabled Boolean false 是否禁用
示例代码如下：地区选择器
当前选择：{{array[index]}}
Page({
data: {
array: ['美国', '中国', '巴西', '日本'], objectArray: [
{
id: 0, name: '美国'
},
{
id: 1, name: '中国'
},
{
id: 2, name: '巴西'
},
{
id: 3, name: '日本'
}
],
index: 0
},
bindPickerChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({
index: e.detail.value
})
}
})
界面效果如图所示。
普通选择器
2．时间选择器：mode = time
时间选择器属性
属性 类型 默认值 说明 value String 表示选中的时间，格式为"hh:mm" start String 表示有效时间范围的开始，字符串格式为"hh:mm" end String 表示有效时间范围的结束，字符串格式为"hh:mm" bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value} disabled Boolean False 是否禁用
示例代码如下：时间选择器
当前选择: {{time}}
Page({
data: {
time: '12:01'
},
bindTimeChange: function(e) { this.setData({
time: e.detail.value
})
}
})
界面效果如图所示。
时间选择器
3．日期选择器：mode = date
日期选择器属性
属性 类型 默认值 说明 value String 0 表示选中的日期，格式为"YYYY-MM-DD" start String 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" end String 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" fields String Day 有效值为year、month、day，表示选择器的粒度 bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value} disabled Boolean False 是否禁用
示例代码如下：日期选择器
当前选择: {{date}}
Page({
data: {
date: '2016-09-01'
},
bindDateChange: function(e) { this.setData({
date: e.detail.value
})
}
})
界面效果如图所示。
日期选择器
4．picker-view嵌入页面滚动选择器
除了普通选择器、时间选择器、日期选择器3种滚动选择器之外，还有一种嵌入页面的滚动选择器，它使用picker-view组件在页面里的布局，如图所示。
嵌入页面滚动选择器
picker-view嵌入页面滚动选择器组件里面只能显示
嵌入页面滚动选择器属性
属性 类型 默认值 说明 Value
Number
Array
数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项 indicator-style String 设置选择器中间选中框的样式 bindchange
EventHandle
当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
示例代码如下所示：{{year}}年{{month}}月{{day}}日
{{item}}年
{{item}}月
{{item}}日
const date = new Date() const years = []
const months = [] const days = []
for (let i = 1990; i <= date.getFullYear(); i++) { years.push(i)
}
for (let i = 1 ; i <= 12; i++) { months.push(i)
}
for (let i = 1 ; i <= 31; i++) { days.push(i)
}
Page({
data: {
years: years,
year: date.getFullYear(), months: months, month: 2,
days: days, day: 2,
year: date.getFullYear(), value: [9999, 1, 1],
},
bindChange: function(e) { const val = e.detail.value this.setData({
year: this.data.years[val[0]], month: this.data.months[val[1]], day: this.data.days[val[2]]
})
}
})
3.3.8 slider滑动选择器
slider滑动选择器组件，经常用于控制声音的大小、屏幕的亮度等场景，它可以设置滑动步长、显示当前值以及设置最小值、最大值。
滑动选择器
slider滑动选择器组件的属性如表所示。
slider滑动选择器属性
属性 类型 默认值 说明 Min Number 0 最小值 Max Number 100 最大值 Step Number 1 步长，取值必须大于 0，并且可被(max - min)整除 disabled Boolean False 是否禁用 value Number 0 当前取值 color Color #e9e9e9 背景条的颜色 selected-color Color #1aad19 已选择的颜色 show-value Boolean False 是否显示当前 value bindchange EventHandle 完成一次拖动后触发的事件，event.detail = {value: value}
示例代码如下所示：设置step
显示当前value
设置最小/最大值
设置颜色
禁用
界面效果如图所示。
滑动选择器使用
3.3.9 switch开关选择器
switch开关选择器应用得十分普遍，它有两个状态：开和关。在很多场景都会用到开关这个功能，比如微信设置里的新消息提醒界面，它通过开关来设置是否接收消息、是否显示消息、是否有声音、是否振动等功能。
微信新消息提醒设置
switch开关选择器的属性可以设置为是否选中、开关类型、绑定事件和颜色，如表所示。
switch开关选择器属性
属性 类型 默认值 说明 checked Boolean False 是否选中 type String Switch 样式，有效值为：switch, checkbox bindchange EventHandle checked 改变时触发 change 事件，event.detail={ value:checked} color Color switch 的颜色，同 css 的 color
示例代码如下所示：
接收新消息通知
通知显示消息详情
声音
振动
界面效果如图所示。
开关选择器应用
3.3.10 form表单
form表单组件将表单里组件的值提交给j s文件进行处理，可以提交
form表单属性
属性 类型 默认值 说明 report-submit Boolean 是否返回 formId 用于发送模板消息 bindsubmit
EventHandle
携带 form 中的数据触发 submit 事件，event.detail = {value :{'name': 'value'} , formId: ''}
bindreset EventHandle 表单重置时会触发 reset 事件
示例代码如下所示：
Page({
formSubmit: function(e) { console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function() { console.log('form发生了reset事件')
}
})
界面效果如图所示。
未填写表单 填写表单
单击Reset按钮可以重置表单，单击Submit按钮组件，就可以把表单数据提交到js文件里进行处理，提交数据如图所示。
表单提交数据
3.4导航组件
微信小程序可以在页面中设置导航，可以使用navigator页面链接组件，也可以在js文件里设置导航进行页面跳转，同时可以设置导航条标题和显示动画效果。
3.4.1 navigator页面链接组件
navigator页面链接组件用来在WXML页面中实现跳转，它有3种类型：第1种是保留当前页跳转，跳转后可以返回当前页，它与wx.navigateTo跳转效果是一样的；第2种是关闭当前页跳转，无法返回当前页，它与wx.redirectTo跳转效果是一样的；第3种是跳转到底部标签导航指定的页面，它与wx.switchTab跳转效果是一样的。navigator页面链接组件的这些跳转效果都是通过open-type属性来控制的，具体属性如表所示。
navigato页面链接属性
属性 类型 默认值 说明 url String 应用内的跳转链接 redirect
Boolean
False
打开方式为页面重定向，对应 wx.redirectTo（将被废弃，推荐使用open-type） open-type
String
Navigate
可选值'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
hover-class String navigator-hover 指定单击时的样式类，当hover-class="none"时，没有单击态效果 hover-start-time Number 50 按住后多久出现单击态，单位为毫秒 hover-stay-time Number 600 手指松开后单击态保留时间，单位为毫秒
下面来演示一下open-type不同导航类型的跳转效果。（1）新建一个navigator项目，进入到app.json文件中，在pages属性里设置页面路径"pages/index/ index""pages/navigator/navigator""pages/redirect/redirect"，具体代码如下所示。
{
"pages":[ "pages/index/index
"pages/navigator/navigator", "pages/redirect/redirect"
],
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": " 导 航 ", "navigationBarTextStyle":"black"
},
}
（2）进入到pages/index/index.wxml文件里，设置导航的3种跳转方式：保留当前页跳转、关闭当前页跳转、跳转到tabBar页面，具体代码如下所示。
wx.navigateTo保留当前页跳转wx.redirectTo关闭当前页跳转wx. switchTab跳转到tabBar页面
（3）进入到pages/navigator/navigator.wxml文件里，进行界面布局，具体代码如下所示。
保留当前页进行跳转，单击左上角可以返回到当前页
（4）进入到pages/redirect/redirect.wxml文件里，进行界面布局，具体代码如下所示。
关闭当前页进行跳转，跳转后无法返回到当前页
（5）wx.navigateTo保留当前页跳转、wx.redirectTo关闭当前页跳转这两种方式可以正常跳转，但是 wx.switchTab跳转到tabBar页面这种方式是无法正常跳转的，它需要在app.json文件的tabBar属性里设置底部标签导航，具体代码如下所示。
{
"pages":[ "pages/index/index
"pages/navigator/navigator", "pages/redirect/redirect"
],
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": " 导 航 ", "navigationBarTextStyle":"black"
},
"tabBar": { "selectedColor": "red", "list": [{
"pagePath": "pages/index/index", "text": "首页
"iconPath": "iconPath", "selectedIconPath": "selectedIconPath"
},{
"pagePath": "pages/redirect/redirect", "text": "当前页打开导航
"iconPath": "iconPath", "selectedIconPath": "selectedIconPath"
}]
}
}
（6）使用wx.switchTab跳转到tabBar页面这种方式可以正常跳转到指定的底部标签导航页面里，但是 wx.navigateTo保留当前页跳转、wx.redirectTo关闭当前页跳转这两种方式无法跳转，这是因为在app.json中配置的tabBar属性里设置了底部标签导航。
（7）navigator页面链接组件设置的跳转路径，如果带参数，像url="../navigator/navigator?title= navigator"，获取title的值，可以在跳转页面里js文件的onLoad函数里获得，具体代码如下所示。
Page({
data:{}, onLoad:function(options){
console.log("title="+options);
}
})
3.4.2 wx.navigateTo保留当前页跳转
wx.navigateTo保留当前页面跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面，具体属性如表所示。
wx.navigateTo属性
属性 类型 是否必填 说明 url
String
是
需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key= value&key2=value2' success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
（1）进入到pages/index/index.wxml文件里，添加一个跳转按钮，保留当前页进行跳转，具体代码如下所示。wx.navigateTo保留当前页跳转wx.redirectTo关闭当前页跳转wx. switchTab跳转到tabBar页面保留当前页跳转
（2）进入到pages/index/index.js文件里，添加一个navigateBtn事件函数，保留当前页跳转到pages/ navigator/navigator.wxml页面里，具体代码如下所示。
Page({
navigateBtn:function(){ wx.navigateTo({
url: '../navigator/navigator', success: function(res){
console.log(res);
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})
3.4.3 wx.redirectTo关闭当前页跳转
wx.redirectTo关闭当前页面，跳转到应用内的某个页面，具体属性如表所示。
wx.redirectTo属性
属性 类型 是否必填 说明 url
String
是
需要跳转的应用内非 tab Bar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如'path?key=value&key2=value2' success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
（1）进入到pages/index/index.wxml文件里，添加一个跳转按钮，关闭当前页进行跳转，具体代码如下所示。wx.navigateTo保留当前页跳转wx.redirectTo关闭当前页跳转wx. switchTab跳转到tabBar页面保留当前页跳转关闭当前页跳转
（2）进入到pages/index/index.js文件里，添加一个redirectBtn事件函数，保留当前页跳转到pages/ navigator/navigator.wxml页面里，具体代码如下所示。
Page({
navigateBtn:function(){ wx.navigateTo({
url: '../navigator/navigator', success: function(res){
console.log(res);
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
redirectBtn:function(){ wx.redirectTo({
url: '../navigator/navigator', success: function(res){
console.log(res);
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})
3.4.4跳转到tabBar页面
wx.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，具体属性如表所示。
wx.switchTab属性
属性 类型 是否必填 说明 url String 是
需要跳转的 tabBar 页面的路径（需在 App.json 的 tabBar 字段定义的页面），路径后不能带参数 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
（1）进入到pages/index/index.wxml文件里，添加一个跳转按钮，跳转到tabBar页面，具体代码如下所示。wx.navigateTo保留当前页跳转wx.redirectTo关闭当前页跳转 wx.switchTab跳转到tabBar页面保留当前页跳转关闭当前页跳转跳转到tabBar页面
（2）进入到pages/index/index.js文件里，添加一个navigateBtn事件函数，保留当前页跳转到pages/ redirect/redirect.wxml页面里，具体代码如下所示。
Page({
navigateBtn:function(){ wx.navigateTo({
url: '../navigator/navigator', success: function(res){
console.log(res);
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
redirectBtn:function(){ wx.redirectTo({
url: '../navigator/navigator', success: function(res){
console.log(res);
},
fail: function() {
// complete
}
})
}
})
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabBar 页面，只能用 wx.switchTab 跳转到 tabBar 页面。
3.4.5 wx.navigateBack返回上一页
wx.navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()获取当前的页面栈，决定需要返回几层。具体属性如表所示。
wx.navigateBack属性
属性 类型 是否必填 说明 delta Number 1 返回的页面数，如果 delta 大于现有页面数，则返回到首页
（1）进入到pages/navigator/navigator.wxml文件里，添加一个返回按钮，单击返回按钮，可以返回到上一级页面，具体代码如下所示。保留当前页进行跳转，单击左上角可以返回到当前页
返回上一页（2）进入到pages/navigator/navigator.js文件里，添加backBtn事件返回函数，具体代码如下所示。
// fail
},
complete: function() {
// complete
}
})
},
switchBtn:function(){ wx.switchTab({
url: '../redirect/redirect', success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})
（3）在pages/index/index.wxml文件里，单击保留当前页跳转按钮，可以进行页面跳转，在跳转的页面里单击返回上一页按钮，可以返回到上一级页面，如图所示。
Page({
data:{}, onLoad:function(options){
console.log("title="+options);
},
backBtn:function(){ wx.navigateBack({
delta: 1
})
}
})
index.wxml 页面 navigator.wxml页面
3.4.6设置导航条
wx.setNavigationBarTitle(OBJECT)动态设置当前页面的标题。具体属性如表所示。
wx.setNavigationBarTitle(OBJECT)属性
属性 类型 是否必填 说明 title String 是 页面标题 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
（1）进入到pages/navigator/navigator.js文件里，对页面窗口标题重新设计，具体代码如下所示。Page({
data:{}, onLoad:function(options){
console.log("title="+options);
wx.setNavigationBarTitle({ title: '新页面'
})
},
backBtn:function(){ wx.navigateBack({
delta: 1
})
}
})
（2）在pages/index/index.wxml文件里，单击保留当前页跳转按钮，可以进行页面跳转，跳转后标题变为新页面，如图所示。
index.wxml 页面 navigator.wxml页面
（3）在pages/navigator/navigator.js文件里，如果在当前页面显示导航条加载动画，可以使用wx.show NavigationBarLoading()函数，具体代码如下所示。
Page({
data:{}, onLoad:function(options){
console.log("title="+options); wx.setNavigationBarTitle({
title: '新页面'
});
wx.showNavigationBarLoading();
},
backBtn:function(){ wx.navigateBack({
delta: 1
})
}
})
界面效果如图所示。
导航加载效果
（4）在当前页面显示导航条加载动画，可以使用wx.showNavigationBarLoading()函数，如果想隐藏导航条加载动画，可以使用wx.hideNavigationBarLoading()函数。
3.5媒体组件
媒体组件有audio音频组件、image图片组件、video视频组件，audio音频组件用来播放音乐，image图片组件用来显示图片，video视频组件用来播放视频。
3.5.1 audio音频
audio音频组件需要有唯一的id，根据id使用wx.createAudioContext('myAudio')创建音频播放的环境， src属性是音频播放的资源路径，poster属性是音频的播放图片，name属性为音频名称，绑定播放、暂停等事件，具体属性如表所示。
audio音频属性
属性 类型 默认值 说明 id String video 组件的唯一标识符 src String 要播放音频的资源地址 loop Boolean False 是否循环播放 controls Boolean True 是否显示默认控件 poster
String
默认控件上的音频封面的图片资源地址，如果 controls 属性值为false，则设置 poster 无效
name
String
未知音频
默认控件上的音频名称，如果 controls 属性值为 false，则设置 name无效
author
String
未知作者
默认控件上的作者名字，如果 controls 属性值为 false，则设置 author无效
binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code} bindplay EventHandle 当开始/继续播放时触发play事件 bindpause EventHandle 当暂停播放时触发 pause 事件 bindtimeupdate
EventHandle
当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} bindended EventHandle 当播放到末尾时触发 ended 事件
MediaError.code错误码如表所示。返回错误码
返回错误码 说明 MEDIA_ERR_ABORTED 获取资源被用户禁止 MEDIA_ERR_NETWORD 网络错误 MEDIA_ERR_DECODE 解码错误 MEDIA_ERR_SRC_NOT_SUPPOERTED 不合适资源
示例代码如下所示：
播放暂停设置当前播放时间为14秒回到开头代码说明如图所示。
audio.wxml代码说明
// audio.js
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
poster: / name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e 7&uin=3467220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C
601481D36E62053BF8DFEAF74C0A5CCFADD71160CAF3E6A&fromtag=46',
},
audioPlay: function () { this.audioCtx.play()
},
audioPause: function () { this.audioCtx.pause()
},
audio14: function () { this.audioCtx.seek(14)
},
audioStart: function () { this.audioCtx.seek(0)
}
})
代码说明如图所示。
audio.js代码说明
界面效果如图所示。
音频播放界面效果
3.5.2 image图片
image图片组件的属性如表所示。它有两类展现模式：一类是缩放模式，在缩放模式里包括4种方式；另一类是裁剪模式，在裁剪模式里包括9种方式。
image图片属性
属性 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片缩放、裁剪的模式 binderror HandleEvent 当错误发生时，发布到AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
bindload HandleEvent 当图片载入完毕时，发布到AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}
通过mode属性来设置4种缩放模式，如表所示。4种缩放模式
模式 说明 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 widthFix 宽度不变，高度自动变化，保持原图宽高比不变
通过mode属性来设置9种裁剪模式，如表所示。9种裁剪模式
模式 说明 top 不缩放图片，只显示图片的顶部区域 bottom 不缩放图片，只显示图片的底部区域 center 不缩放图片，只显示图片的中间区域 left 不缩放图片，只显示图片的左边区域 right 不缩放图片，只显示图片的右边区域 top left 不缩放图片，只显示图片的左上边区域 top right 不缩放图片，只显示图片的右上边区域 bottom left 不缩放图片，只显示图片的左下边区域 bottom right 不缩放图片，只显示图片的右下边区域
示例代码如下所示：image图片
{{item.text}}
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top：不缩放图片，只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom：不缩放图片，只显示图片的底部区域'
}, {
mode: 'center',
text: 'center：不缩放图片，只显示图片的中间区域'
}, {
mode: 'left',
text: 'left：不缩放图片，只显示图片的左边区域'
}, {
mode: 'right',
text: 'right：不缩放图片，只显示图片的右边区域'
}, {
mode: 'top left',
text: 'top left：不缩放图片，只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right：不缩放图片，只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left：不缩放图片，只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right：不缩放图片，只显示图片的右下边区域'
}],
},
imageError: function(e) { console.log('image3发生error事件，携带值为', e.detail.errMsg)
}
})
图片效果如图所示。
原 图
scaleToFill缩放模式 aspectFit缩放模式 aspectFill缩放模式
top裁剪模式 bottom裁剪模式 center裁剪模式
left裁剪模式 right裁剪模式 top left裁剪模式
top right裁剪模式 bottom left裁剪模式 bottom right裁剪模式
3.5.3 video视频
video视频组件是用来播放视频的组件，这个组件可以控制是否显示默认播放控件（播放/暂停按钮、播放进度、时间），还可以发送弹幕信息等，video组件默认宽度为300px、高度为225px，设置宽高需要通过 wxss设置width和height，具体属性如表所示。
video视频属性
属性 类型 默认值 说明 src String 要播放视频的资源地址 controls Boolean True 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） danmu-list Object Array 弹幕列表 danmu-btn Boolean False 是否显示弹幕按钮，只在初始化时有效，不能动态变更 enable-danmu Boolean False 是否展示弹幕，只在初始化时有效，不能动态变更 autoplay Boolean False 是否自动播放 bindplay EventHandle 当开始/继续播放时触发play事件 bindpause EventHandle 当暂停播放时触发pause事件 bindended EventHandle 当播放到末尾时触发ended事件 bindtimeupdate
EventHandle
播放进度变化时触发，event.detail = {currentTime: '当前播放时间'} 。触发频率应该在 250ms 一次 objectFit
String
Contain
当视频大小与video容器大小不一致时，视频的表现形式。contain：包含。fill：填充。cover：覆盖
示例代码如下所示：c020*********a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls>
获取视频
发送弹幕
function getRandomColor () { let rgb = []
for (let i = 0 ; i < 3; ++i){
let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '', data: {
src: '', danmuList: [
{
text: '第 1s 出现的弹幕', color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕', color: '#ff00ff',
time: 3
}]
},
bindInputBlur: function(e) { this.inputValue = e.detail.value
},
bindButtonTap: function() { var that = this wx.chooseVideo({
sourceType: ['album', 'camera'], maxDuration: 60,
camera: ['front','back'], success: function(res) {
that.setData({
src: res.tempFilePath
})
}
})
},
bindSendDanmu: function () { this.videoContext.sendDanmu({
text: this.inputValue, color: getRandomColor()
})
}
})
界面效果如图所示。
视频播放界面
3.5.4 camera相机
camera相机组件在使用的时候需要用户授权scope.camera，它是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级，可使用 cover-view、cover-image覆盖在上面，同一页面只能插入一个 camera 组件，不能在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。camera相机组件的属性如表所示。
camera相机组件属性
属性 类型 默认值 说明 device-position String back 前置或后置，值为front、back flash String Auto 闪光灯，值为auto、on、off bindstop EventHandle 摄像头在非正常终止时触发，如退出后台等情况 binderror EventHandle 用户不允许使用摄像头时触发
示例代码如下所示：
拍照预览
Page({
takePhoto() {
const ctx = wx.createCameraContext() ctx.takePhoto({
quality: 'high', success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) { console.log(e.detail)
}
})
界面效果如图所示。
拍照前 拍照后
3.5.5 live-player实时音视频播放
live-player实时音视频播放组件的使用是针对特定类目开放的，需要先通过类目审核，然后在小程序管理后台“设置”-“接口设置”中自助开通该组件权限。现在支持的类目有：社交（直播）、教育（在线教育）、医疗（互联网医院、公立医院）、政务民生（所有二级类目）、金融（基金、信托、保险、银行、证券/期货、非金融机构自营小额贷款、征信业务、消费金融）。live-player实时音视频播放组件的属性如表所示。
live-player实时音视频播放组件属性
属性 类型 默认值 说明 src String 音视频地址。目前仅支持 flv、rtmp 格式 mode String live live（直播），RTC（实时通话） autoplay Boolean False 自动播放 muted Boolean False 是否静音 orientation String vertical 画面方向，可选值有 vertical、horizontal object-fit String contain 填充模式，可选值有 contain、fillCrop background-mute Boolean False 进入后台时是否静音（已废弃，默认退台静音） min-cache Number 1 最小缓冲区，单位s max-cache Number 3 最大缓冲区，单位s bindstatechange EventHandle 播放状态变化事件，detail = {code} bindfullscreenchange EventHandle 全屏变化事件，detail = {direction, fullScreen} bindnetstatus EventHandle 网络状态通知，detail = {info}
示例代码如下所示：
Page({
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
}
})
3.5.6 live-pusher实时音视频录制
live-pusher实时音视频录制组件的使用需要取得用户授权scope.camera、scope.record，它是针对特定类目开放的，需要先通过类目审核，然后在小程序管理后台“设置”-“接口设置”中自助开通该组件权限。现在支持的类目有：社交（直播）、教育（在线教育）、医疗（互联网医院、公立医院）、政务民生（所有二级类目）、金融（基金、信托、保险、银行、证券/期货、非金融机构自营小额贷款、征信业务、消费金融）。live-pusher实时音视频录制组件的属性如表所示。
live-pusher实时音视频录制组件属性
属性 类型 默认值 说明 url String Back 推流地址。目前仅支持 flv、rtmp 格式 mode String RTCSD（标清）、HD（高清）、FHD（超清）、RTC（实时通话） autopush Boolean False 自动推流 muted Boolean False 是否静音 enable-camera Boolean True 开启摄像头 auto-focus Boolean True 自动聚集 orientation String vertical vertical，horizontal beauty Number 0 美颜 whiteness Number 0 美白 aspect String 9:16 宽高比，可选值有3:4、9:16 min-bitrate Number 200 最小码率 max-bitrate Number 1000 最大码率 waiting-image String 进入后台时推流的等待画面 waiting-image-hash String 等待画面资源的MD5值 background-mute Boolean False 进入后台时是否静音 bindstatechange EventHandle 状态变化事件，detail = {code} bindnetstatus EventHandle 网络状态通知，detail = {info} binderror EventHandle 渲染错误事件，detail = {errMsg, errCode}
示例代码如下所示：
Page({
statechange(e) {
console.log('live-pusher code:', e.detail.code)
}
})
3.6地图组件
map地图组件用来开发与地图有关的应用，如地图导航、打车软件、京东商城的订单轨迹等都会用到地图组件，在地图上可以标记覆盖物以及指定一系列的坐标位置。京东的仓库和客户的收货地址，如图所示。
京东订单轨迹
map地图组件具体属性如表所示。
map地图属性
属性 类型 默认值 说明 longitude Number 中心经度 latitude Number 中心纬度 scale Number 16 缩放级别，取值范围为5～18 markers Array 标记点 covers Array 即将移除，请使用 markers autoplay Boolean 是否自动播放 polyline Array 路线 circles Array 圆 controls Array 控件 include-points Array 缩放视野以包含所有给定的坐标点 show-location Boolean 显示带有方向的当前定位点 bindmarkertap EventHandle 单击标记点时触发 bindcontroltap EventHandle 单击控件时触发 bindregionchange EventHandle 视野发生变化时触发 bindtap EventHandle 单击地图时触发
markers标记点用于在地图上显示标记的位置，如表所示。markers地图标记属性
属性 说明 类型 是否必填 备注 id 标记点id Number 否 marker单击事件回调会返回此id latitude 纬度 Number 是 浮点数，范围为-90～90 longitude 经度 Number 是 浮点数，范围为-180～180 title 标注点名 String 否 iconPath
显示的图标
String
是
项目目录下的图片路径，支持相对路径写法，以'/' 开头则表示相对小程序根目录 rotate 旋转角度 Number 否 顺时针旋转的角度，范围为0～360，默认为 0
alpha 标注的透明度 Number 否 默认为1，无透明 width 标注图标宽度 Number 否 默认为图片实际宽度 height 标注图标高度 Number 否 默认为图片实际高度
polyline指定一系列坐标点，从数组第一项连线至最后一项，如表所示。polyline坐标点属性
属性 说明 类型 是否必填 备注 points 经纬度数组 Array 是 [{latitude: 0, longitude: 0}] color 线的颜色
String 否
8位十六进制表示，后两位表示alpha值，如： #000000AA width 线的宽度 Number 否 dottedLine 是否虚线 Boolean 否 默认false
circles在地图上显示圆，如表所示。circles显示圆属性
属性 说明 类型 是否必填 备注 latitude 纬度 Number 是 浮点数，范围为-90～90 longitude 经度 Number 是 浮点数，范围为-180～180 color
描边的颜色
String
否
8位十六进制表示，后两位表示alpha值，如： #000000AA fillColor
填充颜色
String
否
8位十六进制表示，后两位表示alpha值，如： #000000AA radius 半径 Number 是 strokeWidth 描边的宽度 Number 否
controls在地图上显示控件，控件不随着地图移动，如表所示。controls显示控件属性
属性 说明 类型 是否必填 备注 id 控件id Number 否 在控件单击事件回调会返回此id position 控件在地图的位置 Object 是 控件相对地图位置 iconPath 显示的图标
String 是
项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录
clickable 是否可单击 Boolean 否 默认不可单击
position控件的位置是相对地图的位置，如表所示。position控件位置属性
属性 说明 类型 是否必填 备注 left 距离地图的左边界多远 Number 否 默认为0 top 距离地图的上边界多远 Number 否 默认为0 width 控件宽度 Number 否 默认为图片宽度 height 控件高度 Number 否 默认为图片高度
示例代码如下所示。
// map.js Page({
data: {
markers: [{
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{ points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}], color:"#FF0000DD
width: 2, dottedLine: true
}],
controls: [{ id: 1,
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
regionchange(e) { console.log(e.type)
},
markertap(e) { console.log(e.markerId)
},
controltap(e) { console.log(e.controlId)
}
})
界面效果如图所示。
地图界面效果
3.7画布组件
canvas画布组件用来绘制正方形、圆形或者一些其他的形状，如图所示。
canvas画布组件绘制的图形
canvas画布组件默认宽度为300px、高度为225px，在使用的时候需要有唯一的标识，它有手指触摸动作开始、手指触摸后移动、手指触摸动作结束、手指触摸动作被打断等事件，具体属性如表所示。
canvas画布属性
属性 类型 默认值 说明 canvas-id String canvas 组件的唯一标识符 disable-scroll Boolean False 当在 canvas 中移动时，禁止屏幕滚动以及下拉刷新 bindtouchstart EventHandle 手指触摸动作开始 bindtouchmove EventHandle 手指触摸后移动 bindtouchend EventHandle 手指触摸动作结束 bindtouchcancel EventHandle 手指触摸动作被打断，如来电提醒、弹窗 bindlongtap
EventHandle
手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}
示例代码如下所示。
// canvas.js Page({
canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg)
},
onReady: function (e) {
// 使用 wx.createContext 获取绘图上下文 context var context = wx.createContext()
context.setStrokeStyle("#00ff00") context.setLineWidth(5) context.rect(0, 0, 200, 200) context.stroke() context.setStrokeStyle("#ff0000") context.setLineWidth(2) context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true) context.stroke()
// 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为wx.drawCanvas({
canvasId: 'firstCanvas',
actions: context.getActions() // 获取绘图动作数组
})
}
})
代码说明如图所示。
绘图代码说明 总结评价 本节课主要学习微信小程序组件，包括视图容器组件、基础内容组件、表单组件、导航组件、媒体组件、地图组件、画布组件等。
