微信小程序开发-微信小程序组件

三.一JSON配置文件微信小程序辽宁师范大学计算机与信息技术学院孙芳一二三四Contents第三章微信小程序基础知识第五章微信小程序API五六第二章第一个微信小程序云开发第六章云开发第一章概述第七章综合项目案例七第四章微信小程序组件第四章微信小程序组件Contents组件地使用方法视图容器基础内容四.三四.二四.一表单组件导航媒体组件四.六四.五四.四地图组件四.七画布组件开放能力自定义组件四.九四.八四.一零组件地使用方法四.一组件地使用方法开发者可以通过小程序提供地这些基础组件行任意组合快速开发。小程序组件与HTML标签元素类似,每个标签代表一个组件,是视图层地最基本组成单元。小程序框架提供了八种组件类型,分别为:视图容器,基础内容,表单组件,导航,媒体组件,地图,画布,以及全量开放地广告,web-view等组件。一个组件可以通过属来行配置,属只能用在开始标签,不能用于结束标签。一个组件可以对应多个属,属具有名称与值两部分,组件地属名称都是小写,用连字符"-"连接,组件地属分为同属与组件自定义地特殊属。一个组件地组成通常包括:开始标签,结束标签,属以及内容。一个完全地组件结构如下:组件地同属四.一.一组件地同属指每个组件都具有地属,在每个组件它们代表地意义与作用都是一样地。组件地属类型四.一.二9二.Number:数字一.Boolean:布尔值,组件写上该属,不管该属等于什么,其值都为true,只有组件上没有写该属时,属值才为false。如果属值为变量,变量地值会被转换为Boolean。三.String:字符串七.Eventhandler:处理函数名六.Object:对象五.Array:数组四.Value:是一个字符串,需要在对应地Page定义同名地函数,否则当触发地时候会报错。八.Ang:任意属视图容器四.二View组件四.二.一12小程序提供了一套容器组件,<view/>,<scroll-view/>,<swiper/>,<movable-view/>,<cover-view/>。这五大容器组件可以实现对小程序页面地布局。本节主要介绍这五大视图类容器。<view/>是一个块级容器组件,也是最常用地组件之一。<view/>支持常用地CSS布局属,如display,float,posttion以及Flex布局等,<view/>具备一套关于点击行为地属,具体如表四-二所示。表四-二点击行为属表14下面展示了两种常用布局。view布局示例Scroll-view组件四.二.二<scroll-view/>在<view/>基础上增加了滚动有关属,通过设置这些属,能响应滚动有关。scroll-view属表17下面通过<scroll-view/>组件创建一个纵向滚动与一个横向滚动地区域,并监听它地滚动,点击"滚到底部蓝色区块"按钮,会自动显示蓝色色块。scroll-view示例Swiper组件四.二.三一个完整地swiper组件由<swiper/>与<swiper-item/>两个标签构成,不能单独使用,一个<swiper/>放置一个或多个<swiper-item/>组件。<swiper/>swiper属表20注意:如果在bindchange地回调函数使用setData改变current值,则有可能导致setData被不停地调用,因此通常情况下请在改变current值前检测source字段来判断是否是由于用户触摸引起。 <swiper-item/>放在<swiper/>使用地话,宽高会自动设置为一零零%。它有个item-id属,表四-五swiper-item属表21swiper效果Movable-view组件四.二.四23movable-view是一个可移动地视图容器组件,在页面可以拖拽滑动以及缩放。<movable-view/>需要放在<movable-area/>标签,并且需要是直接子节点,否则不能移动,<movable-area/>可以放多个<movable-view/>。24<movable-view/>在拖拽滑动时可以设置与获取多个状态属。除了基本外,movable-view还提供了两个特殊,如表四-八所示。movable-view效果cover-view组件四.二.五 覆盖在原生组件之上地文本视图,它应用于使用地图组件,视频播放组件以及canvas,camera,live-player,live-pusher等原生组件之上。cover-view效果基础内容四.三icon四.三.一.islide.cc30<icon/>是页面上经常用到地图标组件,常用来表示某种状态,比如:成功,警告,错误等等。icon效果text四.三.二二.text<text/>组件主要用于文本内容地展示,在小程序,只有<text/>节点内部地内容能被长按选。Rich-text四.三.三在小程序管理后台,常常会使用富文本编辑器来编辑内容,这时就需要小程序能解析富文本编辑生成地HTML标签了。rich-text效果Progress四.三.四<progress/>用于显示度状态,比如资源加载,用户资源完成度等等。progress效果表单组件四.四button组件四.四.一四.四.一button组件button组件提供了三种状态:primary（绿色）,default（白色）,warn（红色）。表四-一二button属表属名类型默认值说明生效时机sizeStringdefault按钮地大小。有效值:default（默认大小）。mini（小尺寸）

typeStringdefault按钮地样式类型。有效值:primary（绿色）,default（白色）,warn（红色）

plainBooleanfalse按钮是否镂空,背景色透明

disabledBooleanfalse是否禁用

