第5章〓小程序组件 微课视频 本 章主要介绍小程序组件的相关内容，小程序官方为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。组件是视图层的基本组成单元，其自带一些功能与微信风格的样式。一个组件通常包括开始标记和结束标记， 属性用来修饰这个组件，内容在两个标记之内。整体用法类似HTML中的标记，由于小程序组件内容很多，不好记忆，在学习过程中可以通过类比实现相应功能的HTML标记的方法来记忆。 如下代码所示，为小程序的一个组件，是开始标记，是结束标记，classname是属性，content是内容。 1. 2. Content 3. 5.1视图容器组件 5.1.1view组件 view组件是最基本的组件，其类似网页开发中的div标记，view组件是块级元素，显示时独占一行，宽度默认继承 自父级，并且高度、宽度、外边距及内边距都可以由开发者控制，如图51所示。 图51view组件 view组件可设置的属性如图52所示。 图52view组件属性 当设置hoverclass属性时，可以指定该元素在鼠标按下时的样式，鼠标弹起后该样式消失，例如，给view标签设置鼠标按下时背景颜色变为黄色，代码及效果如图53所示。 图53鼠标按下的代码及效果 5.1.2pagecontainer组件 pagecontainer组件可以部署一个页面容器，在页中加载出这个页的子页面。 小程序如果需要在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等)， 往往需要避免用户进行返回操作时直接离开当前页面， 只关闭当前弹出的组件。为此，微信小程序 提供了“假页”容器组件，其效果类似于popup弹出层，页面内存在该容器时， 用户进行返回操作只能关闭该容器而不关闭页面。返回操作包括三种情形，即右滑手势、安卓物理返回键和调用 navigateBack 接口。 pagecontainer组件属性如图54所示。 图54pagecontainer组件属性 5.1.3scrollview组件 scrollview组件可以设置可滚动的视图区域，其属性如图55所示。 图55scrollview组件属性 给scrollview组件设置scrolly属性可使之实现竖向滚动，设置scrollx属性可使之实现横向滚动，设置竖向滚动时，使用scrolly="true"或scrolly这两种方式都可以，设置横向滚动同理。 需要注意的是，使用竖向滚动时，需要给scrollview设置一个固定高度，这个固定高度需要小于内容的宽度 才能使滚动条显现，否则看不出效果，如图56所示。 图56scrollview组件注意事项 给scrollview设置bindscrolltolower属性可以绑定当滚动条滚动到底部时触发的事件， 如图57所示，当滚动条滑到底部时，将弹出提示框“滚动条滑到底了！”。 图57bindscrolltolower属性 注意： 在实际测试过程中，在滑向底部的过程中，该绑定事件会触发多次，并不是滑到底部只触发一次，这算是一个bug，但是开发者可以通过函数节流的方法来限制触发次数。 5.1.4coverview组件和coverimage组件 (1) coverview是覆盖在原生组件之上的文本视图。 图58coverview组件实现效果 目前原生组件均已支持同层渲染，因此建议使用view替代之。该组件可覆盖的原生组件包括 map、video、canvas、camera、liveplayer、livepusher。 另外，该组件 只支持嵌套coverview、coverimage，并可在coverview 中使用 button。 例如，如图58所示地图上的三个不同颜色的浮层就是用coverview实现的。 (2) coverimage是覆盖在原生组件之上的图像视图。 目前原生组件均已支持同层渲染，建议使用image替代之。 补充知识： 原生组件的概念如图59所示。 图58原生组件的概念 5.1.5moveablearea组件和moveableview组件 movablearea组件用于设置可移动区域，而movableview组件则是可移动的视图容器， 其在页面中可以拖拽滑动。movableview组件必须在movablearea组件中，并且必须是直接子结点，否则 其将不能移动。 写法举例如下所示。 1. 2.text 3. movableview属性如图510所示。 图510movableview组件属性 注意： movableview必须设置width和height属性，其默认值为10px。movableview默认为绝对定位， top和left属性为0px。 5.1.6swiper组件和swiperitem组件 swiper是轮播图组件，其中只可放置swiperitem组件（即轮播元素组件），示例如下。 1. 2. 3. 4. 5. 微信小程序的轮播图 默认样式为宽100%，高150px，而图像的默认宽高为320px*240px，且swiper组件的高度无法由内容撑开，所以要使得轮播图和原图贴合，需要设置轮播图的高度，使轮播图的宽度与高度的比值等于原图像宽高比，如此才能实现等比例的缩放，计算公式如下所示。 1.//swiper的高度 / swiper的宽度 = 原图的宽度 / 原图的高度 2.//所以： swiper的高度 = swiper的宽度 * 原图的宽度 / 原图的高度 3.//如原图为1125*352px 4.//则： 5.swiper { 6.width: 100%; 7.height: calc(100vw*253/1125); 8.} 9.image { 10.width: 100% 11.} 12.//同时设置image的mode属性为widthFix swiper组件属性如下。 autoplay属性定义是否自动切换图像，默认为false。 interval属性定义自动切换的时间间隔，默认为5s。 circular属性定义是否循环轮播，默认为false。 indicatordots属性定义是否显示面板指示点，默认为false。 indicatorcolor属性定义指示点未选中时的颜色。 indicatoractivecolor属性定义指示点选中时的颜色。 5.2文本组件 5.2.1text组件 text组件类似网页开发中的span标记，是一种行内元素，其默认宽度为其本身内容的宽度，相邻行内元素在 同一行时，该行可以显示多个元素，为其直接设置宽高是无效的，如图511所示。 图511text组件的无效设置 text组件只能内嵌text组件，长按text组件时，其中的文本可以被复制(只有该标记有这个功能)，该组件还支持对空格、回车进行编码。 text组件属性如图512所示。 图512text组件属性 5.2.2richtext组件 richtext组件为 富文本组件，所谓富文本指可支持图像、各种特殊标点、分段等格式的内容，而纯文本则只支持文字和基本的标点。 richtext组件的 具体用法是将富文本 解析成对应的标记，其值可以是字符串或数组，具体示例如下所示。 1.// 1 index.wxml 加载节点数组 2. 3.// 2 加载字符串 4. 7. 8.// index.js 9.Page({ 10.data: { 11.nodes: ［{ 12.name: 'div', //name标签名 13.attrs: { //attrs属性 14.class: 'div_class', 15.style: 'line-height: 60px; color: red;' 16. }, 17.children: ［{ //children子节点列表 18.type: 'text', //文本内容 19.text: 'Hello World!' 20. }］ 21. }］ 22.}, 23.tap() { 24.console.log('tap') 25.} 26.}) 注意： richtext组件的nodes属性不应为字符串值，其会影响性能； attrs属性不支持id，但支持class; name属性对大小写不敏感。另外， richtext组件会屏蔽所有子结点事件，且如果其包含不受信任的HTML结点，则该结点及其所有子结点将会无法显示。再有， richtext组件内的img标记仅支持网络图像。 5.3表单组件 5.3.1button组件 button组件可以创建一个按钮，如图513所示。 图513button组件按钮 button组件的 size属性可以设置按钮的大小，可选值有default（默认大小）、mini（小尺寸）等，如图514所示。 图514size属性有效值 button组件的 type属性可以设置按钮的样式类型，可选值有默认default（灰色）、primary（绿色）、warn（红色）等，如图515所示。 图515type属性有效值 button组件的 disabled属性可以设置是否禁用按钮，默认为false； loading属性可以设置名称前是否带loading图标，默认为false，如图516所示。 图516loading属性有效值 formtype属性用于form组件，属性值有submit（提交表单）、rest（重置表单）等。 opentype属性用于设定微信开放能力，如图517所示。 图517opentype属性有效值 button组件的opentype属性值如下。 (1) contact： 打开客服对话功能，需要在微信小程序的后台做对应支持性配置。 实现过程： 要将小程序的appid由测试号改为开发者的appid，登录微信小程序官网，添加客服微信(即添加当前小程序的客服微信号，客服是某个小程序的开发方的工作人员)，然后用真机调试。 (2) share： 转发当前的小程序页面给微信联系人，但不能将之分享到朋友圈。 (3) getPhoneNumber： 获取当前用户的手机号，如果不是企业的小程序账号，则没有这一权限 。该功能需要绑定bindgetphonenumber事件，然后从事件的回调函数中通过参数来获取信息。但是获取到的信息是经过加密的，需要用户自己在小程序的后台服务器中解析手机号码，然后返回到小程序中。 (4) getUserInfo： 获取当前用户的个人信息，需要绑定bindgetuserinfo事件，然后从事件的回调函数中通过参数来获取信息，信息没有加密(该属性值已失效，现在需要采用wx.getUserProfile的api来获取用户信息)。 (5) launchApp： 在小程序中直接打开App。需要先在App中通过某个链接打开小程序，然后才可以在小程序中使用launchApp 重新打开App。 (6) openSetting： 打开小程序内置的授权页面。该页面只会出现用户曾经单击确认过的权限。 (7) feedback： 打开小程序内置的意见反馈页面。该页面只能通过真机调试打开。 5.3.2form组件 form组件即表单，其可以将组件内用户输入的switch、input、checkbox、slider、radio、picker等表单提交后台。 当单击form表单中formtype属性值为submit的button组件时， 微信小程序 会将表单组件中的 value 值提交，开发者需要为表单组件加上name属性，以该属性值作为提交的key。 以下WXML代码实现了一个form表单。 1. 2. 3.
4. 5.switch 6. 7. 8. 9. 10.radio 11. 12. 13. 14. 15. 16. 17. 18.checkbox 19. 20. 21. 22. 23. 24. 25. 26.slider 27. 28. 29. 30. 31.input 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45.
46. 47. 48. 具体实现效果如图518所示。 图518form组件的实现效果 上文代码同时为表单绑定了submit（提交表单）事件和reset（重置表单）事件，reset事件可以将表单中用户已经修改过的内容重置为初始状态，submit事件可以提交表单中用户填写好的内容，例如，用户可以提交如图519所示的内容，并在submit绑定事件的回调函数中打印输出这些提交的内容。 图519submit(提交表单)事件和reset(重置表单)事件 form表单属性如图520所示，bindsubmit和catchsubmit属性效果相同，bindreset和catchreset属性效果相同。 图520form表单属性 5.3.3input组件 input组件可以创建输入框。其具体属性如图521所示。 图521input组件属性 该组件的 value属性可以设置输入框的初始内容，如设置value为123，则输入框的初始内容就会显示为123，如图522所示。 图522value属性用法 type属性的合法值有text（文本）输入、number（数字）输入、idcard（身份证）输入、digit （带小数点的数字）输入、safepassword（密码安全）输入、nickname（昵称）输入等几种。 password属性可以设置输入的内容为密码类型， 当其值为true时，将会把用户输入的内容转换为圆点，如图523所示。 图523password属性用法 placeholder属性可以设置输入框为空时的占位符，当聚焦输入框并输入内容时，占位符会消失 ，如图524所示。 图524placeholder属性用法 disabled属性可以设置是否禁用输入框。 maxlength属性可以设置输入框最大允许的输入长度，例如，设置maxlength="5"时，输入框只能输入5个字符，设置为 -1时将不限制最大输入长度，如图525所示。 图525maxlength属性用法 5.3.4textarea组件 textarea组件与input组件类似，只不过其呈现为多行输入框，如图526和图527所示。 图526textarea组件事例 图527textarea组件属性 该组件的 value属性可以设置输入框的初始内容，其值value为123时，输入框初始内容会就显示为123。 placeholder属性可以设置输入框为空时的占位符，当聚焦输入框并打字输入时，占位符会消失。 disabled属性可以设置是否禁用输入框。 maxlength属性可以设置输入框最大允许的输入长度，例如，设置maxlength="5"时，输入框只能输入5个字符，设置为-1 时将不限制最大输入长度。 5.3.5checkbox组件和checkboxgroup组件 checkbox组件可以创建复选框，实现效果如图528所示。 图528checkbox组件实现效果 checkboxgroup组件可以包裹多个checkbox组件，实现复选框组，如图529所示。 图529checkboxgroup组件实现效果 checkbox组件的属性如图530所示。 图530checkbox组件的属性 checkbox组件的value属性可以作为复选框的标识，当checkbox组件和checkboxgroup组件联合使用时，给checkboxgroup组件绑定change事件，则checkbox组件选中或取消均将触发change事件，具体示例如图531所示，为checkboxgroup组件 设置change绑定事件，事件触发时控制台响应输出绑定事件传递的参数。 图531为checkboxgroup组件设置change绑定事件 当选中第一个复选框时，控制台响应输出如图532所示，可以看到，绑定事件触发时传递的value属性值是一个对象，里面的detail对象字段中value属性值存储了用户选中的复选框的value属性值。 图532选中第一个复选框 当用户再次选中第二个复选框时，detail下的value数组应该会再增加一个元素“c2”，如图533所示果然如此。 图533再次选中第二个复选框 checkbox组件的 checked属性表示当前复选框是否选中，将其设置为默认选中，例如，给第一个和第三个复选框加上checked属性，可以看到复选框初始即为选中状态，如图534所示。 图534checked属性实现效果 如下代码实现了一组选择水果的复选框。 1.//WXML 2. 3. 4. 5.{{ item.name }} 6. 7. 8. 9. 10.//{{checkedList}}这个写法相当于把数组元素遍历出来 11.选中的水果:{{checkedList}} 12. 13.//JS 14.page({ 15.data: { 16.list: ［ 17.{ 18.id: 0, 19.name: "apple", 20.value: "apple" 21.}, 22.{ 23.id: 1, 24.name: "grape", 25.value: "grape" 26.}, 27.{ 28.id: 2, 29.name: "bananer", 30.value: "bananer" 31.}, 32.］, 33.checkedList: ［］ 34.}, 35.//复选框的选中事件 36.handleItemChange(e){ 37.// 1获取被选中的复选框的值 38.const checkedList= e . detail. value; 39.// 2进行赋值 40.this.setData({ 41.checkedList 42.}) 43.} 44.}) 5.3.6picker组件和pickerview组件 picker组件可以创建一个从页面底部弹起的滚动选择器，属性如图535所示。 图535picker组件属性 picker组件的 mode属性的合法值有selector（普通选择器）、multiSelector（多列选择器）、time（时间选择器）、date （日期选择器）、region（地区选择器），如图536~图540所示。除了上述通用的属性， 不同的mode属性值可使picker拥有不同的属性，如图541~图545所示。 图536selector普通选择器 图537multiSelector多列选择器 图538time时间选择器 图539date日期选择器 图540region地区选择器 图541普通选择器属性 图542多列选择器属性 图543时间选择器属性 图544日期选择器属性 图545省市区选择器属性 5.3.7radio组件和radiogroup组件 radio组件可以创建单选框，效果如图546所示。 图546radio组件实现效果 radio组件的属性如图547所示。 图547radio组件的属性 代码实例如下，这段代码可令用户 选择性别并输出当前选择的性别。 1.//radio标签必须要和父元素radio-group一起使用 2.//属性value为选中单选框的值 3.//需要给radio-group绑定change事件 4.//如何在页面中显示选中的值？ 5.//WXML 6. 7.男 8.女 9. 10.{{gender}} 11. 12.//JS 13.Page({ 14.date: { 15.gender: "" 16.}, 17.handelChange(e) { 18.this.setDate({ 19.gender: e.detail.value 20.}) 21.} 22.}) 5.3.8slider组件 slider组件可以创建一个滑动选择器，即滑动条，具体效果如图548所示。 图548滑动条样式 slider组件的属性如图549所示。 图549slider组件的属性 slider组件的 min属性和max属性可以定义选择器的最小和最大值，step可以定义步长，可以将之理解为每次滑动的间距，例如，如 图550所示代码定义了一个最小为1，最大为10，滑动步长为2，每次滑动两格的滑动选择器。 图550min、max和step等属性的实现效果 5.3.9switch组件 switch组件可以创建一个开关选择器，具体样式如图551和图552所示。 图551开关样式(关闭) 图552开关样式（打开） switch组件的属性如图553所示。 图553switch组件的属性 switch组件的checked属性可以设置初始默认状态是否选中，如图554所示。 图554checked属性的实现效果 5.4媒体组件 5.4.1拍照组件camera camera组件用于启动 系统相机。若需要使用扫二维码的功能，用户需升级微信客户端至6.7.3版本。该组件需要用户授权 scope.camera。 camera组件的属性如图555所示。 图555camera组件的属性 该组件的 mode属性的合法值有normal（相机模式）、scanCode（扫码模式）等； resolution属性的合法值有low、medium、high等； deviceposition属性的合法值有front（前置摄像头）、back（后置摄像头）等； flash属性的合法值有auto（自动）、on（打开）、off（关闭）、torch（常量）等； framesize属性的合法值有small（小尺寸帧数据）、medium（中尺寸帧数据）、large（大尺寸帧数据）等。 注意： ①同一页面只能插入一个camera组件。②onCameraFrame接口将根据framesize属性值返回不同尺寸的原始帧数据，与Camera组件展示的图像不同，其实际像素值由系 统决定。 代码实例如下。 1. 5.4.2图像组件image 图像组件用于在页面中插入一幅图像，该组件插入的图像默认宽度为320px，高度为240px，支持 JPG、PNG、SVG、WEBP、GIF 等格式。image组件中二维码/小程序码图像不支持长按识别。 腾讯公司规定小程序大小不能超过2MB，所以 开发者应从外部网络引用图像资源。 image组件的属性如图556所示。 图556image组件的属性 图像组件的src属性定义图像地址。 mode属性定义图像裁剪、缩放的模式，默认为scaleToFill（不保持纵横比缩放图像）使图像的宽高拉伸至开发者定义的宽高； aspectFit（保持纵横比），确保图像的长边显示出来，比较常用； aspectFill（保持纵横比），只保证图像的短边完全显示出来； widthFix（保障宽度），样式中定义的宽度不变，高度会随着原图的比例缩放，常用。 lazyload属性可以实现延迟加载，当页内的图像和内容太多，则微信会自己判断，当图像出现在屏幕上下三屏的高度之内时，会自动开始加载图像。 5.4.3视频组件 video video组件可以创建视频播放窗口，其默认宽度为300px、默认高度为225px，开发者可通过WXSS设置自定义宽高。 video组件的属性如图557所示。 图557video组件的属性 5.5地图组件map map组件可以创建地图元素，个性化地图样式是腾讯位置服务开放的一项高级功能，开发者可以根据自身产品的使用场景 、UI风格，选取或创建风格匹配的地图。小程序内地图组件应使用同一 subkey，开发者可通过layerstyle(位置服务官网设置的样式 style 编号)属性配置地图样式，map组件支持动态切换样式。 map组件的部分属性如图558所示。 图558map组件的部分属性 5.6导航栏 5.6.1navigator组件 navigator组件可以创建一个导航标签，类似HTML的a标签（超链接），但该组件是块级元素。如图559代码所示， 点击将跳转到index页面，如图560所示。 图559navigator组件的实现效果 图560点击后跳转到index页面 navigator组件的属性如下所示。 url： 当前小程序内要跳转的页面路径。 target： 要跳转的是当前小程序的页面还是其他小程序的页面，默认值self跳转的是当前小程序的页面，miniProgram跳转的是其他小程序的页面。 opentype： 跳转方式，其值包括6种，如下所示。 ① navigate： 默认值，保留当前页面(即可以返回原先页面)，跳转到应用内的某个页面，但不能跳转到tabBar页面(即与底部导航栏直接关联的页面)。 ② redirect： 关闭当前页面(即不可以返回原先页面)，跳转到应用内的某个页面，但不能跳转到tabBar页面。 ③ switchTab： 跳转到tabBar页面，并关闭其他所有非tabBar页面。 ④ reLaunch： 关闭所有页面，打开到应用内的某个页面。 ⑤ navigateBack： 关闭当前页面，返回上一页面或多级页面。开发者可通过getCurrentPage()方法获取当前的页面栈， 然后决定需要返回几层。 ⑥ exit： 退出小程序，当target属性值为miniProgram（即其他小程序）时生效。 5.6.2navigationbar组件 navigationbar组件为 页面导航条的配置结点，用于指定导航栏的一些属性。只能是 pagemeta 组件内的第一个结点，需要配合该组件一同使用。通过这个结点，开发者可以获得类似调用wx.setNavigationBarTitle、wx.setNavigationBarColor等接口的效果。 navigationbar组件的属性如图561所示。 图561navigationbar组件的属性 示例代码如下所示。 1. 2. 10. 11. 12.Page({ 13.data: { 14.nbFrontColor: '#000000', 15.nbBackgroundColor: '#ffffff', 16.}, 17.onLoad() { 18.this.setData({ 19.nbTitle: '新标题', 20.nbLoading: true, 21.nbFrontColor: '#ffffff', 22.nbBackgroundColor: '#000000', 23.}) 24.} 25.}) 5.7画布组件canvas canvas组件用于在页面中创建矢量图的画布，供程序绘制图形，该组件的 默认宽度为300px、默认高度为150px，同一页面中的 canvasid属性值不可重复，如果使用一个已经出现过的 canvasid ，则该canvas组件对应的画布将被隐藏并不能正常工作。Canvas 2D(新接口)需要显式设置画布 的宽和高，最大尺寸为1365px×1365px。若设置了过大的宽高，则在安卓系统下会有crash的问题。 canvas组件的属性如图562所示。 图562canvas组件的属性 示例代码如下所示。 1.// 定义canvas组件 2. 3. 4.// JS中获取canvas组件结点 5.wx.createSelectorQuery() 6..select('#myCanvas') 7..fields({ 8.node: true, 9.size: true, 10.}) 11..exec((res) => { 12.} 5.8广告组件ad和自定义广告组件adcustom ad组件可以创建广告栏。 ad组件的属性如图563所示。 图563ad组件的属性 adcustom组件可创建自定义广告（第三方广告）。 adcustom组件的属性如图564所示。 图564adcustom组件的属性 注意： ①在无广告展示时，ad标签不会占用高度； ②ad组件不支持触发bindtap等相关触摸事件； ③目前可以给ad标签设置WXSS样式调整广告宽 度，以使广告与页面更融洽，但需要遵循小程序流量 主应用规范； ④监听到error回调函数后，开发者可以针对性地处理， 例如，隐藏广告组件的父容器以保证用户体验，但不 要移除广告组件，否则将无法收到bindload的回调函数。 5.9其他组件 5.9.1公众号组件 officialaccount 当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号组件，方便用户快捷关注公众号。该组件可嵌套在原生组件内。 小程序场景值命中以下值时，可展示公众号组件。 1011： 扫描二维码。 1017： 前往小程序体验版的入口页。 1025： 扫描一维码。 1047： 扫描小程序码。 1124： 扫“一物一码”打开小程序。 小程序热启动场景值命中以下值时，冷启动场景值在1011、1017、1025、1047、1124中，也可展示公众号组件。 1001： 发现栏小程序主入口，“最近使用”列表。 1038： 从另一个小程序返回。 1041： 从插件小程序返回小程序。 1089： 微信聊天主界面下拉，“最近使用”栏。 1090： 长按小程序右上角菜单唤出最近使用历史。 1104： 微信聊天主界面下拉，“我的小程序”栏。 1131： 浮窗。 1187： 新版浮窗，微信8.0版本起新增。 officialaccount组件的属性如图565所示。 图565officialaccount组件的属性 detail对象的属性如图566所示。 图566detail对象的属性 注意： (1) 使用组件前，需前往小程序后台，在“设置”→“关注公众号”中设置要展示的公众号。注： 设置的公众号需与小程序主体一致。 (2) 在一个小程序的生命周期内，用户只有从以下场景进入时，小程序才具有展示引导关注公众号组件的功能。 ① 当小程序从扫小程序码场景(场景值1047，场景值1124)打开时。 ② 当小程序从聊天顶部场景(场景值1089)中的“最近使用”内打开时，若小程序之前未被销毁，则该组件将保持上一次打开小程序时的状态。 ③ 当从其他小程序返回小程序(场景值1038)时，若小程序之前未被销毁，则该组件将保持上一次打开小程序时的状态。 （3） 为方便开发者调试，基础库 2.7.3 版本起开发版小程序增加以下场景展示公众号组件： 开发版小程序从扫二维码(场景值 1011)→体验版小程序打开。 (4) 组件限定最小宽度为300px，高度为定值84px。 (5) 每个页面只能配置一个公众号组件。 5.9.2微信开放数据组件opendata 该组件 用于展示微信的开放数据，在小程序插件中不能使用。 opendata组件的属性如图567所示。 在图567的属性中，type属性的合法值如图568所示。 lang属性的合法值如图569所示。 5.9.3图标组件 icon icon组件可以创建一个封装好的图标，其属性包括type、size、color等，如下所示。 图567opendata组件的属性 图568opendata组件type属性合法值 图569opendata组件lang属性合法值 type属性可选的属性值有success、success_no_circle、info、warn、waiting、cancel、download、search、clear等。 size属性可以设置图标的尺寸。 color属性可以设置图标的颜色。 icon组件的样式如图570所示。 图570icon组件的样式 5.10自定义组件 某些样式在小程序的不同地方经常会被使用到，这时抽离出这些样式形成自定义组件会提高开发效率。 创建自定义组件可以 在微信开发者工具中与pages同级的目录创建components文件夹，右击文件夹选择新建Component选项即可， 如图571所示。 图571创建自定义组件 使用自定义组件的方法如下。 1.{ 2.//先在页面的JSON文件中引用声明 3."usingComponents": { 4.//要使用的组件的名称:组件的路径 5."as"..components/Tabs/Tabs" 6.} 7.} 8. 9.//再在页面中使用自定义组件 10. 11. 12. 13. 14. 15. 在使用自定义组件时应注意： ①页面对应的事件回调函数应存放在data目录同层级的同名JS文件中； ②组件对应的事件回调函数应存放在methods目录下的同名JS文件中。 父组件向子组件传递数据的流程如图572所示。 图572父组件向子组件传递数据的流程 子组件向父组件传递数据时， 使用自定义组件页面的WXML代码如图573所示。 图573使用自定义组件页面的WXML代码 而自定义组件中的JS代码如图574所示。 图574自定义组件中的JS代码 使用自定义组件页面的JS代码如图575所示。 图575使用自定义组件页面的JS代码 5.11小结 本章小结如图576所示。 图576小结 5.12上机案例 请利用本章所学组件实现如图577所示的小程序页面。 图577上机案例 5.13习题 1. 在微信小程序view组件中，()用于在鼠标按下时显示class关联的样式。 A. hoveridB. hoverC. hoverclassD. hoverview 2. 在微信小程序开发过程中，通常通过()来为组件绑定事件处理函数。 A. bindTouchB. bindTapC. tapD. bindMove 3. 在 和标记中，()表示该选项对应的值。 A. checked 属性B. value属性 C. name属性D. type属性 4. 在使用 wx:for实现页面列表渲染时，当wx:key 的值为()时表示将每一项元素本身作为唯一标识。 A. *this B. value C. key D. this 5. 在微信小程序的页面组件中，()表示将其包裹的所有标记当 作一个复选框组。 A. B. C. D. 6. 在微信小程序的页面组件中，视图组件用()表示。 A. B. C. D. 7. 在微信小程序的页面组件中，图像组件用()表示。 A. B. C. D. 8. 在小程序的页面组件中，()定义单选框。 A. B. C.