微信小程序应用开发 课件 第5章 小程序组件-Part 2

第5章小程序组件-Part2电子工业出版社为了设计更加便利和更加灵活的功能页面，微信提供了一系列功能丰富的组件，例如，scroll-view滚动组件实现页面的滚动功能，结合swiper组件和swiper-item组件可实现轮播图功能等。本章对小程序中常用的复合功能组件进行介绍。目录5.1scroll-view滚动组件5.2swiper和swiper-item轮播图组5.3navigator页面导航组件5.4tabBar及其使用5.5媒体组件5.6canvas画布组件5.7自定义组件5.8案例：美食餐厅5.9练习：选修课5.1scroll-view滚动组件scroll-view，顾名思义，就是可以滚动的组件，这是个非常常用的小程序组件。使用竖向滚动时，需要给scroll-view一个固定高度，一般通过WXSS设置height属性。scroll-view的常用属性及其含义如表：序号属性名类型默认值必填说明1scroll-xbooleanfalse否允许横向滚动2scroll-ybooleanfalse否允许纵向滚动3upper-thresholdnumber/string50否距顶部/左边多远时，触发scrolltoupper事件4lower-threshold number/string50否距底部/右边多远时，触发scrolltolower事件5scroll-topnumber/string无否设置竖向滚动条位置6scroll-leftnumber/string无否设置横向滚动条位置7scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡8refresher-enabledbooleanfalse否开启自定义下拉刷新9refresher-thresholdnumber45否设置自定义下拉刷新阈值10refresher-default-stylestringblack否设置自定义下拉刷新默认样式，支持设置black|white|none，none表示不使用默认样式11refresher-backgroundstring#FFF否设置自定义下拉刷新区域背景颜色12show-scrollbarbooleantrue否滚动条显隐控制(同时开启enhanced属性后生效)13binddragstarteventhandle无否滑动开始事件(同时开启enhanced属性后生效)detail{scrollTop,scrollLeft}14binddraggingeventhandle无否滑动事件(同时开启enhanced属性后生效)detail{scrollTop,scrollLeft}15binddragendeventhandle无否滑动结束事件(同时开启enhanced属性后生效)detail{scrollTop,scrollLeft,velocity}16bindscrolltouppereventhandle无否滚动到顶部/左边时触发17bindscrolltolowereventhandle无否滚动到底部/右边时触发18bindscrolleventhandle无否滚动时触发，event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}19bindrefresherpullingeventhandle无否自定义下拉刷新控件被下拉20bindrefresherrefresheventhandle无否自定义下拉刷新被触发21bindrefresherrestoreeventhandle无否自定义下拉刷新被复位22bindrefresheraborteventhandle无否自定义下拉刷新被中止23enhancedbooleanfalse否启用scroll-view增强特性24enable-flexbooleanfalse否启用flexbox布局。开启后，当前节点声明了display:flex就会成为flexcontainer，并作用于其子节点。25typestringlist是渲染模式。可选值：list，列表模式，只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染；custom，自定义模式，只会渲染在屏节点，子节点可以是list-view、grid-view等组件；nested，嵌套模式。5.1.1scroll-view使用举例举一个简单的例子说明scroll-view组件的使用。新建一个名为mini-ch05-01的小程序工程。打开新建工程的index.wxml文件。新建的页面默认使用了scroll-view组件。修改index.wxml文件为如下内容：在scroll-view标签下增加多个view组件，使其总高度大于屏幕高度，从而导致屏幕需要在y轴上滚动：<!--index.wxml--><navigation-bartitle="scroll-view"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewstyle="background-color:aquamarine;height:400rpx;">1</view><viewstyle="background-color:darkgrey;height:400rpx;">2</view><viewstyle="background-color:bisque;height:400rpx;">3</view><viewstyle="background-color:burlywood;height:400rpx;">4</view><viewstyle="background-color:cornsilk;height:400rpx;">5</view><viewstyle="background-color:darkcyan;height:400rpx;">6</view></scroll-view>5.1.2使用scroll-view实现局部页面下拉刷新和上拉加载在编程实践中，除了要使用全局页面的下拉刷新和上拉加载功能外，还经常需要用到局部页面下拉刷新和上拉加载功能。scroll-view对局部下拉刷新和上拉加载提供了较好的支持：只需要在scroll-view组件中设置bindscrolltoupper和bindscrolltolower属性分别指向下拉刷新和上拉加载时调用的函数即可。举一个例子说明scroll-view的下拉刷新和上拉加载的使用。在这个例子中，用户可以通过下拉和上拉显示更多图像。首先在工程mini-ch05-01中新建名为images的子目录，并在其下放置名称为01.jpg到09.jpg的图像文件，然后，再新建一个名为refresh的页面，设置refresh页面为入口页面，然后，修改refresh.json文件为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改refresh.wxss文件为如下内容：/*pages/refresh/refresh.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}修改refresh.js文件为如下内容：//pages/refresh/refresh.jsPage({data:{images:[]},onLoad(query){this.generateImages(4,true);},upper(){console.log("upper");this.generateImages(1,true);},lower(){console.log("lower");this.generateImages(1,false);},generateImages(num,head){letcs=[];for(leti=0;i<num;i++){lett=Math.floor(Math.random()*10);if(t>=10)t=9;if(t<=0)t=1;letc="../../images/0"+t+".jpg";cs.push(c);}if(head){cs=cs.concat(this.data.images);this.setData({images:cs});}else{this.data.images=this.data.images.concat(cs);this.setData({images:this.data.images});}}})修改refresh.wxml文件为如下内容：<!s/refresh/refresh.wxml--><navigation-bartitle="scroll-view"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list“