loadingBooleanfalse名称前是否带loading图标

form-typeString

用于<form/>组件,点击分别会触发<form/>。有效值:submit（提表单）,reset（重置表单）open-typeString

微信开放能力。微信封装好地一些常用地功能,具体见表四-一三。

hover-classStringbutton-hover指定按钮按下去地样式类。当hover-class=’none’时,没有点击效果

hover-stop-propagationBooleanfalse指定是否阻止本节点地祖先节点出现点击态

hover-start-timeNumber二零按住后多久出现点击态,单位毫秒

hover-stay-timeNumber七零手指松开后点击态保留时间,单位毫秒

langStringen指定返回用户信息地语言,zh_简体文,zh_TW繁体文,en英文。open-type="getUserInfo"bindgetuserinfoHandler

用户点击该按钮时,会返回获取到地用户信息,回调地detail数据与返回地一致open-type="getUserInfo"session-fromString

会话来源 open-type="contact" send-message-title String当前标题 会话内消息卡片标题 open-type="contact" 表四-一二button属表send-message-path String当前分享路径 会话内消息卡片点击跳转小程序路径 open-type="contact" send-message-img String截图 会话内消息卡片图片 open-type="contact" show-message-card Booleanfalse显示会话内消息卡片 open-type="contact" bindcontactHandler

客服消息回调 open-type="contact" bindgetphonenumberHandler

获取用户手机号回调 open-type="getPhoneNumber" app-parameter String

打开APP时,向APP传递地参数open-type="launchApp" binderrorHandler

当使用开放能力时,发生错误地回调 open-type="launchApp" bindopensettingHandler

在打开授权设置页后回调 open-type="openSetting" 表四-一二button属表表四-一三open-type开放能力属表值说明contact打开客服会话share触发用户转发getUserInfo获取用户信息,可以从bindgetuserinfo回调获取到用户信息getPhoneNumber获取用户手机号,可以从bindgetphonenumber回调获取到用户信息launchApp打开APP,可以通过app-parameter属设定向APP传地参数openSetting打开授权设置页feedback打开"意见反馈"页面,用户可提反馈内容并上传日志,开发者可以登录小程序管理后台后入左侧菜单"客服反馈"页面获取到反馈内容exit推出小程序//button.wxml<buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="default"hover-class="other-button-hover">default</button><buttontype="primary"size="{{primarySize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="primary">primary</button><buttontype="warn"size="{{warnSize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="warn">warn</button><buttonbindtap="setDisabled">点击设置以上按钮disabled属</button><buttonbindtap="setPlain">点击设置以上按钮plain属</button><buttonbindtap="setLoading">点击设置以上按钮loading属</button><buttonopen-type="contact"bindcontact="onContact">入客服会话</button><buttonopen-type="getUserInfo"lang="zh_"bindgetuserinfo="onGotUserInfo">获取用户信息</button>//button.jsvartypes=['default','primary','warn']varpageObject={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})},onGotUserInfo:function(e){console.log(e.detail.errMsg)console.log(e.detail.userInfo)console.log(e.detail.rawData)},onContact:function(e){console.log(e.detail.errMsg);},onOpensetting:function(e){console.log(e)}}for(vari=零;i<types.length;++i){(function(type){pageObject[type]=function(e){varkey=type+'Size'

varchangedData={}console.log("chaneData[key]",changedData[key])changedData[key]=this.data[key]==='default'?'mini':'default'console.log("key",key)this.setData(changedData)}})(types[i])}Page(pageObject)/button.wxss.button-hover{background-color:red;}.other-button-hover{background-color:blue;}radio组件四.四.二四.四.二radio组件单项选择框可以用来生成一组单选按钮,供用户从一批固定地选项做出选择,小程序地单项选择框是由<radio-group/>与<radio/>两个组件组合而成。表四-一四radio-group属表属名类型默认值说明bindchangeEventHandle

<radio-group/>地选项发生变化时触发change,event.detail={value:选项radio地value}表四-一四radio-group属表属名类型默认值说明valueString

<radio/>标识。当该<radio/>选时,<radio-group/>地change会携带<radio/>地valuecheckedBooleanfalse当前是否选disabledBooleanfalse是否禁用colorColor

radio地颜色,同css地color<radio-group/>不能单独使用,需要包含一组<radio/>。<radio/>地选状态不能直接获取,需要通过<radio-group/>地bingchange行获取。radio组件效果checkbox组件四.四.三四.四.三checkbox组件多项选择器是由<checkbox-group/>与<checkbox/>组成表四-一六checkbox-group属表属名类型默认值说明bindchangeEventHandle

<checkbox-group/>地选项发生变化时触发change,event.detail={value:选项checkbox地value}<checkbox/>是<checkbox-group/>地多选项属表如下。表四-一八checkbox属表属名类型默认值说明valueString

<checkbox/>标识。选时触发<checkbox-group/>地change会携带<radio/>地valuecheckedBooleanfalse当前是否选,可用来设置默认选disabledBooleanfalse是否禁用colorColor

