第3章微信小程序组件




微信小程序框架为开发者提供了一系列的基础组件，这些原生组件让小程序具有良好的用户体验，同时也方便开发者快速开发。
本章主要目标
 了解小程序组件的含义； 
 熟练掌握常见的容器组件、内容组件、表单组件、导航组件、媒体组件和地图组件的属性以及用法； 
 综合运用小程序组件完成问卷调查项目的设计与开发。
3.1组件概述




组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。当打开某款小程序后，界面中的图片、文字等元素都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。
其语法格式如下： 

<标签名称 属性="值"> 

内容

</标签名称>

示例代码如下： 

<button class="btn">我是按钮组件</button>

上述代码用<button></button>表示一个按钮组件，在<button>标签中通过class="btn"为<button>组件添加样式btn。小程序目前提供的通用属性如表3.1所示。


表3.1小程序组件通用属性



属性名类型说明备注

idstring组件的唯一标识在当前界面中用id值标识唯一的组件，并且不能有两个及以上id值同名
classstring组件的样式类为一个或多个组件设置样式类
stylestring组件的内联样式动态设置内联样式
hiddenboolean组件的显示/隐藏组件均默认为显示状态
data*any自定义属性当组件触发事件时会附带将该属性和值发送给对应的事件处理函数
bind*/catch*eventHandler组件的事件为组件绑定/捕获事件





3.2视图容器组件




视图容器(View Container)组件用于排版页面为其他组件提供载体。视图容器有view、scrollview和swiper 3种。
3.2.1view
view容器是页面中最基本的容器组件，通过高度和宽度来定义容器大小。<view>相当于HTML中的<div>标签，是一个页面中最外层的容器，能够接受其他组件的嵌入，例如,多个view容器的嵌套。view容器可以通过flex布局定义内部项目的排列方式(详见第4章flex布局)。其属性如表3.2所示。


表3.2<view>组件属性



属性名类型默认值说明

hoverbooleanfalse是否启动点击态
hoverclassstringnone按住容器后的样式。当属性设置为hoverclass="none"时，没有点击效果
hoverstoppropagationbooleanfalse指定是否阻止本容器的祖先节点出现点击态
hoverstarttimenumber50按住容器后多久出现点击态，单位为ms
hoverstaytimenumber400手指离开后点击态的保留时长，单位为ms



视频讲解

31本例设计了两组父子view容器的点击态，第一组父子view容器中子view容器不阻止点击态向父容器传递，第二组父子view容器中子view容器阻止点击态向父容器传递，程序运行效果如图3.1所示。


pages/view/view.wxml文件代码如下： 

<view class="demo-box">

<view class="title">1.view小案例</view>

<view class="title">(1)不阻止父容器的view-hover</view>

<view class="view-parent" hover-class="view-hover">我是父类容器

<view class="view-son" hover-class="view-hover">我是子类容器</view>

</view>

<view class="title">(2)阻止父容器的view-hover</view>

<view class="view-parent" hover-class="view-hover">我是父类容器

<view class="view-son" hover-class="view-hover" hover-stop-propagation hover-start-time="3000" hover-stay-time="4000">我是子类容器</view>

</view>

</view>



图3.1组件view小案例


pages/view/view.wxss文件代码如下： 

.view-parent {

width: 100%;

height: 350rpx;

background-color: pink;

text-align: center;

}

.view-son {

width: 50%;

height: 200rpx;

background-color: skyblue;

margin: 20rpx auto;

text-align: center;

}

.view-hover {

background-color: red;

}

app.wxss文件代码如下： 

.demo-box {

padding: 20rpx; margin: 20rpx 60rpx; border: 1rpx solid gray;

}

.title {

display: flex; 

flex-direction: row; 

margin: 20rpx;

justify-content: center;

}


app.wxss文件中代码为公共样式，用于设置页面的布局以及标题样式，在本章所有案例中均相同，在后面的案例中省略。
【代码讲解】本例在view.wxml文件中放置两组<view>容器，在app.wxss文件中设置父容器背景色为浅红色，子容器背景色为浅蓝色，通过hoverclass="viewhover"为标签增加属性，点击态均设置为点击后背景色更新为红色，第一组不阻止点击态传递给父容器，在第二组子类容器中通过hoverstoppropagation来阻止点击态传递给父容器，并设置属性hoverstarttime="3000"，hoverstaytime="4000"，当点击子容器时，3s后出现点击状态，当手指松开4s后，子容器背景色变为初始颜色。
图3.1(a)为页面初始效果； 图3.1(b)为点击第1组的子容器后，父子容器背景色均变为红色； 图3.1(c)为点击第2组的子容器后，仅有子容器背景色变为红色。
3.2.2scrollview
scrollview容器为可滚动的视图容器，允许用户通过手指在容器上滑动来改变显示区域，常见的滑动方向有水平滑动和垂直滑动。其属性如表3.3所示。


表3.3<scrollview>组件属性



属性名类型默认值说明

scrollxbooleanfalse允许横向滑动
scrollybooleannone允许纵向滑动
upperthresholdnumber50距顶部/左边多远时(单位: px)，触发scrolltoupper事件
lowerthresholdnumber50距顶部/右边多远时(单位: px)，触发scrolltolower事件
scrolltopnumber设置纵向滚动条位置
scrollleftnumber设置横向滚动条位置
scrollintoviewstring值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素
scrollwithanimationbooleanfalse在设置滚动条位置时使用动画过渡
enablebacktotopbooleanfalseiOS下单击顶部状态、Android双击标题栏滚动条返回顶部，仅支持纵向
bindscrolltouppereventhandle滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolowereventhandle滚动到底部/右边，会触发scrolltolower事件
bingscrolleventhandle滚动时触发，event.detail={scrollLeft，scrollTop，scrollHeight，scrollWidth，deltaX，deltaY}

注意： 在使用纵向滚动时，需要为<scrollview>设置一个固定宽度。
32本例设计一个纵向scrollview组件，运行效果如图32所示。


视频讲解



图3.2组件scrollview小案例


pages/scrollview/scrollview.wxml文件代码如下： 

<view class="demo-box">

<view class="title">2.scroll-view小案例</view>

<view class="title">实现纵向滚动</view>

<scroll-view scroll-y>

<view class="scroll-item-y">元素一</view>

<view class="scroll-item-y">元素二</view>

<view class="scroll-item-y">元素三</view>

<view class="scroll-item-y">元素四</view>

<view class="scroll-item-y">元素五</view>

<view class="scroll-item-y">元素六</view>

</scroll-view>

</view>

pages/scrollview/scrollview.wxss文件代码如下： 

scroll-view {

height: 600rpx; width: 250rpx; margin: 0 auto;

}

.scroll-item-y {

height: 200rpx; line-height: 200rpx;

text-align: center; background-color: skyblue; border: 1px solid gray;

}

【代码讲解】本例在scrollview.wxml文件中放置<scrollview>组件，通过设置属性scrolly，允许组件上下滑动，在scrollview.wxss文件中设置其高度为600rpx，使得scrollview组件能够纵向滚动，在<scrollview>中嵌套6组<view>用于显示滚动效果，内部元素宽度均为250rpx。
图3.2(a)为页面初始效果； 图3.2(b)为<scrollview>组件滑动到底部后的效果。
在图3.3中，虚线框是<scrollview>组件在京东小程序分类页中的应用。


图3.3scrollview组件应用实例


3.2.3swiper
<swiper>组件为滑块视图容器，通常用于图片之间的切换播放，被形象地称为轮播图。其属性如表3.4所示。


表3.4<swiper>组件属性



属性名类型默认值说明

indicatordotsbooleanfalse是否显示面板指示点
indicatorcolorcolorrgba(0，0，0，0.3)指示点颜色
indicatoractivecolorcolor#000000当前选择的指示点颜色
续表



属性名类型默认值说明

autoplaybooleanfalse是否自动切换
currentnumber0当前所在滑块的index
currentitemidstring" "当前所在滑块的itemid，不能与current被同时指定
intervalnumber5000自动切换时间间隔，单位： ms
durationnumber500滑动动画时长，单位： ms
circularbooleanfalse是否采用衔接滑动
verticalbooleanfalse滑动方向是否为纵向
previousmarginstring"0px"前边距，可用于露出前一项的一小部分，接受px和rpx值
nextmarginstring"0px"后边距，可用于露出后一项的一小部分，接受px和rpx值
displaymultipleitemsnumber1同时显示的滑块数量
skiphiddenitemlayoutbooleanfalse是否跳过未显示的滑块布局，设为true可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
bindchangeeventhandlecurrent改变时会触发change事件，event.detail = {current: current, source: source}
bindtransitioneventhandleswiperitem的位置发生改变时会触发transition事件，event.detail = {dx: dx, dy: dy}
bindanimationfinisheventhandle动画结束时会触发animationfinish事件，event.detail同上



视频讲解

33swiper组件小案例，运行效果如图3.4所示。
pages/swiper/swiper.wxml文件代码如下： 

<view class="demo-box">

<view class="title">3.swiper小案例</view>

<view class="title">图片进行翻页切换</view>

<swiper indicator-dots autoplay interval="3000">

<swiper-item>

<image src="/images/cat1.jpg"></image>

</swiper-item>

<swiper-item>

<image src="/images/cat2.jpg"></image>

</swiper-item>

<swiper-item>

<image src="/images/cat3.jpg"></image>

</swiper-item>

</swiper>

</view>



图3.4swiper组件小案例




图3.5swiper组件应用实例

pages/swiper/swiper.wxss文件代码如下： 

swiper {

height: 350rpx;

}