bindscrolltoupper="upper"bindscrolltolower="lower"><viewwx:for="{{images}}"wx:key="*this"><imagesrc="{{item}}"mode="widthFix"style="width:100%;"></image></view></scroll-view>5.2swiper和swiper-item轮播图组件swiper是滑块容器，swiper-item则是滑块内容，结合swiper和swiper-item组件可以实现滑块功能。注意，在swiper组件中只可放置swiper-item组件，否则会导致未定义的行为；同时，swiper-item组件也只能放置在swiper组件中。经常在广告或者商品推荐中看到的轮播图就是使用swiper组件和swiper-item组件实现的。swiper和swiper-item组件的常用属性分别如表所示。序号属性名类型默认值必填说明1indicator-dotsbooleanfalse否是否显示面板指示点2indicator-colorcolorrgba(0,0,0,.3) 否指示点颜色3indicator-active-colorcolor#000000否否

当前选中的指示点颜色4autoplaybooleanfalse否是否自动切换5currentnumber0否当前所在滑块的index6intervalnumber5000否自动切换时间间隔7durationnumber500否滑动动画时长8circularbooleanfalse否是否采用衔接滑动9verticalbooleanfalse否滑动方向是否为纵向10easing-functionstringdefault否指定swiper切换缓动动画类型。可选值：default，默认缓动函数；linear，线性动画；easeInCubic，缓入动画；easeOutCubic，缓出动画；easeInOutCubic，缓入缓出动画。11bindchangeeventhandle无否current改变时会触发change事件，event.detail={current,source}12layout-typestringnormal否渲染模式。可选值：normal，默认方式；stackLeft，左向堆叠；stackRight，右向堆叠；tinder，滑动卡片；transformer，过渡动画。13indicator-typestringnormal否指示点动画类型。可选值：normal、worm、wormThin、expand、jump、scroll、slide、slideUnderground、scale、swap等。序号属性名类型默认值必填说明1item-idstring无否该swiper-item的标识符举一个例子演示swiper和swiper-item组件的使用。这个例子在4张图像之间轮回滑动显示。为此，在mini-ch05-01工程中新建名为swiper的页面，并设置该页面为入口页面，然后修改swiper.json为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改swiper.wxss为如下内容：/*pages/swiper/swiper.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}在swiper.js文件中将需要滑动的图像加到data的属性中，代码如下：//pages/swiper/swiper.jsPage({data:{images:["../../images/01.jpg","../../images/02.jpg","../../images/03.jpg","../../images/04.jpg"]}})修改swiper.wxml为如下内容：<!s/swiper/swiper.wxml--><navigation-bartitle="scroll-view"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><swiperindicator-dots="{{true}}"autoplay="{{true}}"interval="3000"duration="500"><swiper-itemwx:for="{{images}}"><imagesrc="{{item}}"mode="widthFix"></image></swiper-item></swiper></scroll-view>5.3navigator页面导航组件使用navigator组件可以实现页面之间的导航功能。navigator组件非常类似HTML页面的<a>超链接标签的功能，但是，在navigator组件下只能嵌套文本节点，而不能嵌套其他普通节点。navigator组件的常用属性如表所示：序号属性名类型默认值必填说明1targetstringself否在哪个目标上发生跳转，默认当前小程序。可选值：self，当前小程序；miniProgram，其它小程序。2urlstring无否当前小程序内的跳转链接3open-type stringnavigate否跳转方式。可选值：navigate，页面跳转；switchTab，切换Tab；reLaunch，重新启动页面；navigateBack回退页面；exit，退出小程序，当属性target="miniProgram"时生效。4deltanumber1否当open-type为'navigateBack'时有效，表示回退的层数5app-idstring无否当target="miniProgram"且open-type="navigate"时有效，要打开的小程序appId。6pathstring无否当target="miniProgram"且open-type="navigate"时有效，打开的页面路径，如果为空则打开首页。7extra-dataobject无否当target="miniProgram"且open-type="navigate/navigateBack"时有效，需要传递给目标小程序的数据，目标小程序可在App.onLaunch()，App.onShow()中获取到这份数据8hover-classstringnavigator-hover否按下时的样式类。当hover-class="none"时，没有点击态效果。9hover-stop-propagationbooleanfalse否是否阻止本节点的祖先节点出现点击态10hover-start-timenumber50否按住后多久出现点击态，单位毫秒11hover-stay-timenumber600否手指松开后点击态保留时间，单位毫秒12bindsuccessstring无否当target="miniProgram"且open-type="navigate/navigateBack"时有效时有效，跳转小程序成功13bindfailstring无否当target="miniProgram"且open-type="navigate/navigateBack"时有效时有效，跳转小程序失败14bindcompletestring无否当target="miniProgram"且open-type="navigate/navigateBack"时有效时有效，跳转小程序完成举一个例子演示navigator组件的使用。在mini-ch05-01工程中新建名称为home的页面，从这个home页面可以导航到所有之前的页面，包括：index页面、refresh页面和swiper页面。首先在mini-ch05-01工程中新建home页面，并设置home页面为入口页面。然后修改home.json为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改home.wxss样式文件为如下内容：/*pages/home/home.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.navigator-hover{color:blue;}修改home.wxml为如下内容：<!s/home/home.wxml--><navigation-bartitle="Home"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><navigatorurl="../index/index">navigatetoindex<index></index></navigator><navigatorurl="../refresh/refresh"open-type="redirect">redirecttorefresh</navigator><navigatorurl="../swiper/swiper"open-type="reLaunch">relaunchswiper</navigator></scroll-view><navigation-bartitle="scroll-view"back="{{true}}"color="black"background="#FFF"></navigation-bar>5.4tabBar及其使用小程序可以是多Tab应用：可以通过多个标签实现小程序多个页面之间的快速切换。为此，只需在小程序的app.json配置文件中配置tabBar对象属性即可。tabBar对象的常用属性如表。序号属性名类型默认值必填说明1colorHexColor无否tab上的文字默认颜色，仅支持十六进制颜色2selectedColorHexColor无否tab上的文字选中时的颜色，仅支持十六进制颜色3backgroundColorHexColor无否tab的背景色，仅支持十六进制颜色4borderStylestringblack否tabbar上边框的颜色，仅支持black/white5listArray无是tab的列表，最少2个、最多5个tab6positionstringbottom否tabBar的位置，仅支持bottom/top7custombooleanfalse否自定义tabBar其中的list属性是一个数组，数组的每个元素是一个对象。每个元素对象包含如表。序号属性名类型默认值必填说明1pagePathstring无是页面路径，必须在pages中先定义2textstring无是tab上按钮文字3iconPathstring无否图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。4selectedIconPathstring无否选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。举一个例子演示tabBar的使用。为了简单，这个例子中只是使用显示图像的多个简单页面组成的tabBar页面。为此，新建名为mini-ch05-02的小程序工程，然后新建images目录以存放图像，并在其下放置要在页面上显示的图像和tabBar图标。再新建3个页面（加上自动创建的index页面，程序共有4个页面），如图。修改app.json文件为如下内容：{"pages":["pages/index/index","pages/tab1/tab1","pages/tab2/tab2","pages/tab3/tab3"],"entryPagePath":"pages/tab3/tab3","tabBar":{"list":[{"pagePath":"pages/index/index","text":"雪景","iconPath":"images/icon01.png","selectedIconPath":"images/icon01.png"},{"pagePath":"pages/tab1/tab1","text":"水景","iconPath":"images/icon02.png","selectedIconPath":"images/icon02.png"},{"pagePath":"pages/tab2/tab2","text":"山水景","iconPath":"images/icon03.png","selectedIconPath":"images/icon03.png"},{"pagePath":"pages/tab3/tab3","text":"草原景","iconPath":"images/icon04.png","selectedIconPath":"images/icon04.png"}]},//以下省略修改tab1.json、tab2.json和tab3.json为如下内容：修改tab1.wxss、tab2.wxss和tab3.wxss文件为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}修改index.wxml、tab1.wxml、tab2.wxml、tab3.wxml文件，分别显示4张不同的图像。例如，tab1.wxml文件内容如下：<navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><imagesrc="../../images/02.jpg"mode="aspectFill"></image>5.5媒体组件媒体组件用于对多媒体数据进行处理，包括：播放音频、播放视频、使用相机拍照等。媒体组件，包括音频组件、视频组件、相机组件等，结合微信API更能发挥这些组件的功能。本节对媒体组件的简单使用进行介绍，在后续章节，还会结合微信API，对这些组件的深入使用做进一步介绍。5.5.1audio音频组件使用audio组件可以播放音频，结合微信API还可以对音频的播放过程进行控制。audio组件的常用属性如表所示。序号属性名类型默认值必填说明1idstring无否audio组件的唯一标识符2srcstring无否要播放音频的资源地址3loopbooleanfalse否是否循环播放4controlsbooleanfalse否是否显示默认控件5posterstring无否默认控件上的音频封面的图片资源地址，如果controls属性值为false则设置poster无效6namestring未知音频否默认控件上的音频名字，如果controls属性值为false则设置name无效7authorstring未知作者否默认控件上的作者名字，如果controls属性值为false则设置author无效8binderroreventhandle无否当发生错误时触发error事件，detail={errMsg:MediaError.code}9bindplayeventhandle无否当开始/继续播放时触发play事件10bindpauseeventhandle无否当暂停播放时触发pause事件11bindtimeupdateeventhandle无否当播放进度改变时触发timeupdate事件，detail={currentTime,duration}12bindended eventhandle无否当播放到末尾时触发ended事件5.5.2video视频组件使用video组件可以播放视频，结合微信提供的API还可以控制视频的播放过程。video组件的常用属性及其含义如表所示。序号属性名类型默认值必填说明1idstring无否video组件的唯一标识符2srcstring无否要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID等3durationnumber无否指定视频时长4controlsbooleantrue否是否显示默认播放控件（播放/暂停按钮、播放进度、时间）5danmu-listArray<object>无否弹幕列表6danmu-btnbooleanfalse否是否显示弹幕按钮，只在初始化时有效，不能动态变更7enable-danmubooleanfalse否是否展示弹幕，只在初始化时有效，不能动态变更8autoplaybooleanfalse否是否自动播放9loopbooleanfalse否是否循环播放10mutedbooleanfalse否是否静音播放11initial-time number0否指定视频初始播放位置12directionnumber无否设置全屏时视频的方向，不指定则根据宽高比自动判断。可选值：0，正常竖向；90，屏幕逆时针90度；-90，屏幕顺时针90度。13show-progressbooleantrue否若不设置，宽度大于240时才会显示14show-fullscreen-btnbooleantrue否是否显示全屏按钮15show-play-btnbooleantrue否是否显示视频底部控制栏的播放按钮16object-fitstringcontain否当视频大小与video容器大小不一致时，视频的表现形式。可选值：contain，包含；fill，填充；cover，覆盖。17posterstring无否视频封面的图片网络资源地址或云文件ID。若controls属性值为false则设置poster无效18show-mute-btnbooleanfalse否是否显示静音按钮19titlestring无否视频的标题，全屏时在顶部展示20play-btn-positionstringbottom否播放按钮的位置。可选值：bottom，controlsbar上；center，视频中间。21auto-pause-if-navigatebooleantrue否当跳转到本小程序的其他页面时，是否自动暂停本页面的视频播放22enable-auto-rotationbooleanfalse否是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效23bindplayeventhandle无否当开始/继续播放时触发play事件24bindpauseeventhandle无否当暂停播放时触发pause事件25bindended eventhandle无否当播放到末尾时触发ended事件26bindtimeupdateeventhandle无否播放进度变化时触发，event.detail={currentTime,duration}。触发频率250ms一次。27binderroreventhandle无否视频播放出错时触发举一个例子演示video组件的使用。这个例子直接播放存储网络服务器上的一个小视频。为此，新建名为mini-ch05-03的小程序工程，修改index.js文件为如下内容：//index.jsPage({videoErrorCallback(e){console.log('视频错误信息:')console.log(e.detail.errMsg)}})修改index.wxml文件为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><videoid="myVideo"src="视频网络地址"binderror="videoErrorCallback"show-center-play-btn='{{false}}'show-play-btn="{{true}}"controls></video></scroll-view>运行这个程序，例如，将“视频网络地址”修改为腾讯视频的一个教学地址，则显示如图所示的界面：5.5.3camera相机组件通过camera组件可以实现对手机上相机的控制，例如，使用相机拍照或者识别某个二维码等功能。结合微信API，可以最大限度使用camera组件的功能。camera组件的常用属性及其含义如表。序号属性名类型默认值必填说明1modestringnormal否应用模式，只在初始化时有效，不能动态变更。可选值：normal，相机模式；scanCode，扫码模式。2resolutionstringmedium否分辨率，不支持动态修改。可选值：low，低；medium，中；high，高。3device-positionstringback否摄像头朝向。可选值：front，前置；back，后置。4flashstringauto否闪光灯，值为auto,on,off，torch5frame-sizestringmedium否指定期望的相机帧数据尺寸。可选值：small，小尺寸帧数据；medium，中尺寸帧数据；large，大尺寸帧数据。6bindstopeventhandle无否摄像头在非正常终止时触发，如退出后台等情况7binderroreventhandle无否用户不允许使用摄像头时触发8bindinitdoneeventhandle无否相机初始化完成时触发，e.detail={maxZoom}9bindscancodeeventhandle无否在扫码识别成功时触发，仅在mode="scanCode"时生效举一个例子演示camera组件的使用。在mini-ch05-03工程中新建名为camera的页面，并设置该页面为入口页面。然后修改camera.json为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改camera.wxss为如下内容：/*pages/camera/camera.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.camera{width:100%;height:300px;}修改camera.js为如下内容：修改camera.wxml为如下内容：//pages/camera/camera.jsPage({error(e){console.log(e.detail)}})<!s/camera/camera.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><cameraclass="camera"resolution="high"device-position="back"flash="off"binderror="error"></camera></scroll-view>在camera.wxml中，使用camera组件操作相机。由于需要操作相机，因此，不能在模拟器里运行。为此，在开发者工具中，点击“预览”按钮，如图所示：在弹出的窗口将显示一个二维码，用手机扫描这个二维码，即可在物理手机上运行这个程序。5.6canvas画布组件类似于HTML5，微信也提供了canvas画布组件，通过canvas组件，可以通过程序创建复杂的图形外观。canvas组件的常用属性及其含义如表所示。序号属性名类型默认值必填说明1typestring无否指定canvas类型，可选值：2d，webgl。2canvas-idstring无否canvas组件的唯一标识符，若指定了type则无需再指定该属性。3disable-scrollbooleanfalse否当在canvas中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新。4bindtouchstarteventhandle无否手指触摸动作开始5bindtouchmoveeventhandle无否手指触摸后移动6bindtouchendeventhandle无否手指触摸动作结束7bindtouchcanceleventhandle无否手指触摸动作被打断，如来电提醒，弹窗等8bindlongtapeventhandle无否手指长按500ms之后触发，触发了长按事件后进行移动不会触发屏幕的滚动9binderroreventhandle无否当发生错误时触发error事件，detail={errMsg}5.7自定义组件在编程实践中开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。5.7.1创建自定义组件类似于页面，一个自定义组件由后缀为.json、.wxml、.wxss和.js4个文件组成。并且需要首先在.json文件中进行自定义组件声明，如下面代码片段所示：同时，在wxml文件中编写组件模板，在wxss文件中加入组件样式，这些代码的写法与页面的写法一致。例如，在自定义组件的.wxss文件中定义了如下样式：但是，要注意，在组件的.wxss文件中不应使用ID选择器、属性选择器和标签名选择器。{"component":true}/*这里的样式只应用于这个自定义组件*/.inner{color:red;}然后，在自定义组件的.wxml文件中定义组件的内容：需要在自定义组件的.js文件中使用Component()函数注册组件，并提供组件的属性定义、内部数据和自定义方法：组件的属性值和内部数据将被用于组件wxml的渲染，其中，属性值是可由组件外部传入的。例如：<!--这是自定义组件的内部WXML结构--><viewclass="inner">{{innerText}}</view><slot></slot>Component({properties:{//这里定义了innerText属性，//属性值可以在组件使用时指定innerText:{type:String,value:'defaultvalue',}},data:{//这里是一些组件内部数据someData:{}},methods:{//这里是一个自定义方法customMethod:function(){}}})5.7.2使用自定义组件要使用自定义组件，首先需要在页面的.json文件中进行引用声明，在引用声明中需要提供每个自定义组件的标签名和对应的自定义组件文件路径：引入了自定义组件后，即可像使用普通组件一样使用自定义组件：节点名即自定义组件的标签名，节点属性即传递给组件的属性值：{"usingComponents":{"component-tag-name":"path/to/the/custom/component"}}<view><!--以下是对一个自定义组件的引用--><component-tag-nameinner-text="Sometext"></component-tag-name></view>5.7.3自定义组件举例使用微信开发者工具创建的微信小程序工程就已经使用了自定义组件：一个名称为navigation-bar的自定义组件。例如，以上一节相机操作的例子为例，如图所示：在页面camera的camera.json中引用了该组件，并且，在camera.wxml文件中使用了该自定义组件，代码如下：当然，也可以打开navigation-bar自定义组件的定义文件，注意，共有4个文件。现在打开navigation-bar.json文件如下：<!s/camera/camera.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><cameraclass="camera"resolution="high"device-position="back"flash="off"binderror="error"></camera></scroll-view>{

"component":true,"styleIsolation":"apply-shared","usingComponents":{}}5.7.4使用第三方WeUI组件库WeUI组件库是微信官方设计团队为微信内网页和微信小程序量身设计的一套完整的UI样式库和组件库，WeUI组件库是基于WeUI样式库做了组件化处理，开发者可以便捷地使用。为了使用WeUI组件库，需要首先在app.json中使用引入WeUI组件库：然后，在需要使用WeUI的页面的.json文件中导入需要使用的组件：{"useExtendedLib":{"weui":true}}{"usingComponents":{"mp-dialog":"weui-miniprogram/dialog/dialog","mp-form":"weui-miniprogram/form/form"}}举一个例子演示如何使用WeUI组件。首先，在mini-ch05-03小程序工程新建名为weui的页面，设置该页面为入口页面，然后修改app.json文件，在其中添加："useExtendedLib":{"weui":true}然后，修改weui.json为如下内容：修改weui.js文件为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar","mp-dialog":"weui-miniprogram/dialog/dialog"}}//pages/weui/weui.jsPage({data:{buttons:[{text:'取消'},{text:'确认'}]},tapDialogButton(e){console.log(e);}})最后，修改weui.wxml文件为如下内容，在这个文件中，可以像使用微信其他组件一样使用mp-dialog组件：<!s/weui/weui.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><mp-dialogtitle="关闭应用程序"show="{{true}}"bindbuttontap="tapDialogButton"buttons="{{buttons}}"><view>你确定要关闭吗?</view></mp-dialog></scroll-view>WeUI组件库提供了很多类似组件，如表所示。这些组件的引用方式类似对dialog组件的引用。序号组件名称中文名称描述1Badge徽章出现在按钮、图标附近的数字或者状态标记2Gallery画廊用于多张图片展示，类似API的wx.previewImage的功能。关于微信API在后续章节介绍。3Loading加载加载数据时的loading效果4Icon图标便利的图标组件5Form表单组件Form表单组件，结合Cell、Checkbox-group、Checkbox组件等做表单校验6FormPage表单页面表单页面，规定了标准表单的顶部的标题和底部的按钮提示等区域的规范7Cells列表分组Cells是列表分组，常用于嵌套一组Cell或者Checkbox，注意，Checkbox-group和Cell组件都必须放在Cells组件下面8Checkbox-group，Checkbox多选项组件Checkbox-group是由一组单选或者多选Checkbox组件组成9Slideview左滑删除组件左滑删除组件10Uploader图片上传图片上传Uploader组件11Dialog弹窗组件Dialog弹窗组件12Msg消息组件Msg组件提供操作确认页或操作成功或失败的标准的确认页的样式13Toptips顶部错误提示组件顶部错误提示组件，常用于表单校验或提交请求到后台成功或失败的错误提示14Half-Screen-Dialog半屏弹窗半屏弹窗，辅助完成当前页面任务时；提醒用户并引导用户的下一步操作；用户主动发起的任务时15ActionSheet底部弹起的操作按钮组件底部弹起的操作按钮组件16Navigation顶部导航组件小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏17TabbarTabbar组件Tabbar组件，也可以用来作为小程序的自定义Tabbar使用18Searchbar搜索组件搜索组件Searchbar提供搜索的功能，并展示搜索的结果5.8案例：美食餐厅使用微信小程序进行餐厅点餐是一项非常有代表性的应用，这个应用不仅可以方便用户，也为商家带来了便利。本案例编写一个简单的小程序，用户通过这个小程序可以完成餐厅自助点餐。5.8.1案例目标编写一个微信小程序，这个小程序有3个Tab页面：湘菜、粤菜、结算。在“湘菜”页面，列表多个湘菜，用户在此处可以选点湘菜；同理，在“粤菜”页面，用户可以选点粤菜。点餐后，用户可以在“结算”页面查看自己所点选的菜单。5.8.2案例分析包括3个Tab，可以使用tabBar配置小程序的导航标签。在“湘菜”和“粤菜”页面，为了页面的美观，在页面的顶部使用轮播图来轮播湘菜或粤菜的名菜，在轮播图下方，采用列表形式列出菜的图片、菜名、菜的介绍、菜的价格、点菜按钮，当用户点击某个菜单列表项的“点菜”按钮时，将所选菜的ID好保存到全局变量中。在任何时候，用户可以点击“结算”标签查看自己以点选的菜单，并可以在页面中删除已经点选的菜单。为了实现如下这些功能，需要在湘菜页面和粤菜页面的.js文件中保存湘菜和粤菜的相关信息，包括菜的图片、菜名、菜的介绍、菜的价格等，然后，在各自页面渲染这些信息并显示在页面上。为了保存用户点选的菜单，需要在app.js中定义一个全局变量，用于保存用户所选。本案例也使用了WeUI第三方组件的toptips组件：当用户点选一个菜单时，在屏幕的顶上通过toptips组件显示一天信息，提示用户点选了哪个菜。5.8.3案例实施新建名为mini-ch05-04的小程序工程，并新建名为yue、cart的页面，分别表示粤菜页面和结算页面，同时，新建images目录，用于存放图片等。然后，修改app.js文件如下：//app.jsApp({global:{selected:[]}})修改app.json文件如下：{"pages":["pages/index/index","pages/yue/yue","pages/cart/cart"],"useExtendedLib":{"weui":true},"tabBar":{"list":[{"pagePath":"pages/index/index","text":"湘菜","iconPath":"images/icon1.png","selectedIconPath":"images/icon1.png"},{"pagePath":"pages/yue/yue","text":"粤菜","iconPath":"images/icon2.png","selectedIconPath":"images/icon2.png"},{"pagePath":"pages/cart/cart","text":"结算","iconPath":"images/cart.png","selectedIconPath":"images/cart.png"}]},//以下省略现在编写“湘菜”页面，也就是工程里的index页面。修改index.json代码如下：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar","mp-toptips":"weui-miniprogram/toptips/toptips"}}修改index.wxss文件为如下内容：/**index.wxss**/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.cai{margin-top:10px;}.image{width:100vw;}.text{position:relative;top:-20px;margin-left:10px;font-size:small;}修改index.js文件为如下内容：//index.jsPage({data:{message:"",eatings:[{name:'爆炒鸡爪',image:'../../images/xiang01.jpg',desc:'辣椒爆炒，非常美味，好吃不贵。',price:24.9},{name:'大蒜腊肉',image:'../../images/xiang02.jpg',desc:'大蒜腊肉，湖南特产，非常美味，好吃不贵。',price:29.9},{name:'酱油鱿鱼',image:'../../images/xiang03.jpg',desc:'酱油鱿鱼，特制酱油腌制，加上大火的味道，非常美味。',price:19.9},{name:'干辣椒炒鸡',image:'../../images/xiang04.jpg',desc:'干辣椒炒鸡，小小的土鸡，加上大火的味道，非常美味。',price:45.9},{name:'剁椒鱼头',image:'../../images/xiang05.jpg',desc:'剁椒鱼头，来自洞庭湖的大鱼头，加上特制的辣椒，无言...',price:58.9},{name:'姜丝黄牛肉',image:'../../images/xiang06.jpg',desc:'姜丝黄牛肉，来自湘西，加上特制的辣椒，美味...',price:48.9}]},tapcai(e){letapp=getApp();letwhich=e.currentTarget.dataset.which;app.global.selected.push(this