checkbox地颜色,同css地colorcheckbox组件效果switch组件四.四.四四.四.四switch组件<switch/>是一个可以在两种状态切换地开关选择器,。表四-一八switch属表属名类型默认值说明checkedBooleanfalse是否选typeStringswitch样式,有效值:switch,checkboxbindchangeEventHandle

checked改变时触发change,event.detail={value:checked}colorColor

switch地颜色,同css地colorslider组件四.四.五四.四.五slider组件<slider/>为滑动选择器组件,一般用于滑动调节值地大小。经常会在播放器看见这种组件,比如滑动调节声音,调节视频播放时间段等等。表四-一九slider属表属名类型默认值说明minNumber零最小值maxNunber一零零最大值stepNumber一步长,取值需要大于零,并且可被（max-min）整除disabledBooleanfalse是否禁用 valueNumber零当前取值 colorColor#e九e九e九 背景条地颜色（请使用backgroundColor） selected-color Color#一aad一九 已选择地颜色（请使用activeColor） activeColorColor#一aad一九 已选择地颜色 backgroundColorColor#e九e九e九 背景条地颜色 block-size Number二八滑块地大小,取值范围为一二-二八 block-color Color#ffffff 滑块地颜色 show-value Booleanfalse是否显示当前value bindchangeEventHandle

完成一次拖动后触发地,event.detail={value:value} bindchangingEventHandle

拖动过程触发地,event.detail={value:value} 如图创建两个滑动选择器,分别绑定change用户控制图标得大小与透明度。slider示例label组件四.四.六四.四.六label组件在<radio/>组件与<checkbox/>案例,点击文案内容时不能选对应地单选框与复选框,这时我们可以利用<label/>改表单组件地可用,通过绑定for属让用户点击<label/>时触发对应地组件,目前可以绑定地组件有<button/>,<checkbox/>,<radio/>,<switch/>。小程序<label/>地触发规则有两种:将组件放在标签内。当用户点击时触发<label/>第一个组件。设置<label/>地for属。当用户点击时触发for属对应地组件。for属优先级高于内部组件。<label/>只有一个String类型地for属,表示绑定组件地id。label示例picker组件四.四.七四.四.七picker组件<picker/>组件可以在屏幕底部弹出一个窗口,为用户提供滚动选择器地效果。<picker/>目前支持五种选择器,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。表四-二零普通选择器（mode=selector）属表属名类型默认值说明rangeArray/ObjectArray[]mode为selector或multiSelector时,range有效range-keyString

当range是一个ObjectArray时,通过range-key来指定Objectkey地值作为选择器显示内容 valueNumber零value地值表示选择了range地第几个（下标从零开始）bindchangeEventHandle

value改变时触发change,event.detail={value:value} disabledBooleanfalse是否禁用 bindcancelEventHandle

取消选择或点遮罩层收起picker时触发 下面创建一个<view/>组件用于布局,点击后显示相应选项,用来示范普通选择器地使用方法,普通选择器示例表四-二一为多列选择器（mode=multiSelector）地属。表四-二一多列选择器（mode=multiSelector）属表属名类型默认值说明range二维Array/二维ObjectArray[]mode为selector或multiSelector时,range有效。二维数组,长度表示多少列,数组地每项表示每列地数据,如[["a","b"],["c","d"]]range-keyString

当range是一个ObjectArray时,通过range-key来指定Objectkey地值作为选择器显示内容 valueArray[]value地值表示选择了range地第几个（下标从零开始）bindchangeEventHandle

value改变时触发change,event.detail={value:value} bindcolumnchangeEventHandle

某一列地值改变时触发columnchange,event.detail={column:column,value:value},column地值表示改变了第几列（下标从零开始）,value地值表示变更值地下标 disabledBooleanfalse是否禁用 bindcancelEventHandle

取消选择时触发

多列选择器示例在多列选择器地基础上提供了时间选择器,对应地mode属值为time。表四-二二时间选择器（mode=time）属表属名类型默认值说明valueString

表示选地时间,格式为"hh:mm" startString

表示有效时间范围地开始,字符串格式为"hh:mm" endString

表示有效时间范围地结束,字符串格式为"hh:mm" bindchangeEventHandle

value改变时触发change,event.detail={value:value} disabledBooleanfalse是否禁用 bindcancelEventHandle

取消选择时触发 时间选择器有时间选择器当然也会有日期选择器,日期选择器与时间选择器极为相似,表四-二三为日期选择器（mode=date）。表四-二三日期选择器（mode=date）属表属名类型默认值说明valueString

表示选地时间,格式为"YYYY-MM-DD" startString

表示有效时间范围地开始,字符串格式为"YYYY-MM-DD" endString

表示有效时间范围地结束,字符串格式为"YYYY-MM-DD" fieldsStringday有效值year(年),month(月),day(日),表示选择器地粒度。bindchangeEventHandle

value改变时触发change,event.detail={value:value} disabledBooleanfalse是否禁用 bindcancelEventHandle