【代码讲解】本例在swiper.wxml文件中放置<swiper>组件，设置属性autoplay允许自动切换图片，设置属性interval="3000"，图片每隔3s发生一次切换，属性indicatordots用于显示面板指示点，<swiper>组件中嵌套3组<swiperitem>，swiper容器的高度设置为300rpx。
图3.4(a)为页面初始效果，此时默认显示第一张图片； 图3.4(b)和图3.4(c)分别显示第二张照片和第三张照片，照片数据来自本地,保存在images文件夹下。

在图3.5中，虚线框是<swiper>组件在携程小程序中的应用。



3.3基础内容组件



3.3.1icon


<icon>为图标组件，常用于页面装饰，开发者可以自定义其类型、大小和颜色。其属性如表3.5所示。


表3.5<icon>组件属性



属性名类型默认值说明

typestringfalseicon的类型，有效值： success，success_no_circle，  info，warn，waiting，cancel，download， search， clear
sizenumber/string23pxicon的大小，单位: px(基础库2.4.0起支持rpx)
colorcolor#000000icon的颜色，同CSS的color

例如,自定义一个绿色、40px大小的success图标。
WXML中的代码如下： 

<icon type="success" size="40" color="green" />

如果有多个图标需要批量生成，利用wx:for循环精简代码，在JS文件的data中存放数据，然后在WXML文件中使用<block>标签进行列表渲染。
批量生成不同大小的success图标的示例代码如下。
WXML中的代码如下： 

<view>

<block wx:for="{{iconSize}}">

<icon type="success" size="{{item}}" />

</block>

</view>

JS文件代码如下： 

Page({

data: {

iconSize: ［"20", "25", "30"］

}

})

上述代码生成的图标大小分别为20rpx、25rpx和30rpx。
34icon组件小案例，运行效果如图3.6所示。


视频讲解 

pages/icon/icon.wxml文件代码如下： 

<view class="demo-box">

<view class="title">4.icon小案例</view>

<view class="title">(1)实现大小变化</view>

<block wx:for="{{iconSize}}">

<icon type="success" size="{{item}}" />

</block>

<view class="title">(2)实现内容变化</view>

<block wx:for="{{iconType}}">

<icon type="{{item}}" size="40" />

</block>

<view class="title">(3)实现颜色变化</view>

<block wx:for="{{iconColor}}">

<icon type="success" size="40" color="{{item}}" />

</block>

</view>



图3.6icon组件小案例


pages/icon/icon.js文件代码如下： 

Page({

data: {

iconSize: ［20, 30, 40, 50, 60, 70］,

iconType: ［

"success", "success_no_circle", "info", "warn", "waiting", "cancel", "download", "search", "clear"

］,

iconColor: ［

"red", "orange", "yellow", "green", "red", "blue", "purple"

］,

}

})


【代码讲解】本例在icon.js文件中的data中设置3个数组，分别为iconSize、iconType和iconColor，用于设置图标的大小、图标的类型和图标的颜色。在icon.wxml文件中使用<block>标签配合wx:for批量生成多个标签组件。
3.3.2text
<text>为文本组件，用于文字的显示，小程序的文本组件支持转义字符。其属性如表3.6所示。


表3.6<text>组件属性



属性名类型默认值说明最 低 版 本

selectablebooleanfalse文本是否可选1.1.0
spacestring显示连续空格1.4.0
decodebooleanfalse是否解码1.4.0


35组件text小案例，运行效果如图3.7所示。


视频讲解

pages/text/text.wxml文件代码如下： 

<view class="demo-box">

<view class="title">5.text小案例</view>

<view class="title">用于文本的显示</view>

<text>{{text}}</text>

<button bindtap="add">增加一行</button>

<button bindtap="reduce">删除一行</button>

</view>



图3.7text组件小案例


pages/text/text. js文件代码如下： 

var initData = "2019年，中国要推进这70个工程项目： 制定实施新时期"互联网+"行动，实施数字经济、"互联网+"重大工程，建设人工智能创新应用先导区，持续推进大数据综合试验区建设； 加快5G商用步伐和IPv6规模部署，加强人工智能、工业互联网、物联网等新型基础设施建设和融合应用。"

var extraLine = ［］; //创建一个空数组

Page({

data: {

text: initData

},

add: function(e) {

extraLine.push("增加一行") //增加一行

this.setData({

text: initData + '＼n' + extraLine.join('＼n') //更新数组值

})

},

reduce: function(e) {

if(extraLine.length > 0) {

extraLine.pop() //删除一行

this.setData({

text: initData + '＼n' + extraLine.join('＼n') //更新数组值

})

}

}

})

【代码讲解】本例在text.wxml文件中通过<text>组件存放文字，以及增加两个<button>按钮，分别绑定了点击事件，用于实现增加一行和删除一行的操作，对应在text.js文件中自定义add()和reduce()两个函数。
图3.7(a)为初始页面； 图3.7(b)为点击“增加一行”按钮后，在文字内容下方增加一行； 图3.7(c)为点击“删除一行”按钮后，新增加的一行消失，回到页面初始状态。 
3.3.3progress
<progress>为进度条组件，用于进度的显示，长度单位默认为px。其属性如表3.7所示。


表3.7<progress>组件属性



属性名类型默认值说明

percentnumber百分比0%~100%
showinfobooleanfalse在进度条右侧显示百分比
borderradiusnumber/string0圆角大小
fontsizenumber/string16右侧百分比字体大小
strokewidthnumber/string6进度条线的宽度
colorstring#09BB07进度条颜色(请使用activeColor)
activeColorstring#09BB07已选择的进度条的颜色
backgroundColorstring#EBEBEB未选择的进度条的颜色
activebooleanfalse进度条从左往右的动画
activemodestringbackwardsbackwards:动画从头播； forwards： 动画从上次结束点接着播

例如，自定义一个当前进度为30，宽度为10rpx的进度条，示例代码如下： 

<progress percent="30" stroke-width="10rpx"></progress>

其运行效果如图3.8所示。


图3.8进度条图示





视频讲解

36progress组件小案例，运行效果如图3.9所示。
pages/progress/progress.wxml文件代码如下： 

<view class="demo-box">

<view class="title">6.progress小案例</view>

<view class="title">增加和减少进度</view>


<progress percent="{{progress}}" stroke-width="10rpx" show-info></progress>



<button bindtap="add">增加10%</button>

<button bindtap="reduce">减少10%</button>

</view>



图3.9progress组件小案例


pages/progress/progress.js文件代码如下： 

var per = 30;

Page({

data: {

progress: per,//数据初始化

},

add: function(e) {

per += 10;//增加10%

if (per > 100) {

per = 100;//进度超过100%不增加

}

this.setData({

progress: per//更新进度值

})

},

reduce: function(e) {

per -= 10;//减少10%

if (per < 0) {

per = 0;//进度小于0%不减少

}

this.setData({

progress: per//更新进度值

})

}

})

pages/progress/progress.wxss文件代码如下： 

progress {

padding: 80rpx;

}

【代码讲解】本例在progress.wxml文件中放置<progress>组件，通过设置属性showinfo让进度条右边显示当前进度值，以及增加两个<button>按钮，分别绑定了点击事件，用于实现增加10%的进度值和减少10%的进度值，在progress.js文件中自定义add()和reduce()两个函数。
图3.9(a)为初始页面； 图3.9(b)为点击“减少10%”按钮后，进度值从30%变为20%； 图3.9(c)为点击“增加10%”按钮后，进度值从20%变为30%。
3.4表单组件




表单组件在网页开发中十分常见，对于小程序而言，当用户需要设计注册、登录等页面时可以使用表单。表单组件是多类组件的统称。
3.4.1button
<button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。其属性如表3.8所示。


表3.8<button>组件属性



属性名类型默认值说明最低版本

sizestringdefault按钮的大小
typestringdefault按钮的样式类型
plainbooleanfalse按钮是否镂空，背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带loading图标
续表



属性名类型默认值说明最低版本


formtypestring用于<form>组件，点击分别会触发<form>组件的submit/reset事件
opentypestringbuttonhover微信开放能力1.1.0
hoverclassstringbuttonhover指定按钮按下去的样式类。当hoverclass="none"时，没有点击态效果
hoverstoppropagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
hoverstarttimenumber20按住后多久出现点击态，单位： ms
hoverstaytimenumber70手指松开后点击态保留时间，单位： ms

注意： buttonhover默认为{backgroundcolor: rgba(0, 0, 0, 0.1); opacity: 0.7;}。
size属性值如下。
（1） default： 默认按钮，宽度与手机屏幕宽度保持一致。
（2） mini： 迷你按钮，尺寸小于默认按钮。
示例代码如下： 

<button>默认按钮</button>

<button size="mini">迷你按钮 </button>

其运行效果如图3.10所示。

type属性值如下。
（1） primary： 主要按钮，颜色为绿色。
（2） default： 默认按钮，颜色为灰白色。
（3） warn： 警告按钮，颜色为红色。
示例代码如下： 

<button type="primary">primary按钮</button>

<button type="default">default按钮</button>

<button type="warn">warn按钮</button>

其运行效果如图3.11所示。


图3.10默认按钮和迷你按钮




图3.11type属性值对应的按钮



formtype属性值如下。
（1） submit： 提交表单。
（2） reset： 重置表单。
示例代码如下： 

<button form-type="submit">提交按钮</button>

<button form-type="reset">重置按钮</button>

其运行效果如图3.12所示。


图3.12formtype属性值对应的按钮





视频讲解

37button组件小案例，运行效果如图3.13所示。


图3.13button组件小案例


pages/button/button.wxml文件代码如下： 

<view class="demo-box">

<view class="title">7.button小案例</view>

<view class="title">(1)迷你按钮</view>

<button size="mini" type="primary">主要按钮</button>

<button size="mini" type="default">次要按钮</button>

<button size="mini" type="warn">警告按钮</button>

<view class="title">(2)按钮状态</view>

<button>普通按钮</button>

<button disabled>禁用按钮</button>

<button loading>加载按钮</button>

<view class="title">(3)增加按钮事件</view>

<button bindgetuserinfo="getUserDetail" open-type="getUserInfo">点我获取用户信息</button>

</view>

pages/button/button.js文件代码如下： 

Page({

getUserDetail: function(e) {

console.log(e.detail.userInfo)

}

})

pages/button/button.wxss文件代码如下： 

button {

margin: 10rpx;

}

【代码讲解】在button.wxml文件中设置3组效果，分别为迷你按钮、普通按钮和带点击事件按钮。第1组设置相同的size属性和不同的type属性实现3种不同类型的迷你按钮； 第2组设置属性disabled和loading实现按钮禁用和加载动画效果； 第3组通过bindgetuserinfo="getUserDetail"为按钮增加事件，并追加opentype="getUserInfo"状态，然后在JS文件中定义点击事件。
3.4.2checkbox
<checkbox>为复选框组件，常用于在表单中进行多项数据的选择。复选框的<checkboxgroup>为父控件，其内部嵌套若干个<checkbox>子控件。
<checkboxgroup>组件只有一个属性，如表3.9所示。


表3.9<checkboxgroup>组件属性



属性名类型默认值说明

bindchangeeventhandle<checkboxgroup>选中项发生改变时触发change事件，detail = {value:［选中的checkbox的value数组］}

<checkbox>组件的属性如表3.10所示。


表3.10<checkbox>组件属性



属性名类型默认值说明

valuestring<checkbox>标识，选中时触发<checkboxgroup>的change事件，并携带<checkbox>的value
disabledbooleanfalse是否禁用
checkedbooleanfalse当前是否选中，可用来设置默认选中
colorcolorcheckbox的颜色，同CSS的color

示例代码如下： 

<checkbox-group>

<checkbox value="tiger" checked="true" />老虎

<checkbox value="elephant" disabled="true" />大象

<checkbox value="lion" />狮子

<checkbox value="penguin" />企鹅

</checkbox-group>

其运行效果如图3.14所示。


图3.14复选框图示




视频讲解

如图3.14所示，“老虎”选项被选中，“大象”选项禁止选择，“狮子”和“企鹅”选项均未选中。


38checkbox组件小案例，运行效果如图3.15所示。



图3.15checkbox组件小案例


pages/checkbox/checkbox.wxml文件代码如下： 

<view class="demo-box">

<view class="title">8.checkbox小案例</view>

<view class="title">利用for循环批量生成</view>

<checkbox-group bindchange="checkboxChange">

<label wx:for="{{items}}">

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

</label>

</checkbox-group>

</view>

pages/checkbox/checkbox.js文件代码如下： 


Page({

data: {

items: ［

{ name: "tiger", value: "老虎" },

{ name: "elephant", value: "大象" },

{ name: "lion", value: "狮子", checked: "true" },

{ name: "penguin", value: "企鹅" },

{ name: "elk", value: "麋鹿" },

{ name: "swan", value: "天鹅" },

］

},

checkboxChange:function(e) {

console.log("checkbox发生change事件，携带value值为： ", e.detail.value)

}

})

【代码讲解】本例首先在checkbox.js文件中的data中定义一个数组items，用于记录复选框的名称(name)、值(value)以及选中情况，并在check.wxml文件中使用<checkboxgroup>标签包裹<checkbox>，使用<label>标签配合wx:for实现批量生成多个checkbox组件； 其次在<checkboxgroup>标签上绑定监听事件，在checkbox.js文件中自定义checkboxChange()函数，以达到每次被触发后都在Console控制台输出最新选中的值。
图3.15(a)为多个选项被选中后的效果； 图3.15(b)为Console控制台输出的内容，显示被选中的选项所携带的值。


3.4.3input
<input>为输入框组件，常用于文本(如姓名、年龄等信息)的输入。其属性如表3.11所示。


表3.11<input>组件属性



属性名类型默认值说明

valuestring输入框的初始内容
typestring"text"input的类型
passwordbooleanfalse是否是密码类型
placeholderstring输入框为空时的占位符
placeholderstylestring指定placeholder的样式
placeholderclassstring"inputplaceholder"指定placeholder的样式类
disabledbooleanfalse是否禁用
maxlengthnumber140最大输入长度，设置为-1的时候不限制最大长度
cursorspacingnumber 0指定光标与键盘的距离，单位： px(基础库2.4.0起支持rpx)。取input距离底部的距离和cursorspacing指定距离的最小值作为光标与键盘的距离
autofocusbooleanfalse(即将废弃，请直接使用focus)自动聚焦，拉起键盘
focusbooleanfalse获取焦点
confirmtypestring"done"设置键盘右下角按钮的文字，仅在type='text'时生效
confirmholdbooleanfalse点击键盘右下角按钮时是否保持键盘不收起
cursornumber指定focus时的光标位置
selectionstartnumber-1光标起始位置，自动聚集时有效，需与selectionend搭配使用
selectionendnumber-1光标结束位置，自动聚集时有效，需与selectionstart搭配使用
adjustpositionbooleantrue键盘弹起时，是否自动上推页面
bindinputeventhandle键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode为键值，基础库2.1.0起支持，处理函数可以直接返回一个字符串，将替换输入框的内容
续表



属性名类型默认值说明


bindfocuseventhandle输入框聚焦时触发，event.detail = {value, height}，height为键盘高度，在基础库1.9.90起支持
bindblureventhandle输入框失去焦点时触发，event.detail = {value: value}
bindconfirmeventhandle点击“完成”按钮时触发，event.detail = {value: value}

type属性值如下。
（1） text： 文本输入键盘。
（2） Number： 数字输入键盘。
（3） idcard： 身份证输入键盘。
（4） digit： 带小数点的数字键盘。
confirmtype属性值如下。
（1） send： 右下角按钮为“发送”。
（2） search： 右下角按钮为“搜索”。


视频讲解

（3） next： 右下角按钮为“下一个”。
（4） go： 右下角按钮为“前往”。
（5） done： 右下角按钮为“完成”。

39input组件小案例，运行效果如图3.16所示。


图3.16input组件小案例


pages/input/input.wxml文件代码如下： 

<view class="demo-box">

<view class="title">9.input小案例</view>

<view class="title">(1)文字输入框</view>

<input type="text" maxlength="10" placeholder="这里最多只能输入10个字" />

<view class="title">(2)密码输入框</view>

<input type="password" placeholder="请输入密码" />

<view class="title">(3)禁用输入框</view>

<input disabled placeholder="该输入框已经被禁用" />

<view class="title">(4)为输入框增加事件监听</view>

<input bindinput="getInput" bindblur="getBlur" placeholder="这里输入的内容将会被监听"/>

</view>

pages/input/input.js文件代码如下： 

Page({

getInput: function(e) {

console.log("getInput触发，输入框的内容发生改变，当前值为:" + e.detail.value);

},

getBlur: function(e) {

console.log("getBlur触发，文本框失去了焦点，当前值为:" + e.detail.value);

},

})

pages/input/input.wxss文件代码如下： 

input {

margin: 20rpx auto; border: 1px solid silver;

}

【代码讲解】本例包含4个输入框input组件，分别为最大字符长度限时为10、密码输入框、禁用输入框以及带有监听事件的输入框。在input.wxml文件中前三组分别通过设置属性maxlength、password、disabled来实现效果； 第四组通过属性bindinput和bindfocus为输入框增加当键盘输入时和失去焦点时所触发的事件，并在input.js文件中自定义两个事件函数getInput()和getBlur()。 
图3.16(a)是模拟器上的程序效果； 图3.16(b)是输入数据和失去焦点时程序在Console控制台打印的结果。
3.4.4label
<label>是标签组件，label组件不会呈现任何效果，但是可以用来改进表单组件的可用性。当用户在label元素内点击文本时，就会触发此控件，即当用户选择该标签时，事件会传递到和标签相关的表单控件上，可以使用for属性绑定id，也可以将控件放在该标签内部。该组件对应的属性如表3.12所示。


表3.12<label>组件属性



属性名类型说明

forString绑定控件的id

注意： 目前可以绑定的控件有<button>、<checkbox>、<radio>、<switch>。
这里以复选框<checkbox>为例，使用<label>标签的for属性绑定对应复选框，示例代码如下： 

<checkbox-group>

<checkbox id="tiger" value="tiger" checked="true" />

<label for="tiger">老虎</label>

</checkbox-group>

也可以使用<label>包裹<checkbox>标签： 

<checkbox-group>

<label>

<checkbox value="tiger" checked="true" />老虎

</label>

</checkbox-group>




视频讲解

上述两种做法效果一样，当用户点击“老虎”内容区域时，<checkbox>组件均被选中。

310label组件小案例,运行效果如图3.17所示。
pages/label/label.wxml文件代码如下： 

<view class="demo-box">

<view class="title">10.label小案例</view>

<view class="title">(1)利用for属性</view>

<checkbox-group>

<checkbox id="tiger" checked />

<label for="tiger">老虎</label>

<checkbox id="elephant" />

<label for="elephant">大象</label>

<checkbox id="lion" />

<label for="lion">狮子</label>

</checkbox-group>