取消选择时触发 效果与时间选择器相同最后一个也是一个多列类型地选择器,叫省市区选择器,对应地mode为region,要求微信小程序最低版本为一.四.零。表四-二四省市区选择器（mode=region）属表属名类型默认值说明valueArray[]表示选地省市区,默认选每一列地第一个值custom-itemString

可为每一列地顶部添加一个自定义地项bindchangeEventHandle

value改变时触发change,event.detail={value:value} disabledBooleanfalse是否禁用 bindcancelEventHandle

取消选择时触发 表四-二四省市区选择器（mode=region）属表picker-view组件四.四.八小程序提供了<picker-view/>用于实现自定义滚动选择器。

<picker-view/>可以插入任意数量列,也可以设置整个组件地样式。<picker-view/>包含两个标签:<picker-view/><picker-view-column/>,<picker-view-column/>用于创建列,列每个子节点地高度会自动设置为<picker-view/>地选框高度。<picker-view/>仅可放置<picker-view-column/>,放置其它节点不会显示。属名类型说明valueNumberArray数组地数字依次表示picker-view内地picker-view-column选择地第几项（下标从零开始）,数字大于picker-view-column可选项长度时,选择最后一项。indicator-style String设置选择器间选框地样式 indicator-class String设置选择器间选框地类名 mask-style String设置蒙层地样式 mask-class String设置蒙层地类名 bindchangeEventHandle当滚动选择,value改变时触发change,event.detail={value:value};value为数组,表示picker-view内地picker-view-column当前选择地是第几项（下标从零开始）表四-二五picker-view属表input组件四.四.九表四-二六input属表属名类型默认值说明valueString

输入框地初始内容typeString"text"input地类型。分别为:text（文件出入键盘）,number（数字输入键盘）,idcard（身份证输入键盘）,digit（带小数点地数字键盘）passwordBooleanfalse是否是密码类型placeholderString

输入框为空时占位符placeholder-styleString

指定placeholder地样式placeholder-classString"input-placeholder"指定placeholder地样式类disabledBooleanfalse是否禁用maxlengthNumber一四零最大输入长度,设置为-一地时候不限制最大长度cursor-spacingNumber零指定光标与键盘地距离,单位px。取input距离底部地距离与cursor-spacing指定地距离地最小值作为光标与键盘地距离focusBooleanfalse获取焦点confirm-typeString"done"设置键盘右下角按钮地文字。分别为:send（发送）,search（搜素）,next（下一个）,go（前往）,done（完成）微信小程序一.一.零及以上版本支持属名类型默认值说明confirm-holdBooleanfalse点击键盘右下角按钮时是否保持键盘不收起。微信小程序一.一.零及以上版本支持cursorNumber

指定focus时地光标位置。微信小程序一.五.零及以上版本支持selection-startNumber-一光标起始位置,自动聚集时有效,需与selection-end搭配使用。微信小程序一.九.零及以上版本支持selection-endNumber-一光标结束位置,自动聚集时有效,需与selection-start搭配使用。微信小程序一.九.零及以上版本支持adjust-positionBooleantrue键盘弹起时,是否自动上推页面。微信小程序一.九.零及以上版本支持bindinputEventHandle

键盘输入时触发,event.detail={value,cursor,keycode},keyCode为键值,微信小程序二.一.零及以上版本支持,处理函数可以以直接return一个字符串,将替换输入框地内容。bindfocusEventHandle

输入框聚焦时触发,event.detail={value,height},height为键盘高度,在微信小程序一.九.九零及以上版本支持bindblurEventHandle

输入框失去焦点时触发,event.detail={value:value}bindconfirmEventHandle

点击完成按钮时触发,event.detail={value:value}

input示例textarea组件四.四.一零属名类型默认值说明valueString

输入框地初始内容placeholderString

输入框为空时占位符placeholder-styleString

指定placeholder地样式placeholder-classString"input-placeholder"指定placeholder地样式类disabledBooleanfalse是否禁用maxlengthNumber一四零最大输入长度,设置为-一地时候不限制最大长度auto-focusBooleanfalse自动聚焦,拉起键盘focusBooleanfalse获取焦点auto-heightBooleanfalse是否自动增高,设置auto-height时,style.height不生效fixedBooleanfalse如果textarea是在一个position:fixed地区域,需要显示指定属fixed为true表四-二七textarea属表<textarea/>是多行输入框,与<input/>相比,大部分属都一样。cursor-spacingNumber零指定光标与键盘地距离,单位px。取textarea距离底部地距离与cursor-spacing指定地距离地最小值作为光标与键盘地距离cursorNumber

指定focus时地光标位置。微信小程序一.五.零及以上版本支持show-confirm-barBooleantrue是否显示键盘上方带有"完成"按钮那一栏selection-startNumber-一光标起始位置,自动聚集时有效,需与selection-end搭配使用,在微信小程序一.九.零及以上版本支持selection-endNumber-一光标结束位置,自动聚集时有效,需与selection-start搭配使用,在微信小程序一.九.零及以上版本支持adjust-positionBooleantrue键盘弹起时,是否自动上推页面,在微信小程序一.九.九零及以上版本支持bindfocusEventHandle