<view class="title">(2)label包裹组件</view>

<checkbox-group>

<label>

<checkbox checked />老虎

</label>

<label>

<checkbox/>大象

</label>

<label>

<checkbox/>狮子

</label>

</checkbox-group>

</view>

 pages/label/label.wxss文件代码如下： 

checkbox-group {

margin: 0 80rpx ;

}


图3.17label组件小案例


【代码讲解】本例在label.wxml文件中放置两组标签组件，第一组使用for属性绑定id，第二组让label包裹<checkbox>组件。
如图3.17所示，两种方法效果相同，当分别单击每个文字内容后，如果左边复选框是选中状态，就会变成未选中状态； 如果左边复选框是未选中状态，就会变成选中状态。
3.4.5form
<form>为表单控件组件，用于提交表单组件中的内容。<form>控件组件内部可以嵌套多种组件，具体组件类型如下所示。
（1） <input>： 输入框组件； 
（2） <button>： 按钮组件； 
（3） <checkbox>： 复选框组件； 
（4） <switch>： 开关选择器； 
（5） <radio>： 单项框组件； 
（6） <picker>： 滚动选择器； 
（7） <slider>： 滑动选择器； 
（8） <textarea>： 多行输入框； 
（9） <label>： 标签组件。
<form>控件组件的属性如表3.13所示。


表3.13<form>控件组件属性



属性名类型说明

reportsubmitboolean是否返回formId用于发送模板消息
bindsubmiteventhandle携带form中的数据触发submit事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreseteventhandle表单重置时会触发reset事件


注意： 当表单组件<form>需要提交二级内容表单组件（如<input>）的内容时，<form>组件中需添加bindsubmit事件，<button>组件需添加formtype属性并赋值为submit，此时的二级内容表单组件（如<input>）还需要设置name属性。当需要在用户提交表单之后发送模板消息时，表单组件<form>需设置reportsubmit属性并赋值为true。
311form控件组件小案例，运行效果如图3.18所示。


图3.18form组件小案例




视频讲解

pages/form/form.wxml文件代码如下： 

<view class="demo-box">

<view class="title">11.form小案例</view>

<view class="title">模拟注册功能</view>

<form bindsubmit="onSubmit" bindreset="onReset">

<text>用户名:</text>

<input name="username" type="text" placeholder="请输入你的用户名"></input>

<text>密码:</text>

<input name="password" type="password" placeholder="请输入你的密码"></input>

<text>手机号:</text>

<input name="phonenumber" type="password" placeholder="请输入你的手机号"></input>

<text>验证码:</text>

<input name="code" type="password" placeholder="请输入验证码"></input>

<button form-type="submit">注册</button>

<button form-type="reset">重置</button>

</form>

</view>

pages/form/form.js文件代码如下： 

Page({

onSubmit(e) {

console.log("表单被注册")

console.log("form发生了submit事件，携带数据为： ", e.detail.value)

},

onReset() {

console.log("form发生了reset事件，表单已被重置")

}

})

pages/form/form.wxss文件代码如下： 

input {

border: 1px solid silver;

}

button {

margin-top: 20rpx;

}

text {

font-size: 36rpx;

}


【代码讲解】本示例在form.wxm文件中放置一个<form>控件组件，为其绑定监听事件bindsubmit="onSubmit"和bindreset="onReset"，用于监听表单的提交和重置。在<form>控件组件内部嵌套4个<input>组件，设置属性type="text"以及type="password"用于用户名和密码的输入。页面底部放置两个<button>组件，设置属性formtype="submit"和formtype="reset"用于提交和重置表单，并在form.js文件中自定义onSubmit()函数和onReset()函数。
图3.18(a)为输入数据时模拟器的效果； 图3.18(b)是Console控制台打印的注册信息效果。
3.4.6picker
<picker>为滚动选择器，从页面底部弹出供用户选择。根据mode属性值的不同共有5种选择器，分别为普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。
1. 普通选择器
当mode ="selector"时为普通选择器效果，相关属性如表3.14所示。


表3.14<picker mode="selector">组件属性



属性名类型默认值说明
rangeArray/ObjectArray［ ］mode为selector或multiSelector时，range有效
rangekeystring当range是一个Object Array时，通过rangekey来指定Object中key的值作为选择器显示内容
valuenumber0表示选择了range中的第几个(下标从0开始)
bindchangeeventhandlevalue改变时触发change事件，event.detail = {value: value}
disabledbooleanfalse是否禁用
bindcanceleventhandle取消选择或点遮罩层收起picker时触发

2. 多列选择器
当mode="multiSelector"时为多列选择器效果，其属性如表3.15所示。


表3.15<picker mode="multiSelector">组件属性



属性名类型默认值说明
rangeArray/ObjectArray［ ］mode为selector或multiSelector时，range有效
rangekeystring当range是一个Object Array时，通过rangekey来指定Object中key的值作为选择器显示内容
valuenumber0表示选择了range中的第几个(下标从0开始)
bindchangeeventhandlevalue改变时触发change事件，event.detail= {value: value}
bindcolumnchangeeventhandle列改变时触发

3. 时间选择器
当mode="time"时为时间选择器效果，其属性如表3.16所示。


表3.16<picker mode="time">组件属性



属性名类型默认值说明
valuestring表示选中的时间，格式为"hh:mm"
startstring表示有效时间范围的开始，字符串格式为"hh:mm"
endstring表示有效时间范围的结束，字符串格式为"hh:mm"
bindchangeeventhandlevalue改变时触发change事件，event.detail = {value}
bindcolumnchangeeventhandle列改变时触发

4. 日期选择器
当mode="date"时为日期选择器效果，其属性如表3.17所示。



表3.17<picker mode="date">组件属性



属性名类型默认值说明
valuestring0表示选中的日期，格式为"YYYYMMDD"
startstring表示有效日期范围的开始，字符串格式为"YYYYMMDD"
endstring表示有效日期范围的结束，字符串格式为"YYYYMMDD"
fieldsstringday有效值year,month,day，表示选择器的粒度
bindchangeeventhandlevalue改变时触发change事件，event.detail = {value}

5. 省市区选择器
当mode="region"时为省市区选择器效果，其属性如表3.18所示。


表3.18<picker mode="region">组件属性



属性名类型默认值说明
valuearray［］表示选中的省市区，默认选中每一列的第一个值
customitemstring可为每一列的顶部添加一个自定义的项
bindchangeeventhandlevalue改变时触发change事件，event.detail = {value, code, postcode}，其中字段code是统计用区划代码，postcode是邮政编码



视频讲解

312picker组件小案例，运行效果如图3.19所示。


图3.19picker组件小案例



pages/picker/picker.wxml文件代码如下： 

<view class="demo-box">

<view class="title">12.表单组件picker的简单应用</view>

<view class="title">(1)普通选择器</view>

<picker mode="selector" range="{{oneItems}}" bindchange="selectorChange">

<view>当前选择: {{selector}}</view>

</picker>

<view class="title">(2)多列选择器</view>

<picker mode="multiSelector" range="{{doubleItems}}" 

bindchange="multiSelectorChange">

<view>当前选择: {{multiSelector}}</view>

</picker>

<view class="title">(3)时间选择器</view>

<picker mode="time" bindchange="timeChange">

<view>当前选择: {{time}}</view>

</picker>

<view class="title">(4)日期选择器</view>

<picker mode="date" bindchange="dateChange">

<view>当前选择: {{date}}</view>

</picker>

<view class="title">(5)省市区选择器</view>

<picker mode="region" bindchange="regionChange">

<view>当前选择: {{region}}</view>

</picker>

</view>

pages/picker/picker.js文件代码如下： 

Page({

//页面的初始数据

data: {

oneItems: ［"老虎", "大象", "狮子"］,

doubleItems: ［

［"千岛湖", "洞庭湖", "玄武湖"］,

［"鼓浪屿", "平遥古城", "坝上草原"］,

［"泰山", "黄山", "华山"］

］

},

selectorChange: function(e) {

var i = e.detail.value;//获得数组的下标

var value = this.data.oneItems［i］;//获得选项的值

this.setData({

selector: value//将用户选择的值更新赋给selector

});

},

multiSelectorChange: function(e) {

var arrayIndex = e.detail.value;//获得数组的下标

var value = new Array();//声明一个空数组，用于存放用户选择的值

for (var i = 0; i < arrayIndex.length; i++) {

var m = arrayIndex［i］;//通过数组的遍历，获得第i个数组元素的下标

var n = this.data.doubleItems［i］［m］;//获得第i个数组的元素值

value.push(n);//往数组中追加新的值

}

this.setData({

multiSelector: value//将用户选择的值更新赋给multiSelector

});

},

timeChange: function(e) {

var value = e.detail.value;//获得选择的时间

this.setData({

time: value//将用户选择的值更新赋给time

});

},

dateChange: function(e) {

var value = e.detail.value;//获得选择的日期

this.setData({

date: value//将用户选择的值更新赋给date

});

},

regionChange: function(e) {

var value = e.detail.value;//获得选择的省市区

this.setData({

region: value//将用户选择的值更新赋给region

});

},

})

【代码讲解】本示例在picker.wxml文件中设置了5组不同效果的选择器，分别为普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。在普通选择器中设置属性mode="selector"并为绑定监听事件，在JS文件中自定义选项数组和函数selectorChange()，在wxml文件中通过{{selector}}动态获取用户选择的内容； 在多列选择器中设置属性mode="selector"并为组件绑定监听事件，在JS文件中自定义选项数组和函数multiSelectorChange()，在WXML文件中通过{{multiSelector}}动态获取用户选择的内容； 在时间选择器中设置属性mode="time"并为组件绑定监听事件，在JS文件中自定义函数timeChange()，在WXML文件中通过{{time}}动态获取用户选择的时间； 在日期选择器中设置属性mode="date"并为组件绑定监听事件，在JS文件中自定义函数dateChange()，在WXML文件中通过{{date}}动态获取用户选择的日期； 在省市区选择器中设置属性mode="region"并为组件绑定监听事件，在JS文件中自定义函数regionChange()，在WXML文件中通过{{region}}动态获取用户选择的地区。
3.4.7pickerview
<pickerview>是嵌入页面的滚动选择器，其中只可放置pickerviewcolumn组件，其属性如表3.19所示。


表3.19< pickerview>组件属性



属性名类型默认值说明
valueArray.<number>［］数组中的数字依次表示pickerview内的pickerviewcolumn选择的第几项(下标从0开始)，数字大于pickerviewcolumn可选项长度时，选择最后一项
indicatorstylestring设置选择器中间选中框的样式
indicatorclassstring设置选择器中间选中框的类名
maskstylestring设置蒙层的样式
maskclassstring设置蒙层的类名
bindchangeeventhandle滚动选择时触发change事件，event.detail = {value}； value为数组，表示pickerview内的pickerviewcolumn当前选择的是第几项(下标从0开始)



视频讲解

313pickerview组件小案例，运行效果如图3.20所示。


pages/pickerview/pickerview.wxml文件代码如下： 

<view class="demo-box">

<view class="title">13.picker-view小案例</view>

<view class="title">旅游计划</view>

<view class="title">{{travel}}</view>

<picker-view value="{{value}}" bindchange="pickerviewChange">

<picker-view-column>

<view wx:for="{{touristone}}">{{item}}</view>

</picker-view-column>

<picker-view-column>

<view wx:for="{{touristtwo}}">{{item}}</view>

</picker-view-column>

<picker-view-column>

<view wx:for="{{touristthree}}">{{item}}</view>

</picker-view-column>

</picker-view>

</view>

pages/pickerview/pickerview.js文件代码如下： 

Page({

//页面的初始数据

data: {

touristone: ［"五台山", "普陀山", "峨眉山"］,

touristtwo: ［"莫高窟", "云冈石窟", "龙门石窟"］,

touristthree: ［"法门寺", "佛光寺", "大相国寺"］,

value: ［0, 0, 0］,//设置默认的每个选项的数组下标

},

pickerviewChange: function(e) {

var v = e.detail.value;//获得数组的下标

var travel = ［］;//声明一个空数组，用于存放用户选择的值

travel.push(this.data.touristone［v［0］］);//追加用户选择第一个数组的元素

travel.push(this.data.touristtwo［v［1］］);//追加用户选择第二个数组的元素

travel.push(this.data.touristthree［v［2］］);//追加用户选择第三个数组的元素

this.setData({

travel: travel//将用户选择的值更新赋给travel

});

},

})

pages/pickerview/pickerview.wxss文件代码如下： 

picker-view {

width: 100%;

height: 400rpx;

}



图3.20pickerview组件小案例


【代码讲解】<pickerviewcolumn>组件是<pickerview>组件的二级组件，本例中pickerview.wxml文件<pickerview>组件包含了3个<pickerviewcolumn>组件，分别用于渲染3个景点。<pickerview>组件和<picker>组件可以达到同样的表现效果，读者可以根据自己的喜好选择使用。
图3.20(a)为页面初始效果； 图3.20(b)为用户选择完每个选项后，内容会显示在旅游计划下方。

3.4.8radio
<radio>为单选框组件，往往需要配合<radiogroup>组件来使用, <radio>标签嵌套在<radiogroup>当中。<radiogroup>组件只有一个属性，如表3.20所示。


表3.20<radiogroup>组件属性



属性名类型说明备注

bindchangeeventhandle<radiogroup>选中项发生变化时触发change事件，event.detail = {value:选中项radio的value}携带值为vent.detail = {value:选中项radio的value}

<radio>组件的属性如表3.21所示。


表3.21<radio>组件属性



属性名类型默认值说明
valuestring<radio>标识。当该<radio>选中时，<radiogroup>的change事件会携带<radio>的value
checkedbooleanfalse当前是否选中
disabledbooleanfalse是否禁用
colorcolorradio的颜色，同css的color

示例代码如下： 

<radio-group>

<radio value="tiger" checked="true">老虎</radio>

<radio value="elephant" disabled="true">大象</radio>

<radio value="lion">狮子</radio>

<radio value="penguin">企鹅</radio>

</radio-group>



图3.21单选框图示

其效果如图3.21所示。

如图3.21所示，“老虎”选项被选中，“大象”选项禁止选择，“狮子”和“企鹅”选项均未选中。<radiogroup>组件不允许多选，当前状态有且仅有一个选项被选中， <checkboxgroup>组件允许用户多选。

视频讲解


314radio组件小案例，运行效果如图3.22所示。

pages/radio/radio.wxml文件代码如下： 

<view class="demo-box">

<view class="title">14.radio小案例</view>

<view class="title">利用for循环批量生成</view>

<radio-group bindchange="radioChange">

<block wx:for="{{radioItems}}">

<radio value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}

</block>

</radio-group>

</view>



图3.22radio组件小案例


pages/radio/radio.js文件代码如下： 

Page({

data: {

radioItems: ［

{ name: 'tiger', value: '老虎' },

{ name: 'elephant', value: '大象' },

{ name: 'lion', value: '狮子', checked: 'true' },

{ name: 'penguin', value: '企鹅' },

{ name: 'elk', value: '麋鹿' },

{ name: 'swan', value: '天鹅' },

］

},

radioChange:function(e) {

console.log("radio发生change事件，携带value值为： ", e.detail.value)

}

})

pages/radio/radio.wxss文件代码如下： 

radio-group {

margin: 0 200rpx;

}


【代码讲解】本例首先在radio.js文件中的data中定义一个数组radioitems，用于记录单选框的名称name、值value及选中情况，并在radio.wxml文件中使用<radiogroup>标签包裹<radio>，使用<label>标签配合wx： for实现批量生成多个radio组件； 其次在<radiogroup>标签上绑定监听事件，在radio.js文件中自定义checkboxChange()函数，以达到每次被触发后都在Console控制台输出最新选中的所有值。图3.22(a)为模拟器效果； 图3.22(b)为控制台效果。

3.4.9slider
<slider>为滑动选择器，用于可视化地动态改变某变量的取值。其属性如表3.22所示。


表3.22<slider>组件属性



属性名类型默认值说明
minnumber0最小值
maxnumber100最大值
stepnumber1步长，取值必须大于0，并且可被(max-min)整除
disabledbooleanfalse是否禁用
valuenumber0当前取值
colorcolor#e9e9e9背景条的颜色(使用backgroundColor)
selectedcolorcolor#1aad19已选择的颜色(使用activeColor)
backgroundColorcolor#e9e9e9背景条的颜色
blocksizenumber28滑块的大小，取值范围为12~28
blockcolorcolor#ffffff滑块的颜色
showvaluebooleanfalse是否显示当前value
bindchangeeventhandle完成一次拖动后触发的事件，event.detail = {value: value}
bindchangingeventhandle拖动过程中触发的事件，event.detail = {value: value}

例如,设置一个自定义滑动条，最小值为10、最大值为100，在右侧显示当前数值，示例代码如下： 

<slider min="10" max="100" show-value />

其运行效果如图3.23所示。


图3.23滑动条图示




视频讲解

滑动条上的滑块向右边滑动时，右侧的数值会逐渐增大。

315slider组件小案例，运行效果如图3.24所示。

pages/slider/slider.wxml文件代码如下： 

<view class="demo-box">

<view class="title">14.slider小案例</view>

<view class="title">(1)滑动条右侧显示当前进度值</view>

<slider min="0" max="100" value="30" step="10" show-value="true" />

<view class="title">(2)自定义滑动条颜色与滑块样式</view>

<slider min="0" max="100" value="30" block-size="20" block-color="gray" activeColor="skyblue" />

<view class="title">(3)禁用滑动条</view>

<slider min="0" max="100" value="30" disabled="true" />

<view class="title">(4)增加滑动条监听事件</view>

<slider min="0" max="100" value="30" bindchange="sliderChange" />

</view>



图3.24slider组件小案例


pages/slider/slider.js文件代码如下： 

Page({

sliderChange(e) {

console.log("slider触发sliderChange事件，携带value值为： " + e.detail.value)

}

})

【代码讲解】本例在slider.wxml文件中设置4种情况，分别为滑动条右侧显示当前进度值、自定义滑动条颜色和滑块样式、禁用滑动条(无法改变当前数值)、增加滑动条监听事件。
图3.24(a)是页面初始状态，第4个滑动条为其滑块增加监听事件并在slider.js文件中自定义函数； 图3.24(b)所示，当第4个滑动条被拖动时，会在Console控制台上输出slider的最新值。

3.4.10switch
<switch>为开关选择器，常用于表单上的开关功能，其属性如表3.23所示。


表3.23<switch>组件属性



属性名类型默认值说明
checkedbooleanfalse是否选中
disabledbooleanfalse是否禁用
typestringswitch样式，有效值： switch, checkbox
bindchangeeventhandlevalue改变时触发change事件，event.detail = {value: value}
colorcolorswitch的颜色，同CSS的color

示例代码如下： 

<switch checked="true" />选中

<switch/>未选中

其运行效果如图3.25所示。


图3.25开关图示