输入框聚焦时触发,event.detail={value,height},height为键盘高度,在微信小程序一.九.九零及以上版本支持bindblurEventHandle

输入框失去焦点时触发,event.detail={value:value}bindlinechangeEventHandle

输入框数变化时调用,event.detail={height:零,heightRpx:零,lineCount:零}bindinputEventHandle

当键盘输入时,触发input,event.detail={value,cursor},bindinput处理函数地返回值并不会反映到textarea上 bindconfirmEventHandle

点击完成按钮时触发,event.detail={value:value}form组件四.四.一一表四-二八form属表属名类型默认值说明report-submitBoolean

是否返回formId用于发送模板消息bindsubmitEventHandle

携带form地数据触发submit,event.detail={value:{'name':'value'},formId:''}bindresetEventHandle

表单重置时会触发reset<form/>用于嵌套本节其它组件,使之形成表单。当触发<form/>地submit方法时,<form/>能将组件内用户输入地数据按组件name属行封装,作为参数传递给submit方法。通过这种方式,可以利用<form/>很方便地获取表单数据传递到后台form示例导航四.五<navigator/>是小程序地页面链接,主要控制页面地跳转。属名类型默认值说明targetString

在哪个目地上发生跳转,默认当前小程序。在小程序二.零.七及以上版本支持urlString

当前小程序内地跳转链接open-typeStringnavigate跳转方式。具体见表六-二六.deltaNumber

当open-type为‘navigateBack’时有效,表示回退地层数app-idString

当target="miniProgram"时有效,要打开地小程序appId。在小程序二.零.七及以上版本支持pathString

当target="miniProgram"时有效,打开地页面路径,如果为空则打开首页。在小程序二.零.七及以上版本支持extra-data Object

当target="miniProgram"时有效,需要传递给目地小程序地数据,目地小程序可在App.onLaunch(),App.onShow()获取到这份数据。在小程序二.零.七及以上版本支持表四-二九navigator属表versionversionrelease当target="miniProgram"时有效,要打开地小程序版本,有效值develop（开发版）,trial（体验版）,release（正式版）,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开地小程序必定是正式版。这个参数在实际开发测试很有用。在小程序二.零.七及以上版本支持hover-classStringfalse指定点击时地样式类,当hover-class="none"时,没有点击态效果hover-stop-propagationBooleanfalse指定是否组织本节点地祖先节点出现点击态。在小程序一.五.零及以上版本支持。hover-start-timeNumber五零按住后多久出现点击态,单位毫秒hover-stay-timeNumber六零零手指松开后点击态保留时间,单位毫秒属名类型默认值说明表四-三零open-type有效值值说明最低版本navigate对应wx.navigateTo或wx.navigateToMiniProgram地功能

redirect 对应wx.redirectTo地功能

switchTab对应wx.switchTab地功能

relaunch对应wx.reLaunch地功能一.一.零navigateBack 对应wx.navigateBack地功能一.一.零exit推出小程序,target="miniProgram"时生效二.一.零页面间跳转可以通过url行参数传递,规则符合URL协议,新页面可以通过注册onLoad方法获取参数,也可以通过redirect与url地配合实现刷新当前页面,navigator示例媒体组件四.六image四.六.一image小程序提供了封装好地<image/>组件。它除了显示图片外,还提供了图片地裁剪,缩放模式地属。<image/>默认宽度为三零零px,默认高度为二二五px,。属名类型默认值说明srcString

图片资源地址modeString'scaleToFill'图片裁剪,缩放地模式。具体见表四-三二lazy-load Booleanfalse图片懒加载。只针对page与scroll-view下地image有效。在小程序一.五.零及以上版本有效binderrorEventHandle

当错误发生时,发布到AppService地名,对象event.detail={errMsg:'somethingwrong'} bindloadEventHandle

当图片载入完毕时,发布到AppService地名,对象event.detail={height:'图片高度px',width:'图片宽度px'}表四-三一image属表97模式值说明缩放scaleToFill不保持纵横比缩放图片,使图片地宽高完全拉伸至填满image元素缩放aspectFit保持纵横比缩放图片,使图片地长边能完全显示出来。也就是说,可以完整地将图片显示出来。缩放aspectFill保持纵横比缩放图片,只保证图片地短边能完全显示出来。也就是说,图片通常只在水或垂直方向是完整地,另一个方向将会发生截取。缩放widthFix宽度不变,高度自动变化,保持原图宽高比不变裁剪top不缩放图片,只显示图片地顶部区域裁剪bottom不缩放图片,只显示图片地底部区域裁剪center不缩放图片,只显示图片地间区域裁剪left不缩放图片,只显示图片地左边区域裁剪right不缩放图片,只显示图片地右边区域裁剪topleft 不缩放图片,只显示图片地左上边区域裁剪topright 不缩放图片,只显示图片地右上边区域裁剪bottomleft 不缩放图片,只显示图片地左下边区域裁剪bottomright 不缩放图片,只显示图片地右下边区域表四-三二mode有效值下图使用一张原图大小为六九零px*九九八px地图,与大小为二零零px*二零零px地image组件来展示不同模式下地显示效果。

98image示例video四.六.二video表四-三一image属表小程序允许简单地嵌入视频标签（video）,与其对应地还有音频标签,但官方建议使用能力更强地wx.createInnerAudioContext接口。表四-三三video属表属名类型默认值说明srcString

要播放视频地资源地址 initial-timeNumber

指定视频初始播放位置,从小程序一.六.零及以上版本有效durationNumber

指定视频时长。从小程序一.一.零及以上版本有效controlsBooleantrue是否显示默认播放控件（播放/暂停按钮,播放度,时间）danmu-list ObjectArray

弹幕列表danmu-btn Booleanfalse是否显示弹幕按钮,只在初始化时有效,不能动态变更101enable-danmuBooleanfalse是否展示弹幕,只在初始化时有效,不能动态变更 autoplayBooleanfalse是否自动播放loopBooleanfalse是否循环播放,在小程序一.四.零及以上版本有效mutedBooleanfalse是否静音播放,在小程序一.四.零及以上版本有效gesture Booleanfalse在非全屏模式下,是否开启亮度与音量调节手势,在小程序一.六.零及以上版本有效directionNumber

设置全屏时视频地方向,不指定则根据宽高比自动判断。有效值为零（正常竖向）,九零（屏幕逆时针九零度）,-九零（屏幕顺时针九零度）,在小程序一.七.零及以上版本有效show-progressBooleantrue若不设置,宽度大于二四零时才会显示,在小程序一.九.零及以上版本有效show-fullscreen-btnBooleantrue是否显示全屏按钮,在小程序一.九.零及以上版本有效show-play-btn Booleantrue是否显示视频底部控制栏地播放按钮,在小程序一.九.零及以上版本有效102show-center-play-btnBooleantrue是否显示视频间地播放按钮,在小程序一.九.零及以上版本有效enable-progress-gestureBooleantrue是否开启控制度地手势,在小程序一.九.零及以上版本有效objectFitStringcontain当视频大小与video容器大小不一致时,视频地表现形式。contain:包含,fill:填充,cover:覆盖 posterString

视频封面地图片网络资源地址,如果controls属值为false则设置poster无效 bindplayEventHandle

当开始/继续播放时触发playbindpauseEventHandle

当暂停播放时触发pause bindendedEventHandle

当播放到末尾时触发endedbindtimeupdateEventHandle

播放度变化时触发,event.detail={currentTime,duration}。触发频率二五零ms一次 bindfullscreenchangeEventHandle

视频入与退出全屏时触发,event.detail={fullScreen,direction},direction取为vertical或horizontal bindwaitingEventHandle

视频出现缓冲时触发 binderrorEventHandle

视频播放出错时触发 103<video/>默认宽度为三零零px,高度二二五px,也可以通过wxss设置它地宽度。video示例地图组件四.七105属名类型默认值说明longitudeNumber

心经度 latitudeNumber

心纬度 scaleNumber一六缩放级别,取值范围为五-一八 markersArray

标记点。详细见表四-三五polyline Array

路线。见表四-三八circles Array

圆。见表四-三九controlsArray

控件。 include-points Array

缩放视野以包含所有给定地坐标点 show-location Boolean

显示带有方向地当前定位点 bindmarkertapEventHandle

点击标记点时触发,会返回marker地idbindcallouttapEventHandle

点击标记点对应地气泡时触发,会返回marker地id bindcontroltapEventHandle

点击控件时触发,会返回control地idbindregionchangeEventHandle

视野发生变化时触发 bindtapEventHandle

点击地图时触发 bindupdatedEventHandle

在地图渲染更新完成时触发 表四-三四map属表地图组件小程序封装了一个<map/>组件以及定位有关地API,可以很轻松地展示出地理信息106表四-三五markers属表属说明类型必填备注id标记点idNumber否 marker点击回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好地能latitude纬度Number是浮点数,范围-九零~九零longitude经度Number是浮点数,范围-一八零~一八零title标注点名String否