当按钮在右边时为选中状态，当按钮在左边时为未选中状态。 


视频讲解

316switch组件小案例，运行效果如图3.26所示。


pages/switch/switch.wxml文件代码如下： 

<view class="demo-box">

<view class="title">16.swtich小案例</view>

<view class="title">增加switch事件监听</view>

<switch checked bindchange="switch1Change"></switch>

<switch bindchange="switch2Change"></switch>

</view>

pages/switch/switch.js文件代码如下： 

Page({

switch1Change1: function(e) {

console.log("switch1触发switch1Change事件，携带value值为： " + e.detail.value)

},

switch2Change2: function(e) {

console.log("switch2触发switch2Change事件，携带value值为： " + e.detail.value)

}

})



图3.26switch组件小案例


【代码讲解】本例在switch.wxml文件中放置两组<switch>标签，第1组设置属性checked实现选中状态，第2组默认为未选中状态，并为两个组件分别绑定监听事件； 在switch.js文件中自定义switch1Change()函数和switch2Change()函数，当switch组件被触发后会在Console控制台输出当前状态。
图3.26(a)为页面初始效果图； 图3.26(b)为Console控制台输出当前两组switch的选中状态。

3.4.11textarea
<textarea>为多行输入框，常用于多行文字的输入。其属性如表3.24所示。


表3.24<textarea>组件属性



属性名类型默认值说明
valuestring输入框的内容
placeholderstring输入框为空时占位符
placeholderstylestringswitch指定placeholder的样式，目前仅支持color、fontsize和fontweight
placeholderclassstringtextareaplaceholder指定placeholder的样式类
disabledbooleanfalse是否禁用
maxlengthnumber140最大输入长度，设置为-1的时候不限制最大长度
续表



属性名类型默认值说明
autofocusbooleanfalse自动聚焦，拉起键盘
focusbooleanfalse获取焦点
autoheightbooleanfalse是否自动增高，设置autoheight时，style.height不生效
fixedbooleanfalse如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true
cursorspacingnumber/string0指定光标与键盘的距离，单位： px(基础库2.4.0起支持)。取textarea底部的距离和cursorspacing指定的距离的最小值作为光标与键盘的距离
cursornumber指定focus时的光标位置（基础库1.5.0起支持）
showconfirmbarbooleantrue是否显示键盘上方带有“完成”按钮那一栏（基础库1.6.0起支持）
selectionstartnumber-1光标起始位置，自动聚集时有效，需与selectionend搭配使用（基础库1.9.0起支持）
selectionendnumber-1光标结束位置，自动聚集时有效，需与selectionstart搭配使用（基础库1.9.0起支持）
adjustpositionbooleantrue键盘弹起时，是否自动上推页面（基础库1.9.0起支持）
bindfocuseventhandle输入框聚焦时触发，event.detail={value, height}，height为键盘高度（基础库1.9.0起支持）
bindblureventhandle输入框失去焦点时触发，event.detail = {value, cursor}
bindlinechangeeventhandle输入框行数变化时调用，event.detail = {height: 0 heightRpx: 0, lineCount: 0}
bindinputeventhandle当键盘输入时，触发input事件，event.detail = {value,cursor, keyCode}，keyCode为键值，目前工具还不支持返回keyCode参数。bindinput处理函数的返回值并不会反映到textarea上
bindconfirmeventhandle点击完成时，触发confirm事件，event.detail = {value: value}



视频讲解

317textarea组件小案例，运行效果如图3.27所示。

pages/textarea/textarea.wxml文件代码如下： 

<view class="demo-box">

<view class="title">17.textarea小案例</view>

<view class="title">(1)文本框自动变高</view>

<textarea auto-height placeholder="允许自动变高" />

<view class="title">(2)禁用文本框</view>

<textarea placeholder="禁用该文本框无法输入内容" disabled/>

<view class="title">(3)自定义占位符样式</view>

<textarea placeholder="占位符颜色是天蓝色并加粗" placeholder-style="color:skyblue;font-weight:bold" />

</view>



图3.27textarea组件小案例



【代码讲解】本例在switch.wxml文件中放置3组<textarea>标签： 第1组通过设置属性autoheight，允许文本框在输入内容超过一行时自动变高； 第2组通过设置属性disabled，文本框被禁用无法进行输入； 第3组通过设置属性“color:skyblue;fontweight:bold”，使文本框中的占位符呈现天蓝色并加粗。
图3.27(a)为页面初始效果； 图3.27(b)中第1组文本框在输入的内容超过一行时，文本框高度会自动发生变化，第2组文本框被禁，第3组文本框的占位符样式发生改变。

3.5导航组件




<navigator>导航组件用于页面之间的跳转，是使用频繁的组件之一。其属性如表3.25所示。


表3.25<navigator>组件属性



属性名类型默认值说明
targetstringself是在哪个目标上发生跳转，默认为当前小程序
urlstringfalse当前小程序内的跳转链接
opentypenavigateswitch跳转方式

其中，opentype属性对应6种取值。其属性如表3.26所示。


表3.26opentype属性



属性名说明

navigate对应wx.navigateTo或wx.navigateToMiniProgram的功能
redirect对应wx.redirectTo的功能
switchTabnavigate跳转方式
reLaunch对应wx.reLaunch的功能
navigateBack对应wx.navigateBack的功能
exit退出小程序，target="miniProgram"时生效




视频讲解

318navigator组件小案例，运行效果如图3.28所示。

pages/navigator/navigator.wxml文件代码如下： 

<view class="demo-box">

<view class="title">18.导航组建navigator小案例</view>

<view class="title">(1)点击打开新页面</view>

<navigator url="../new/new" open-type="navigate">

<button type="primary">点击按钮跳转到新页面</button>

</navigator>

<view class="title">(2)点击重定向到新页面</view>

<navigator url="../redirect/redirect" open-type="redirect">

<button type="primary">点击按钮跳转到当前页面</button>

</navigator>

</view>



图3.28navigator组件小案例


在app.js文件中通过pages/new/new、pages/redirect/redirect注册两个新页面。
pages/new/new.wxml文件代码如下： 

<text>这里是新窗口打开的新页面，点击左上角图标可以返回上一页</text>

pages/redirect/redirect.wxml文件中代码如下： 

<text>重定向的新页面，无法返回到navigator.wxml页面</text>

【代码讲解】本例创建3个页面： navigator页面是项目首页； new和redirect页面是navigator页面中两种不同的跳转方式的着陆页。 
图3.28(a)为页面初始效果； 图3.28(b)页面利用opentype="navigate"方式跳转而来，着陆页左上角的返回图标可以返回上一页； 图3.28(c)页面由opentype="redirect"方式跳转而来，着陆页左上角没有返回图标。
3.6媒体组件




媒体组件用于播放媒体内容，常用的有音频组件、图片组件和视频组件。
3.6.1audio
<audio>为音频组件，用于网络音频的播放。其属性如表3.27所示。


表3.27<audio>组件属性



属性名类型默认值说明
idstringaudio组件的唯一标识符
srcstringfalse要播放音频的资源地址
loopbooleanfalse是否循环播放
controlsbooleanfalse是否显示默认控件
posterstring默认控件上的音频封面的图片资源地址，如果controls属性值为false，则设置poster无效
namestring未知音频默认控件上的音频名字，如果controls属性值为false，则设置name无效
authorstring未知作者默认控件上的作者名字，如果controls属性值为false，则设置author无效
binderroreventhandle当发生错误时触发error事件，detail = {errMsg: MediaError.code}
续表



属性名类型默认值说明
bindplayeventhandle当开始/继续播放时触发play事件
bindpauseeventhandle当暂停播放时触发pause事件
bindtimeupdateeventhandle当播放进度改变时触发imeupdate事件，detail = {currentTime, duration}
bindendedeventhandle当播放到末尾时触发ended事件

其中，binderror属性触发后的返回值MediaError.code共有4种取值： 


视频讲解

（1） 获取资源被用户禁止； 

（2） 网络错误； 
（3） 解码错误； 
（4） 不合适资源。
319audio组件小案例，运行效果如图3.29所示。


图3.29audio组件小案例


pages/audio/audio.wxml文件代码如下： 

<view class="demo-box">

<view class="title">19.audio小案例</view>

<view class="title">网络音频播放</view>

<view>

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" 

src="{{src}}" id="myAudio" controls loop>

</audio>

<button size="mini" bindtap="audioPlay">播放</button>

<button size="mini" bindtap="audioPause">暂停</button>

<button size="mini" bindtap="audio10">设置当前播放时间为10秒</button>

</view>

</view>

pages/audio/audio.js文件代码如下： 

Page({

onReady: function(e) {

//使用 wx.createAudioContext获取audio上下文context

this.audioCtx = wx.createAudioContext('myAudio')

},

data: {

poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M00000

3rsKF44GyaSk.jpg?max_age=2592000',

name: '此时此刻',

author: '许巍',

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=

ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384

E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053

BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',

},

audioPlay: function() {

this.audioCtx.play()//播放音乐

},

audioPause: function() {

this.audioCtx.pause()//暂停播放

},

audio10: function() {

this.audioCtx.seek(10)//回到10s

},

})

【代码讲解】本例先在audio.wxml文件中放置<audio>组件，然后设置3组<button>按钮，分别用于控制音频的播放、暂停以及定位到10s处的播放位置。<audio>组件的属性值在audio.js文件中定义，包括音频封面图片、歌曲名、演唱者和音频来源，并为3组按钮绑定点击事件，在audio.js文件中自定义audioPlay()函数、audioPause()函数和audio10()函数。
图3.29(a)为页面初始状态； 图3.29(b)为点击“播放”按钮后，网络音频呈现播放状态，音频处于0分23秒； 图3.29(c)为网络音频正在播放时，点击“设置当前播放时间为10秒”按钮后，音频回到0分10秒处播放。