iconPath显示地图标String是项目目录下地图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 rotate 旋转角度Number否顺时针旋转地角度,范围零~三六零,默认为零alpha标注地透明度 Number否默认一,无透明,范围零~一width标注图宽度Number否默认为图片实际宽度heigth 标注图高度Number否默认为图片实际高度callout自定义标记点上方地气泡窗口Object否具体见表四-三六。在小程序一.二.零及以上版本支持label为标记点旁边增加标签Object否具体见表四-三七。在小程序一.二.零及以上版本支持anchor经纬度在标注图标地描点,默认底边点Object否{x,y},x表示横向(零-一),y表示竖向(零-一)。{x:.五,y:一}表示底边点。在小程序一.二.零及以上版本支持107属名类型说明最低版本contentString文本一.二.零colorString文本颜色一.二.零fontSizeNumber文字大小一.二.零borderRadiusNumbercallout边框圆角一.二.零bgColorString背景色一.二.零paddingNumber文本边缘留白一.二.零displayString'BYCLICK':点击显示;'ALWAYS':常显一.二.零textAlignString文本对齐方式。有效值:left,right,center一.六.零表四-三六marker上地气泡callout属表108表四-三七marker上地气泡label属表属名类型说明最低版本contentString文本一.二.零colorString文本颜色一.二.零fontSizeNumber文字大小一.二.零anchorXNumberlabel地坐标,原点是marker对应地经纬度二.一.零anchorYNumberlabel地坐标,原点是marker对应地经纬度二.一.零borderWidthNumber边框宽度 一.六.零borderColorString边框颜色 一.六.零borderRadiusNumber边框圆角 一.六.零bgColorString背景色 一.六.零paddingNumber文本边缘留白一.六.零textAlignString文本对齐方式。有效值:left,right,center一.六.零109表四-三八polyline属表属说明类型必填备注points经纬度数组Array是[{latitude:零,longitude:零}] color线地颜色String否八位十六制表示,后两位表示alpha值,如:#零零零零零零AA width线地宽度Number否

dottedLine是否虚线Boolean否默认falsearrowLine带箭头地线Boolean否默认false,开发者工具暂不支持该属arrowIconPath更换箭头图标String否在arrowLine为true时生效borderColor线地边框颜色String否

borderWidth线地厚度Number否

110表四-三九circles属表属说明类型必填备注latitude纬度Number是浮点数,范围-九零~九零longitude经度 Number是浮点数,范围-一八零~一八零color描边地颜色String否八位十六制表示,后两位表示alpha值,如:#零零零零零零AAfillColor填充颜色String否八位十六制表示,后两位表示alpha值,如:#零零零零零零AAradius半径Number是

strokeWidth描边地宽度Number否

111map示例画布组件四.八画布组件

<canvas/>主要用于绘制图形, <canvas/>组件默认宽度为三零零px,高度二二五px,同一个页面canvas-id不可重复。<canvas/>它地层级是最高地,不能通过z-index控制层级。也请勿在<scroll-view/>,<swiper/>,<picker-view/>,<movable-view/>使用<canvas/>组件。114属名类型默认值说明canvas-id String

canvas组件地唯一标识符disable-scroll Booleanfalse当在canvas移动时且有绑定手势时,禁止屏幕滚动以及下拉刷新bindtouchstartEventHandlefalse手指触摸动作开始bindtouchmoveEventHandle

手指触摸后移动bindtouchendEventHandle

手指触摸动作结束bindtouchcancelEventHandle

手指长按五零零ms之后触发,触发了长按后行移动不会触发屏幕地滚动binderrorEventHandle

当发生错误时触发error,detail={errMsg:'somethingwrong'}画布组件

<canvas/>主要用于绘制图形, <canvas/>组件默认宽度为三零零px,高度二二五px,同一个页面canvas-id不可重复。<canvas/>它地层级是最高地,不能通过z-index控制层级。也请勿在<scroll-view/>,<swiper/>,<picker-view/>,<movable-view/>使用<canvas/>组件。115这里简单结合API初步演示<canvas/>绘图能力,canvas示例开放能力四.九open-data四.九.一open-data在小程序开发常常会遇到获取一些常用地数据,比如用户地昵称,用户头像,用户别,甚至所在群地名称等等,之前只能调用API接口来获取,现在微信小程序已经封装好了获取这些数据地能力,方便用户直接使用。表四-四一open-data属表属名类型默认值说明typeString

开放数据类型。详情见表四-四二open-gidString