3.6.2image
<image>为图片组件，常用于浏览图片，通过设置属性mode能够对图片进行裁剪和缩放，共有13种模式，其中4种是缩放模式，9种是裁剪模式，其属性如表3.28所示。


表3.28<image>组件属性



属性名类型默认值说明
srcstring图片资源地址，支持云文件ID(基础库2.2.3起支持)
modestring'scaleToFill'图片裁剪、缩放的模式
lazyloadbooleanfalse图片懒加载，在即将进入当前屏幕可视区域时才开始加载（基础库1.5.0起支持）
binderroreventhandle当错误发生时，发布到AppService的事件名，事件对象event.detail = {errMsg: 'something wrong'}
bindloadeventhandle当图片载入完毕时，发布到AppService的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

image组件默认宽度300px、高度225px。image组件中二维码/小程序码图片不支持长按识别，仅在wx.previewImage()中支持长按识别。
mode有效值的属性名及说明如表3.29所示。


表3.29mode有效值的属性名及说明



属性名说明

缩放模式
scaleToFill不保持纵横比例缩放图片，使图片的宽、高完全拉伸至填满image元素
aspectFit保持纵横比例缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
aspectFill保持纵横比例缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
widthFix宽度不变，高度自动变化，保持原图宽、高比不变
裁剪模式
top不缩放图片，只显示图片的顶部区域
bottom不缩放图片，只显示图片的底部区域
center不缩放图片，只显示图片的中间区域
left不缩放图片，只显示图片的左边区域
right不缩放图片，只显示图片的右边区域
top left不缩放图片，只显示图片的左上边区域
top right不缩放图片，只显示图片的右上边区域
bottom left不缩放图片，只显示图片的左下边区域
bottom right不缩放图片，只显示图片的右下边区域



视频讲解

320image组件小案例。
pages/image/image.wxml文件代码如下:

<view class="demo-box">

<view class="title">20.audio小案例</view>

<view class="title">(1)不保持纵横比缩放图片，使图片完全适应</view>

<image src="{{src}}" mode="scaleToFill"></image>

<view class="title">(2)保持纵横比缩放图片，使图片的长边能完全显示出来</view>

<image src="{{src}}" mode="aspectFit"></image>

<view class="title">(3)保持纵横比缩放图片，只保证图片的短边能完全显示出来</view>

<image src="{{src}}" mode="aspectFill"></image>

<view class="title">(4)宽度不变，高度自动变化，保持原图宽高比不变</view>

<image src="{{src}}" mode="widthFix"></image>

<view class="title">(5)不缩放图片，只显示图片的顶部区域</view>

<image src="{{src}}" mode="top"></image>

<view class="title">(6)不缩放图片，只显示图片的底部区域</view>

<image src="{{src}}" mode="bottom"></image>

<view class="title">(7)不缩放图片，只显示图片的中间区域</view>

<image src="{{src}}" mode="center"></image>

<view class="title">(8)不缩放图片，只显示图片的左边区域</view>

<image src="{{src}}" mode="left"></image>

<view class="title">(9)不缩放图片，只显示图片的右边区域</view>

<image src="{{src}}" mode="right"></image>

<view class="title">(10)不缩放图片，只显示图片的左上边区域</view>

<image src="{{src}}" mode="top left"></image>

<view class="title">(11)不缩放图片，只显示图片的右上边区域</view>

<image src="{{src}}" mode="top right"></image>

<view class="title">(12)不缩放图片，只显示图片的左下边区域</view>

<image src="{{src}}" mode="bottom left"></image>

<view class="title">(13)不缩放图片，只显示图片的右下边区域</view>

<image src="{{src}}" mode="bottom right"></image>

</view>

pages/image/image.wxss文件代码如下： 

image {

width: 300rpx;

height: 300rpx;

margin-left: 150rpx;

}

pages/image/image.js文件代码如下： 

Page({

data: {

src: "/images/xingkong.jpg"

}

})

本例在images文件夹下存放素材图片xingkong.jpg，图片选择梵高的名画《星空》，原图如图3.30所示。


图3.30图片素材


运行效果如图3.31所示。



图3.31image组件小案例


【代码讲解】本例在image.wxml文件中放置了13组<image>组件，通过设置不同的mode属性值，实现对图片的缩放和剪裁。
3.6.3video
<video>为视频组件，用于播放本地或网络的视频资源，视频的默认宽度为300px、高度为225px，视频组件提供弹幕功能，其属性如表3.30所示。


表3.30<video>组件属性



属性名类型默认值说明
srcstring要播放视频的资源地址，支持云文件ID(2.3.0)
durationnumber指定视频时长
controlsbooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
danmulistArray.<object>弹幕列表
enabledanmubooleanfalse是否展示弹幕，只在初始化时有效，不能动态变更
autoplaybooleanfalse是否自动播放
loopbooleanfalse是否循环播放
mutedbooleanfalse是否静音播放
initialtimenumber指定视频初始播放位置
pagegesturebooleanfalse在非全屏模式下，是否开启亮度与音量调节手势
directionnumber设置全屏时视频的方向，不指定则根据宽、高比自动判断
showprogressbooleantrue若不设置，宽度大于240时才会显示
showfullscreenbtnbooleantrue是否显示全屏按钮
showplaybtnbooleantrue是否显示视频底部控制栏的播放按钮
showcenterplaybtnbooleantrue是否显示视频中间的播放按钮
enableprogressgesturebooleantrue是否开启控制进度的手势
objectfitstringcontain当视频大小与video容器大小不一致时，视频的表现形式
posterstring视频封面的图片网络资源地址或云文件ID。若controls属性值为false则设置poster无效
showmutebtnbooleanfalse是否显示静音按钮
titlestring视频的标题，全屏时在顶部展示
playbtnpositionstringbottom播放按钮的位置
enableplaygesturebooleanfalse是否开启播放手势，即双击切换播放/暂停
autopauseifnavigatebooleantrue当跳转到其他小程序页面时，是否自动暂停本页面的视频
续表



属性名类型默认值说明
autopauseifopennativebooleantrue当跳转到其他微信原生页面时，是否自动暂停本页面的视频
vslidegesturebooleanfalse在非全屏模式下，是否开启亮度与音量调节手势(同pagegesture)
vslidegestureinfullscreenbooleantrue在全屏模式下，是否开启亮度与音量调节手势
bindplayeventhandle当开始/继续播放时触发play事件
bindpauseeventhandle当暂停播放时触发pause事件
bindendedeventhandle当播放到末尾时触发ended事件
bindtimeupdateeventhandle播放进度变化时触发，event.detail = {currentTime, duration}。触发频率250ms一次
bindfullscreenchangeeventhandle视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction有效值为vertical或horizontal
bindwaitingeventhandle视频出现缓冲时触发
binderroreventhandle视频播放出错时触发
bindprogresseventhandle加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比



视频讲解

321video组件小案例，运行效果如图3.32所示。
pages/video/video.wxml文件代码如下： 

<view class="demo-box">

<view class="title">21.video小案例</view>

<video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" 

enable-danmu controls></video>

<view class="weui-label">弹幕内容:</view>

<input bindblur="bindInputBlur" type="text" placeholder="在此处输入弹幕内容" />

<button size="mini" bindtap="bindPlay">播放</button>

<button size="mini" bindtap="bindPause">暂停</button>

<button bindtap="bindSendDanmu" size="mini" formType="submit">发送弹幕</button>

</view>

pages/video/video.js文件代码如下:

Page({

onReady: function(res) {

this.videoContext = wx.createVideoContext('myVideo')

},

inputValue: '',//创建一个空字符串用于保存弹幕内容

data: {

src: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=

30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e002040128

82540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4

ff02024ef202031e8d7f02030f42400204045a320a0201000400",

danmuList: ［{

text: "第 1s 出现的弹幕",

color: "#ff0000",

time: 1

},

{

text: "第 2s 出现的弹幕",

color: "#ff00ff",

time: 2

}

］

},

bindInputBlur: function(e) {

this.inputValue = e.detail.value//获取输入内容

},

bindSendDanmu: function() {

this.videoContext.sendDanmu({

text: this.inputValue,//发送弹幕 

})

},

bindPlay: function() {

this.videoContext.play()//播放视频

},

bindPause: function() {

this.videoContext.pause()//暂停视频

},

})



图3.32video组件小案例


pages/video/video.wxss文件代码如下:

input {

border: 1px solid gray;

}

【代码讲解】本例在video.wxml文件中放置<video>组件并设置其相关属性，<input>组件用来输入弹幕内容，通过3组<button>组件分别绑定点击事件bindPlay()、bindPause()、bindSendDanmu()来实现视频播放、暂停和发送弹幕，并在video.js文件中定义视频播放的资源地址及自定义事件函数。
图3.32(a)为初始化界面，呈现暂停状态； 图3.32(b)为点击“播放”按钮后，视频呈现播放状态； 图3.32(c)为在输入框输入内容“12345678”并点击“发送弹幕”按钮后，输入框中的内容会呈现在屏幕上。


3.7地图组件




<map>为地图组件，用于地图的展示。小程序使用的地图来自腾讯地图，地图组件为用户提供视角中心点地位、缩放层级的设置、标记物的增加以及内部组件的事件绑定，其属性如表3.31所示。


表3.31<map>组件属性



属性名类型默认值说明
longitudenumber中心经度
latitudenumber中心纬度
scalenumber16缩放级别，取值范围为3~20
markerArray.<marker>弹幕列表（基础库1.0.0起支持）
coverArray.<cover>即将移除，请使用markers
polylineArray.<polyline>路线
circleArray.< circles >圆
controlArray.<control>false控件(即将废弃，建议使用coverview代替)
includepointArray.<point>缩放视野以包含所有给定的坐标点
showlocationbooleanfalse显示带有方向的当前定位点
bindtapeventhandle点击地图时触发
bindmarkertapeventhandle 点击标记点时触发，会返回marker的id
bindcontroltapeventhandle点击控件时触发，会返回control的id
bindcallouttapeventhandle点击标记点对应的气泡时触发，会返回marker的id
bindupdatedeventhandle视野发生变化时触发
bindregionchangeeventhandle是否开启控制进度的手势（基础库1.9.0起支持）
bindpoitapeventhandle点击地图poi点时触发

其中，marker为标记点，用于在地图上显示标记的位置，其属性如表3.32所示。


表3.32marker属性



属性名说明类型备注

id标记点idnumbermarker点击事件回调会返回此id。建议为每个marker设置number类型id，保证更新marker时有更好的性能
latitude纬度number浮点数，范围为-90°~90°
longitude经度number浮点数，范围为-180°~180°
title标注点名stringvalue改变时触发change事件，event.detail = {value: value}
iconPath显示的图标string项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录； 也支持临时路径和网络图片
rotate旋转角度number顺时针旋转的角度，范围为0°~360°，默认为0
alpha标注的透明度number默认为1，无透明，范围为0~1
width标注图标宽度number/string默认为图片实际宽度
height标注图标高度number/string默认为图片实际高度
callout自定义标记点上方的气泡窗口Object支持的属性见表3.33，可识别换行符
label为标记点旁边增加标签Object支持的属性见表3.34，可识别换行符
anchor经度和纬度在标注图标的锚点，默认底边中点{x, y}，x表示横向(0~1)，y表示纵向(0~1)。{x: .5, y: 1}表示底边中点

marker上的气泡callout，其属性如表3.33所示。


表3.33callout属性



属性名说明类型最低版本

content文本string1.2.0
color文本颜色string1.2.0
fontSize文字大小number1.2.0
borderRadius边框圆角number1.2.0
borderWidth边框宽度number1.2.0
borderColor边框颜色string1.2.0
bgColor背景色string1.2.0
padding文本边缘留白number1.2.0
display'BYCLICK':点击显示; 'ALWAYS':常显string1.2.0
textAlign文本对齐方式,有效值: left、right、center、stringstring1.6.0


marker上的气泡label，其属性如表3.34所示。


表3.34label属性



属性名说明类型最低版本

content文本string1.2.0
color文本颜色string1.2.0
fontSize文字大小number1.2.0
borderRadius边框圆角number1.2.0 
borderWidth边框宽度number2.3.0
borderColor边框颜色string2.3.0
bgColor背景色string1.2.0
padding文本边缘留白number1.2.0
display'BYCLICK':点击显示; 'ALWAYS':常显string1.2.0
textAlign文本对齐方式，有效值: left、right、centerstring1.6.0

polyline用于指定一系列坐标点，从数组第一项连线至最后一项,其属性如表3.35所示。


表3.35polyline属性



属性名说明类型备注

points经度和纬度数组array［{latitude: 0, longitude: 0}］
color线的颜色string十六进制
width线的宽度number
dottedLine带箭头的线boolean默认值为false 
arrowLine边框宽度number默认值为false，开发者工具暂不支持该属性
arrowIconPath更换箭头图标string在arrowLine为true时生效
borderColor线的边框颜色string
borderWidth线的厚度number

circle属性用于在地图上显示圆，通过设定中心点的经度、纬度和半径来绘制一个圆形图案作为地图上的标记物，其属性如表3.36所示。


表3.36circle属性



属性名说明类型备注

latitude纬度number浮点数，范围为-90°~90°
longitude经度number浮点数，范围为-180°~180°
color描边的颜色string十六进制
fillColor填充颜色string十六进制
radius半径number
strokeWidth描边的宽度number



视频讲解

322map组件小案例，程序运行效果如图3.33所示。
pages/map/map.wxml文件代码如下： 

<map id="myMap" style="width: 100%;height: 300px" latitude="{{latitude}}" longitude="{{longitude}}"  scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}" show-location></map>

<view class="content">

<button size="mini" bindtap="reduce">-</button>

<button size="mini" bindtap="default">默认缩放比例</button>

<button size="mini" bindtap="add">+</button>

</view>

<view class="content">

<button size="mini" bindtap="includePoints">按includePoints缩放视野</button> </view>



图3.33map组件小案例


pages/map/map.js文件代码如下： 

Page({

data: {

latitude: 23.020670, longitude: 113.751790,

scale:16,

markers: ［{

latitude: 23.020670, longitude: 113.751790,

iconPath: "/images/location.png",

label: {

content: "东莞市" }

}］,

polyline: ［{

points: ［{

longitude: 113.3245211,

latitude: 23.10229

}, {

longitude: 113.324520, latitude: 23.21229

}］,

color: "#FF0000DD",

width: 2,

dottedLine: true

}］

},

onReady: function(e) {

this.mapCtx = wx.createMapContext("myMap")

},

default:function()

{

this.setData({ scale: 16, })

},

reduce: function() {

this.setData({

scale: this.data.scale-1,

})

},

add: function() {

this.setData({

scale: this.data.scale +1,

})

},

includePoints: function() {//缩放视野

this.mapCtx.includePoints({

padding: ［10］,

points: ［{

latitude: 23.0403, longitude: 113.7446,

}, {

latitude: 22.9983, longitude: 113.7724,

}］

})

}

})

【代码讲解】本案例共定义4个函数： default、reduce、add和includePoints，其中，default函数把地图设置为默认的16倍缩放比例，reduce和add两个函数实现缩放比例的加一和减一，includePoints函数指定(23.0403,113.7446)和(22.9983,113.7724)两个点，此时map地图缩放比例的依据就是需要在地图中包含这两个点，即这两个点需作为map地图4个顶点中的两个。
图3.33（a）为默认的16倍缩放比例效果； 图3.33（b）为17倍缩放比例效果； 图3.33（c）为包含(23.0403,113.7446)和(22.9983,113.7724)两个点时的缩放比例效果。
3.8实训项目——问卷调查






视频讲解

本实训项目是对微信小程序学习的问卷调查，知识点主要涉及表单组件的使用和表单数据在逻辑端JS中的获取。项目中涉及的表单组件有<form><radiogroup><radio> <checkboxgroup><checkbox><label> <slider><textarea>和<button>等。
项目在模拟器中的效果如图3.34所示； 图3.35是Console控制台上显示的JS接收到的用户输入数据。 
pages/survey/survey.wxml文件代码如下：  

<view class="content">

<form bindsubmit="onSubmit" bindreset="onReset">

<view class="title">1.你现在大几？</view>

<radio-group bindchange="universityChange">

<radio value="大一"/>大一

<radio value="大二"/>大二

<radio value="大三"/>大三

<radio value="大四"/>大四

</radio-group>

<view class="title">2.你使用手机最大的用途是什么？</view>

<checkbox-group bindchange="mobilChange">

<label><checkbox value="社交"/>社交</label>

<label>

<checkbox value="网购"/>网购</label>

<label>

<checkbox value="学习"/>学习</label><label>

<checkbox value="其他"/>其他</label>

</checkbox-group>

<view class="title">3.平时每天使用手机多少小时？</view>

<slider min="0" max="24" show-value bindchange="timechange" />

<view class="title">4.你之前使用过微信小程序吗？</view>

<radio-group bindchange="programChange">

<radio value="无"/>无

<radio value="有"/>有

</radio-group>

<view class="title">5.谈谈你对微信小程序未来发展的看法</view>

<textarea auto-height placeholder="请输入你的看法" name="textarea" />

<button size="mini" form-type="submit">提交</button>

<button size="mini" form-type="reset">重置</button>

</form>

</view>



图3.34问卷调查示例图




图3.35Console控制台显示数据


pages/survey/survey.js文件代码如下： 

Page({

universityChange: function(e) {

console.log("你选择的现在大几： ", e.detail.value)

},

mobilChange: function(e) {

console.log("你选择使用手机的最大用途是： ", e.detail.value)

},

timechange: function(e) {

console.log("你选择的每天使用手机的时间是： ", e.detail.value + "小时")

},

programChange: function(e) {

console.log("你选择的是否使用过微信小程序： ", e.detail.value)

}, 

onSubmit(e) {

console.log("你输入的对小程序发展前途的看法是"+e.detail.value.textarea)

},

onReset() {

console.log("表单已被重置")

}

})

pages/survey/survey.wxss文件代码如下：  

.content {

padding: 30rpx;

}

button {

margin: 40rpx;

}

.title {

margin-top: 20rpx;

}

【代码讲解】本项目是常用的问卷调查页面，“你现在大几？”和“你之前使用过微信小程序吗?”两项使用了<radiogroup>和<radio>组件； “你使用手机最大的用途是什么？”使用了<checkboxgroup>和<checkbox>组件； “平时每天使用手机多少个小时？”使用了<slider>组件； “谈谈你对微信小程序未来发展的看法”使用了<textarea>组件； “提交”“重置”按钮使用了<button>组件； 而<form>和<label>组件属于控制类组件，没有在页面中显示效果。读者需认真学习JS页面获取表单数据的方法，为后续编程做准备。