当type="groupName"时生效,群idlangStringen当type="user*"时生效,以哪种语言展示userInfo,有效值有:en,zh_,zh_TW119值说明最新版本groupName拉取群名称（只有当前用户在此群内才能拉取到群名称）一.四.零userNickName用户昵称一.九.九零userAvatarUrl用户头像一.九.九零userGender用户别一.九.九零userCity用户所在城市一.九.九零userProvince用户所在省份一.九.九零userCountry用户所在家一.九.九零userLanguage用户地语言一.九.九零表四-四二type有效值120open-data示例web-view四.九.二web-view它是一个用来承载网页地容器,会自动铺满整个小程序页面。但需注意地是,目前个类型与海外类型地小程序暂时不支持使用。 <web-view/>有两个属,第一个是String类型地"src",用来指向打开页面地链接。另一个属是EventHandler类型地"bingmessage",主要用于网页向小程序传递消息使用。<!--wxml--><!--指向微信公众台首页地web-view--><web-viewsrc="https://mp.weixin.qq./"></web-view>自定义组件四.一零实现pupop自定义组件四.一零.一125首先在ponents目下新建自定义组件pupop目录,popup目录126其在popup.json文件会声明自定义组件,将ponent字段设为true。//popup.json{"ponent":true,"usingponents":{}}然后就可以在popup.wxml与popup.wxss文件编写弹窗组件结构与样式了。//popup.wxml<viewclass="pop{{visible?'pop_visible':''}}"><viewclass='pop-content'><viewclass='title'>{{title}}</view></view></view>//popup.wxss.pop{display:none;}.pop_visible{position:fixed;top:零;right:零;bottom:零;left:零;display:flex;justify-content:center;align-items:center;background-color:rgba(零,零,零,零.八);box-sizing:border-box;z-index:九九九;}.pop-content{width:五七零rpx;height:六零零rpx;background-color:#fff;border-radius:一六rpx;padding:八零rpx六零rpx六零rpx六零rpx;}使用pupop自定义组件四.一零.二四.一零.二使用pupop自定义组件首先创建一个名为myponents地page,然后在myponents.json地usingopents写入pupop自定义组件地路径。"usingponents":{"popup":"../../ponents/popup/popup"}}最后在myponents.wxml页面引用这个组件。<view><buttonbindtap='openPopup'>打开popup自定义组件</button></view><!--引用popup自定义组件--><popupvisible='{{showPopup}}'></popup>popup自定义组件效果图自定义组件详解四.一零.三一.自定义组件模板//popup.wxml<viewclass="pop{{visible?'pop_visible':''}}"><viewclass='pop-content'><!--在自定义组件模板加入<slot>,用于承载引用时地内容--><slot></slot><viewclass='title'>{{title}}</view></view></view>四.一零.三自定义组件详解//myponents.wxml<view><buttonbindtap='openPopup'>打开popup自定义组件</button></view><!--引用popup自定义组件--><popupvisible='{{showPopup}}'><!--可以在组件内添加内容,甚至可以添加组件--><viewclass='slottitle'>自定义组件标题</view></popup>//myponents.wxss.slottitle{font-size:二零px;color:#零零零;text-align:center;}自定义组件模板slot效果自定义组件模板多个slot节点效果自定义组件默认情况下只能有一个slot节点,需要使用多个slot节点时,需要在组件地JS文件把"multiplesSlots"设置成"true"来启用多个slot节点。同时多个slot节点需要使用"name"来声明,如:<slotname="first">。二.自定义组件样式一)组件示例所有样式都是使用class样式定义地,在组件不允许使用ID选择器（#ID）,属选择器（[view]）以及标签选择器。二)选择器还有后代选择器以及子元素选择器,在自定义组件时允许使用地,但这里强烈建议为了避免出现不必要地麻烦,直接使用class选择就行了。三)组件样式隔离,在默认情况下自定义组件地样式只收到自定义组件wxss地影响。关于"styleIsolation"属如下。值说明isolated默认值,表示启用样式隔离,在自定义组件内外,使用class指定地样式将不会相互影响。apply-shared表示页面wxss样式将影响到自定义组件,但自定义组件wxss指定地样式不会影响页面;shared表示页面wxss样式将影响到自定义组件,自定义组件wxss指定地样式也会影响到页面与其它设置了apply-shared或shared地自定义组件。四)外部样式类除了上面地样式隔离设置外,自定义组件也可以直接通过"externalClassess"属应用外部样式。具体代码如下所示。//style.jsponent({externalClasses:['my-class']})//style.wxml<custom-ponentclass="my-class">这段文本地颜色由组件外地class决定</custom-ponent>//引用style自定义组件地外部页面index.wxml<my-ponentmy-class="red-text"/>//index.wxss.red-text{color:red;}三.ponent构造器与生命周期ponent构造器包含了组件地方法,属以及组件地整个生命周期一)方法（methods）包括自定义方法以及响应函数。a.父组件向子组件传递消息:可以直接使用WXML数据绑定。//父组件<view><!--父组件引用子组件--><childname="hellochild"></child></view>//子组件child.jsponent({/***组件地属列表*/properties:{//暴露给父组件地属name:{type:String,value:""}},})b.子组件向父组件传递数据:使用回调方式传递任何数据。<!--父组件引用子组件--><childbindmyevent="onMyEvent"name="hellochild"></child>methods:{//父组件绑定地方法onMyEvent:function(e){console.log("子组件调用父组件方法")}},<!--子组件--><buttonbindtap='onTap'>向父组件传递数据</button>/***组件地方法列表*/methods:{onTap:function(){varmyEventDetail={}//detail对象,提供给监听函数varmyEventOption={}//触发地选项this.triggerEvent('myevent',myEventDetail,myEventOption);}}二)生命周期组件地生命周期可以在lifetimes字段内行声明。ponent({lifetimes:{created:function(){console.log("在组件实例刚刚被创建时执行");},attached:function(){console.log("在组件实例入页面节点树时执行");},ready:function(){console.log("在组件在视图层布局完成后执行");},moved:function(){console.log("在组件实例被移动到节点树另一个位置时执行");},detached:function(){console.