东昌网站建设,哪里有做网站平台,做电影网站需要注意事项,移动网站排名教程文章目录 微信小程序中常见组件的使用视图组件viewscroll-viewswipermovable-area 基础组件icontextrich-textprogress 表单组件buttoncheckbox、checkbox-grouplabelforminputpicker单列选择器多列选择器时间选择器日期选择器地区选择器 picker-viewradiosliderswit… 文章目录 微信小程序中常见组件的使用视图组件viewscroll-viewswipermovable-area 基础组件icontextrich-textprogress 表单组件buttoncheckbox、checkbox-grouplabelforminputpicker单列选择器多列选择器时间选择器日期选择器地区选择器 picker-viewradiosliderswitch表单综合练习 导航组件媒体组件imagevideo 微信小程序中常见组件的使用 官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/ 微信小程序中组件的概念和Vue中是一致的好像现在各大主流框架中组件的概念都是互通的
注意所有组件名和属性都是小写多个单词会以英文横杠 - 进行连接。对于一些容器组件其内容可以声明在其开始标签和结束标签之间。
下面表格列举了所有组件都拥有属性主要涉及样式和事件绑定
属性名类型描述其他说明idString组件的唯一标示保持整个页面唯一classString组件的样式类在对应的WXSS中定义的样式类styleString组件的内联样式可以通过数据绑定进行动态设置的内联样式hiddenBoolean组件是否显示所有组件默认显示data-*Any自定义属性组件上触发的事件时会发送给事件处理函数bind / catchEventHandler事件详情见3.5节 微信小程序中组件的分类 视图容器 基础内容 表单组件 导航组件 媒体组件 地图组件 画布组件 开放能力 无障碍访问 导航栏 页面属性配置节点
视图组件
view 用户基础的展示 视图组件最开始就接触了
view/viewView组件属性说明
属性类型默认值必填说明最低版本hover-classstringnone否指定按下去的样式类。当 hover-classnone 时没有点击态效果1.0.0hover-stop-propagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态1.5.0hover-start-timenumber50否按住后多久出现点击态单位毫秒1.0.0hover-stay-timenumber400否手指松开后点击态保留时间单位毫秒1.0.0
示例
index.wxtml
view classcontainer
hover-start-time1500
hover-stay-time1000
hover-classgreen父组件view classred size hover-classgreen hover-start-time1500 hover-stay-time1000 hover-stop-propagation{{false}}View组件/view
/view注意false和true需要使用{{}}包起来否则无论设置成false还是true最终都是true字符串是真
index.wxss
/* 父组件样式 */
.container{background-color: grey;
}
/* 初始化样式 */
.red{background-color: hotpink;color: red;
}
.size{font-size: 38px;
}/* 点击样式 */
.green{color: green;
}默认展示红色点击1秒钟后显示为绿色并持续3秒 scroll-view 用户制作滚动 scroll-view/scroll-view注意事项
scroller-view内部子组件的高度或宽度要小于scroller-view组件这样才能出现滚动条效果
scroll-view组件常用属性
属性类型默认值必填说明最低版本scroll-xbooleanfalse否允许横向滚动1.0.0scroll-ybooleanfalse否允许纵向滚动1.0.0upper-thresholdnumber/string50否距顶部/左边多远时触发 scrolltoupper 事件1.0.0lower-thresholdnumber/string50否距底部/右边多远时触发 scrolltolower 事件1.0.0scroll-topnumber/string否设置竖向滚动条位置1.0.0scroll-leftnumber/string否设置横向滚动条位置1.0.0scroll-into-viewstring否值应为某子元素idid不能以数字开头。设置哪个方向可滚动则在哪个方向滚动到该元素1.0.0scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡1.0.0enable-back-to-topbooleanfalse否iOS点击顶部状态栏、安卓双击标题栏时滚动条返回顶部只支持竖向1.0.0enable-flexbooleanfalse否启用 flexbox 布局。开启后当前节点声明了 display: flex 就会成为 flex container并作用于其孩子节点。2.7.3scroll-anchoringbooleanfalse否开启 scroll anchoring 特性即控制滚动位置不随内容变化而抖动仅在 iOS 下生效安卓下可参考 CSS overflow-anchor 属性。2.8.2refresher-enabledbooleanfalse否开启自定义下拉刷新2.10.1refresher-thresholdnumber45否设置自定义下拉刷新阈值2.10.1refresher-default-stylestringblack否设置自定义下拉刷新默认样式支持设置 black | white | none none 表示不使用默认样式2.10.1refresher-backgroundstring#FFF否设置自定义下拉刷新区域背景颜色2.10.1refresher-triggeredbooleanfalse否设置当前下拉刷新状态true 表示下拉刷新已经被触发false 表示下拉刷新未被触发2.10.1enhancedbooleanfalse否启用 scroll-view 增强特性启用后可通过 ScrollViewContext 操作 scroll-view2.12.0bouncesbooleantrue否iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)2.12.0show-scrollbarbooleantrue否滚动条显隐控制 (同时开启 enhanced 属性后生效)2.12.0paging-enabledbooleanfalse否分页滑动效果 (同时开启 enhanced 属性后生效)2.12.0fast-decelerationbooleanfalse否滑动减速速率控制 (同时开启 enhanced 属性后生效)2.12.0binddragstarteventhandle否滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }2.12.0binddraggingeventhandle否滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }2.12.0binddragendeventhandle否滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity }2.12.0bindscrolltouppereventhandle否滚动到顶部/左边时触发1.0.0bindscrolltolowereventhandle否滚动到底部/右边时触发1.0.0bindscrolleventhandle否滚动时触发event.detail {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}1.0.0bindrefresherpullingeventhandle否自定义下拉刷新控件被下拉2.10.1bindrefresherrefresheventhandle否自定义下拉刷新被触发2.10.1bindrefresherrestoreeventhandle否自定义下拉刷新被复位2.10.1bindrefresheraborteventhandle否自定义下拉刷新被中止2.10.1
示例
index.wxml
view classcontainerview classpage-sectionview classpage-section-titletextVertical Scroll\n纵向滚动/text/viewview classpage-section-spacingscroll-view classscroll-container scroll-y{{true}} bindscrolltoupperscrolltoupper bindscrolltolowerscrolltolower view iddemo1 classscroll-view-item demo-text-1A/viewview iddemo2 classscroll-view-item demo-text-2B/viewview iddemo3 classscroll-view-item demo-text-3C/view/scroll-view/view/view
/viewindex.wxss
.scroll-view-item{width: 100%;height: 100px;text-align: center;line-height: 100px;font-size: 26px;font-weight: bold;
}
.demo-text-1{background-color: green;
}
.demo-text-2{background-color: red;
}
.demo-text-3{background-color: blue;
}
.scroll-container{height: 200px;border: 1px solid yellow;white-space: nowrap;
}index.js
Page({data: {},scrolltoupper:function(){console.log(滚动到顶部);},scrolltolower:function(){console.log(滚动到底部);}
})swiper 用户制作轮播图 swiper/swiper注意滑块视图容器。其中只可放置swiper-item组件否则会导致未定义的行为我们可以使用swiper实现轮播图效果
滑块组件属性介绍
属性类型默认值必填说明最低版本indicator-dotsbooleanfalse否是否显示面板指示点1.0.0indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0autoplaybooleanfalse否是否自动切换1.0.0currentnumber0否当前所在滑块的 index1.0.0intervalnumber5000否自动切换时间间隔1.0.0durationnumber500否滑动动画时长1.0.0circularbooleanfalse否是否采用衔接滑动1.0.0verticalbooleanfalse否滑动方向是否为纵向1.0.0previous-marginstring0px否前边距可用于露出前一项的一小部分接受 px 和 rpx 值1.9.0next-marginstring0px否后边距可用于露出后一项的一小部分接受 px 和 rpx 值1.9.0snap-to-edgebooleanfalse否当 swiper-item 的个数大于等于 2关闭 circular 并且开启 previous-margin 或 next-margin 的时候可以指定这个边距是否应用到第一个、最后一个元素2.12.1display-multiple-itemsnumber1否同时显示的滑块数量1.9.0easing-functionstringdefault否指定 swiper 切换缓动动画类型2.6.5 合法值说明default默认缓动函数linear线性动画easeInCubic缓入动画easeOutCubic缓出动画easeInOutCubic缓入缓出动画bindchangeeventhandle否current 改变时会触发 change 事件event.detail {current, source}1.0.0bindtransitioneventhandle否swiper-item 的位置发生改变时会触发 transition 事件event.detail {dx: dx, dy: dy}2.4.3bindanimationfinisheventhandle否动画结束时会触发 animationfinish 事件event.detail 同上1.9.0
index.wxml:
view classcontainerview classpage-bodyview classpage-section page-section-spacing swiperswiper indicator-dots{{indicatorDots}}autoplay{{autoplay}} interval{{interval}} duration{{duration}}block wx:for{{imgUrls}} wx:key*thisswiper-itemimage src{{item}} classswiper-item/image/swiper-item/block/swiper/viewview classpage-section stylemargin-top: 40rpx;margin-bottom: 0;view classweui-cells weui-cells_after-titleview classweui-cell weui-cell_switchview classweui-cell__bd指示点/viewview classweui-cell__ftswitch checked{{indicatorDots}} bindchangechangeIndicatorDots //view/viewview classweui-cell weui-cell_switchview classweui-cell__bd自动播放/viewview classweui-cell__ftswitch checked{{autoplay}} bindchangechangeAutoplay //view/view/view/viewview classpage-section page-section-spacingview classpage-section-titletext幻灯片切换时长{{duration}}(ms)/text/viewslider bindchangedurationChange value{{duration}} min500 max2000/view classpage-section-titletext自动播放间隔时长{{interval}}(ms)/text/viewslider bindchangeintervalChange value{{interval}} min2000 max10000//view/view
/viewindex.wxsss
page {background-color: #F8F8F8;height: 100%;font-size: 32rpx;line-height: 1.6;
}.page-body {padding-top: 60rpx;
}.page-section {width: 100%;margin-bottom: 60rpx;
}.page-section_center {display: flex;flex-direction: column;align-items: center;
}.page-section:last-child {margin-bottom: 0;
}.page-section-gap {box-sizing: border-box;padding: 0 30rpx;
}.page-section-spacing {box-sizing: border-box;padding: 0 80rpx;
}.page-section-title {font-size: 28rpx;color: #999999;margin-bottom: 10rpx;padding-left: 30rpx;padding-right: 30rpx;
}.page-section-gap .page-section-title {padding-left: 0;padding-right: 0;
}button {margin-bottom: 30rpx;
}button:last-child {margin-bottom: 0;
}.page-section-title {padding: 0;
}.swiper-item {display: block;height: 150px;
}.page-section-title {margin-top: 60rpx;position: relative;
}.weui-cells {position: relative;margin-top: 1.17647059em;background-color: #FFFFFF;line-height: 1.41176471;font-size: 17px;
}.weui-cells_after-title {margin-top: 0;
}.weui-cell {padding: 10px 15px;position: relative;display: -webkit-box;display: -webkit-flex;display: flex;align-items: center;
}.weui-cell_switch {padding-top: 6px;padding-bottom: 6px;
}.weui-cell__bd {flex: 1;
}.weui-cell__ft {text-align: right;color: #999999;
}index.js
Page({data: {imgUrls: [./images/1.jpg, ./images/2.jpg, ./images/3.jpg],indicatorDots: true,vertical: false,autoplay: false,circular: false,interval: 2000,duration: 500,previousMargin: 0,nextMargin: 0},changeProperty: function (e) {var propertyName e.currentTarget.dataset.propertyNamevar newData {}newData[propertyName] e.detail.valuethis.setData(newData)},changeIndicatorDots: function (e) {this.setData({indicatorDots: !this.data.indicatorDots})},changeAutoplay: function (e) {this.setData({autoplay: !this.data.autoplay})},intervalChange: function (e) {this.setData({interval: e.detail.value})},durationChange: function (e) {this.setData({duration: e.detail.value})}})movable-area 用户设置组件拖动的方式 movable-area组件属性说明
属性类型默认值必填说明最低版本scale-areaBooleanfalse否当里面的 movable-view 设置为支持双指缩放时设置此值可将缩放手势生效区域修改为整个movable-area1.9.90
注意事项
movable-area 必须设置 width 和height属性不设置默认为10px当 movable-view 小于 movable-area 时movable-view的移动范围是在 movable-area 内当 movable-view 大于 movable-area 时movable-view的移动范围必须包含movable-areax轴方向和 y 轴方向分开考虑movable-view必须在 movable-area 组件中并且必须是直接子节点否则不能移动movable-view 必须设置 width 和height属性不设置默认为10pxmovable-view 默认为绝对定位top和 left 属性为0px
movable-view组件属性说明
属性类型默认值必填说明最低版本directionstringnone否movable-view的移动方向属性值有all、vertical、horizontal、none1.2.0inertiabooleanfalse否movable-view是否带有惯性1.2.0out-of-boundsbooleanfalse否超过可移动区域后movable-view是否还可以移动1.2.0xnumber/string否定义 x 轴方向的偏移如果 x 的值不在可移动范围内会自动移动到可移动范围改变 x 的值会触发动画单位支持px默认、rpx1.2.0ynumber/string否定义 y 轴方向的偏移如果 y 的值不在可移动范围内会自动移动到可移动范围改变 y 的值会触发动画单位支持px默认、rpx1.2.0dampingnumber20否阻尼系数用于控制 x 或y改变时的动画和过界回弹的动画值越大移动越快1.2.0frictionnumber2否摩擦系数用于控制惯性滑动的动画值越大摩擦力越大滑动越快停止必须大于0否则会被设置成默认值1.2.0disabledbooleanfalse否是否禁用1.9.90scalebooleanfalse否是否支持双指缩放默认缩放手势生效区域是在 movable-view 内1.9.90scale-minnumber0.5否定义缩放倍数最小值1.9.90scale-maxnumber10否定义缩放倍数最大值1.9.90scale-valuenumber1否定义缩放倍数取值范围为 0.5 - 101.9.90animationbooleantrue否是否使用动画2.1.0bindchangeeventhandle否拖动过程中触发的事件event.detail {x, y, source}1.9.90bindscaleeventhandle否缩放过程中触发的事件event.detail {x, y, scale}x和 y 字段在2.1.0之后支持1.9.90htouchmoveeventhandle否初次手指触摸后移动为横向的移动时触发如果 catch 此事件则意味着 touchmove 事件也被catch1.9.90vtouchmoveeventhandle否初次手指触摸后移动为纵向的移动时触发如果 catch 此事件则意味着 touchmove 事件也被catch1.9.90
index.wxml:
movable-area classcontainer1movable-view classsize directionallA/movable-view
/movable-areaindex.wxss:
.container1{width: 100%;height: 500px;background-color: grey;
}.size{width:100px;height: 100px;background-color: lawngreen;text-align: center;font-size: 26px;line-height: 100px;
}基础组件
名称功能说明icon图标组件progress进度条rich-text富文本text文本
icon
icon/icon属性说明:
属性类型默认值必填说明最低版本typestring是icon的类型有效值success, success_no_circle, info, warn, waiting, cancel, download, search, clear1.0.0sizenumber/string23否icon的大小单位默认为px2.4.0起支持传入单位(rpx/px)2.21.3起支持传入其余单位(rem 等)。1.0.0colorstring否icon的颜色同 css 的color1.0.0
icon typesuccess size60 colorblue/icontext 文本组件用于显示文本 text/text注意事项
该组件支持转义符text标签不可以嵌套别的组件但是可以嵌套自己如果需要长按选中文本的话必须使用text标签包裹
属性说明:
属性类型默认值必填说明最低版本selectablebooleanfalse否文本是否可选 (已废弃)1.1.0user-selectbooleanfalse否文本是否可选该属性会使文本节点显示为 inline-block2.12.1spacestring否显示连续空格1.4.0 合法值说明ensp中文字符空格一半大小emsp中文字符空格大小nbsp根据字体设置的空格大小decodebooleanfalse否是否解码1.4.0
text decode{{true}}你好, 世界 gt lt; nbsp;
/textrich-text 富文本组件 rich-text/rich-text注意事项
nodes 不推荐使用 String 类型性能会有所下降。rich-text 组件内屏蔽所有节点的事件。attrs 属性不支持 id 支持 class 。name 属性大小写不敏感。如果使用了不受信任的 HTML 节点该节点及其所有子节点将会被移除。img 标签仅支持网络图片。如果在自定义组件中使用 rich-text 组件那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
rich-text组件属性说明:
属性类型默认值必填说明最低版本nodesarray/string[]否节点列表/HTML String1.4.0spacestring否显示连续空格2.4.1 合法值说明ensp中文字符空格一半大小emsp中文字符空格大小nbsp根据字体设置的空格大小user-selectbooleanfalse否文本是否可选该属性会使节点显示为 block2.24.0
元素节点type node
属性说明类型必填备注name标签名string是支持部分受信任的 HTML 节点attrs属性object否支持部分受信任的属性遵循 Pascal 命名法children子节点列表array否结构和 nodes 一致
文本节点type text
属性说明类型必填备注text文本string是支持entities
示例
view classcontainerrich-text nodes{{htmlSnip}}/rich-texthr/rich-text nodes{{arraySnip}}/rich-text
/viewconst htmlSnip div classdiv_classh1Title/h1p classpLife isnbsp;ilike/inbsp;a box ofbnbsp;chocolates/b./p/div;
Page({/*** 页面的初始数据*/data: {htmlSnip:htmlSnip,arraySnip:[{name: div,attrs: {class: div_class,style: line-height: 60px; color: #1AAD19;},children: [{type: text,text: You never know what you\re gonna get.}]}]}
})progress 进程组件 progress/progress属性说明:
属性类型默认值必填说明最低版本percentnumber否百分比0~1001.0.0show-infobooleanfalse否在进度条右侧显示百分比1.0.0border-radiusnumber/string0否圆角大小2.3.1font-sizenumber/string16否右侧百分比字体大小2.3.1stroke-widthnumber/string6否进度条线的宽度1.0.0colorstring#09BB07否进度条颜色请使用activeColor1.0.0activeColorstring#09BB07否已选择的进度条的颜色1.0.0backgroundColorstring#EBEBEB否未选择的进度条的颜色1.0.0activebooleanfalse否进度条从左往右的动画1.0.0active-modestringbackwards否backwards: 动画从头播forwards动画从上次结束点接着播1.7.0durationnumber30否进度增加1%所需毫秒数2.8.2bindactiveendeventhandle否动画完成事件2.4.1
示例
text20%/text
view classprogress-boxprogress percent20 show-info stroke-width3/
/viewtext40%/textview classprogress-boxprogress percent40 active stroke-width3 /
/viewtext60%/textview classprogress-boxprogress percent60 active stroke-width3 /
/viewtext80%/textview classprogress-boxprogress percent80 color#10AEFF active stroke-width3 /
/view表单组件
名称功能说明button按钮checkbox多选项目checkbox-group多项选择器内部由多个checkbox组成editor富文本编辑器可以对图片、文字进行编辑。form表单。将组件内的用户输入的switch input checkbox slider radio picker 提交input输入框keyboard-accessory设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图label用来改进表单组件的可用性picker从底部弹起的滚动选择器picker-view组件中宽高自嵌入页面的滚动选择器。其中只可放置 picker-view-column组件其它节点不会显示picker-view-column滚动选择器子项。仅可放置于picker-view中其孩子节点的高度会自动设置成与picker-view的选中框的高度一致radio单选项目radio-group单项选择器内部由多个 radio 组成slider滑动选择器switch开关选择器textarea多行输入框
button 按钮组件 button sizemini typeprimary loadingtrue按钮/button
button sizemini typewarn disabledtrue 按钮2/button
button sizemini plaintrue typewarn 按钮3/button注意事项
button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}bindgetphonenumber 从1.2.0 开始支持但是在1.5.3以下版本中无法使用wx.canIUse进行检测建议使用基础库版本进行判断。在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey导致解密失败。建议开发者提前进行 login或者在回调中先使用 checkSession 进行登录态检查避免 login 刷新登录态。从 2.21.2 起对getPhoneNumber接口进行了安全升级bindgetphonenumber 返回的信息中增加code参数code是一个动态的令牌开发者拿到code后需调用微信后台接口换取手机号。详情新版接口使用指南从 2.1.0 起button 可作为原生组件的子节点嵌入以便在原生组件上使用 open-type 的能力。目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而将 button 封装在自定义组件中而 form 在自定义组件外将会使这个 button 的 form-type 失效
属性说明:
属性类型默认值必填说明最低版本sizestringdefault否按钮的大小1.0.0 合法值说明default默认大小mini小尺寸typestringdefault否按钮的样式类型1.0.0 合法值说明primary绿色default白色warn红色plainbooleanfalse否按钮是否镂空背景色透明1.0.0disabledbooleanfalse否是否禁用1.0.0loadingbooleanfalse否名称前是否带 loading 图标1.0.0form-typestring否用于 form 组件点击分别会触发 form 组件的 submit/reset 事件1.0.0 合法值说明submit提交表单reset重置表单open-typestring否微信开放能力1.1.0 合法值说明最低版本contact打开客服会话如果用户在会话中点击消息卡片后返回小程序可以从 bindcontact 回调中获得具体信息具体说明 *小程序插件中不能使用*1.1.0share触发用户转发使用前建议先阅读使用指引1.2.0getPhoneNumber获取用户手机号可以从 bindgetphonenumber 回调中获取到用户信息具体说明 *小程序插件中不能使用*1.2.0getUserInfo获取用户信息可以从 bindgetuserinfo 回调中获取到用户信息 *小程序插件中不能使用*1.3.0launchApp打开APP可以通过 app-parameter 属性设定向 APP 传的参数具体说明1.9.5openSetting打开授权设置页2.0.7feedback打开“意见反馈”页面用户可提交反馈内容并上传日志开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容2.1.0chooseAvatar获取用户头像可以从 bindchooseavatar 回调中获取到头像信息2.21.2hover-classstringbutton-hover否指定按钮按下去的样式类。当 hover-classnone 时没有点击态效果1.0.0hover-stop-propagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态1.5.0hover-start-timenumber20否按住后多久出现点击态单位毫秒1.0.0hover-stay-timenumber70否手指松开后点击态保留时间单位毫秒1.0.0langstringen否指定返回用户信息的语言zh_CN 简体中文zh_TW 繁体中文en 英文。1.3.0 合法值说明en英文zh_CN简体中文zh_TW繁体中文session-fromstring否会话来源open-typecontact时有效1.4.0send-message-titlestring当前标题否会话内消息卡片标题open-typecontact时有效1.5.0send-message-pathstring当前分享路径否会话内消息卡片点击跳转小程序路径open-typecontact时有效1.5.0send-message-imgstring截图否会话内消息卡片图片open-typecontact时有效1.5.0app-parameterstring否打开 APP 时向 APP 传递的参数open-typelaunchApp时有效1.9.5show-message-cardbooleanfalse否是否显示会话内消息卡片设置此参数为 true用户进入客服会话会在右下角显示可能要发送的小程序提示用户点击后可以快速发送小程序消息open-typecontact时有效1.5.0bindgetuserinfoeventhandle否用户点击该按钮时会返回获取到的用户信息回调的 detail 数据与wx.getUserInfo返回的一致open-typegetUserInfo时有效1.3.0bindcontacteventhandle否客服消息回调open-typecontact时有效1.5.0bindgetphonenumbereventhandle否获取用户手机号回调open-typegetPhoneNumber时有效1.2.0binderroreventhandle否当使用开放能力时发生错误的回调open-typelaunchApp时有效1.9.5bindopensettingeventhandle否在打开授权设置页后回调open-typeopenSetting时有效2.0.7bindlaunchappeventhandle否打开 APP 成功的回调open-typelaunchApp时有效2.4.4bindchooseavatareventhandle否获取用户头像回调open-typechooseAvatar时有效2.21.2
checkbox、checkbox-group checkbox-group bindchangechooseLovecheckbox valueread checkedtrue//checkbox-group注意事项同一组的checkbox需要用一个checkbox-group包裹
checkbox-group属性说明 :
属性类型默认值必填说明最低版本bindchangeEventHandle否checkbox-group中选中项发生改变时触发 change 事件detail {value:[选中的 checkbox 的value的数组]}1.0.0
checkbox属性说明:
属性类型默认值必填说明最低版本valuestring否checkbox标识选中时触发checkbox-group的 change 事件并携带 checkbox 的 value1.0.0disabledbooleanfalse否是否禁用1.0.0checkedbooleanfalse否当前是否选中可用来设置默认选中1.0.0colorstring#09BB07否checkbox的颜色同 css 的color1.0.0
view爱好: checkbox-group bindchangechooseLovecheckbox valueread checkedtrue/ 阅读checkbox valuesport/ 运动checkbox valuemusic / 音乐 /checkbox-group
/view
viewtext循环生成checkbox/textcheckbox-groupview wx:for{{provinces}} wx:key*thischeckbox value{{item.py}} /{{item.text}}/view/checkbox-group
/viewPage({data:{provinces:[{py:hunan,text:湖南},{py:guangdong,text:广东},{py:shanghai,text:上海},{py:hubei,text:湖北},]},chooseLove:function(e){//通过事件对象的detail.value获取选中的checkbox的valueconsole.log(e.detail.value)}
})label 我们可以使用label包裹文本,与对应的表单组件进行管理, 从而当我们点击文本的时候,也可以操作对应绑定的组件, label使用for管理对应组件的id目前可以绑定的控件有button, checkbox, radio, switch, input 属性说明:
属性类型默认值必填说明最低版本forstring否绑定控件的 id1.0.0
我们上面的checkbox案例,当我们点击文本的时候,不会对我们的checkbox框进行操作, 这样不是很友好,那我们可以把文本使用label包裹, 并使用for关联对应的checkbox,这样我们就可以实现上面的效果了.
viewtext循环生成checkbox/textcheckbox-groupview wx:for{{provinces}} wx:key*thischeckbox value{{item.py}} id{{item.py}} / label for{{item.py}}{{item.text}}/label/view/checkbox-group
/viewPage({data:{provinces:[{py:hunan,text:湖南},{py:guangdong,text:广东},{py:shanghai,text:上海},{py:hubei,text:湖北},]},chooseLove:function(e){//通过事件对象的detail.value获取选中的checkbox的valueconsole.log(e.detail.value)}
})form 表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。 当点击 form 表单中 form-type 为 submit 的 button 组件时会将表单组件中的 value 值进行提交需要在表单组件中加上 name 来作为 key。 form/form表单组件属性说明 属性类型默认值必填说明最低版本report-submitbooleanfalse否是否返回 formId 用于发送模板消息1.0.0report-submit-timeoutnumber0否等待一段时间毫秒数以确认 formId 是否生效。如果未指定这个参数formId 有很小的概率是无效的如遇到网络失败的情况。指定这个参数将可以检测 formId 是否有效以这个参数的时间作为这项检测的超时时间。如果失败将返回 requestFormId:fail 开头的 formId2.6.2bindsubmiteventhandle否携带 form 中的数据触发 submit 事件event.detail {value : {name: value} , formId: }1.0.0bindreseteventhandle否表单重置时会触发 reset 事件1.0.0
form bindsubmitsubmitFormview爱好: checkbox-group bindchangechooseLove namelovecheckbox valueread checkedtrue/ 阅读checkbox valuesport/ 运动checkbox valuemusic / 音乐 /checkbox-group/viewviewtext循环生成checkbox/textcheckbox-group nameprovinceview wx:for{{provinces}} wx:key*thischeckbox value{{item.py}} id{{item.py}} / label for{{item.py}}{{item.text}}/label/view/checkbox-group/viewbutton form-typesubmit typeprimary提交/buttonbutton form-typereset typewarn重置/button
/formPage({data: {provinces:[{py:hunan,text:湖南},{py:guangdong,text:广东},{py:shanghai,text:上海},{py:hubei,text:湖北},]},// 选中爱好触发事件chooseLove:function(e){// 打印选中的爱好console.log(e.detail.value)},// 提交表单触发submitForm:function(e){// 打印选中的checkboxconsole.log(e.detail.value)}
})input 输入框组件用户表单数据的输入 intpu/intpuconfirm-type的最终表现与手机输入法本身的实现有关部分安卓系统输入法和第三方输入法可能不支持或不完全支持input 组件是一个原生组件字体是系统字体所以无法设置 font-family在 input 聚焦期间避免使用 css 动画对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况 form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors wx://form-field键盘高度发生变化keyboardheightchange事件可能会多次触发开发者对于相同的 height 值应该忽略掉
input属性说明:
属性类型默认值必填说明最低版本valuestring是输入框的初始内容1.0.0typestringtext否input 的类型1.0.0 合法值说明最低版本text文本输入键盘number数字输入键盘idcard身份证输入键盘digit带小数点的数字键盘safe-password密码安全输入键盘 指引2.18.0nickname昵称输入键盘2.21.2passwordbooleanfalse否是否是密码类型1.0.0placeholderstring是输入框为空时占位符1.0.0placeholder-stylestring是指定 placeholder 的样式1.0.0placeholder-classstringinput-placeholder否指定 placeholder 的样式类1.0.0disabledbooleanfalse否是否禁用1.0.0maxlengthnumber140否最大输入长度设置为 -1 的时候不限制最大长度1.0.0cursor-spacingnumber0否指定光标与键盘的距离取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离1.0.0auto-focusbooleanfalse否(即将废弃请直接使用 focus )自动聚焦拉起键盘1.0.0focusbooleanfalse否获取焦点1.0.0confirm-typestringdone否设置键盘右下角按钮的文字仅在typetext时生效1.1.0 合法值说明send右下角按钮为“发送”search右下角按钮为“搜索”next右下角按钮为“下一个”go右下角按钮为“前往”done右下角按钮为“完成”always-embedbooleanfalse否强制 input 处于同层状态默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)2.10.4confirm-holdbooleanfalse否点击键盘右下角按钮时是否保持键盘不收起1.1.0cursornumber是指定 focus 时的光标位置1.5.0selection-startnumber-1否光标起始位置自动聚集时有效需与 selection-end 搭配使用1.9.0selection-endnumber-1否光标结束位置自动聚集时有效需与 selection-start 搭配使用1.9.0adjust-positionbooleantrue否键盘弹起时是否自动上推页面1.9.90hold-keyboardbooleanfalse否focus时点击页面的时候不收起键盘2.8.2safe-password-cert-pathstring否安全键盘加密公钥的路径只支持包内路径2.18.0safe-password-lengthnumber否安全键盘输入密码长度2.18.0safe-password-time-stampnumber否安全键盘加密时间戳2.18.0safe-password-noncestring否安全键盘加密盐值2.18.0safe-password-saltstring否安全键盘计算 hash 盐值若指定custom-hash 则无效2.18.0safe-password-custom-hashstring否安全键盘计算 hash 的算法表达式如 md5(sha1(foo sha256(sm3(password bar))))2.18.0bindinputeventhandle是键盘输入时触发event.detail {value, cursor, keyCode}keyCode 为键值2.1.0 起支持处理函数可以直接 return 一个字符串将替换输入框的内容。1.0.0bindfocuseventhandle是输入框聚焦时触发event.detail { value, height }height 为键盘高度在基础库 1.9.90 起支持1.0.0bindblureventhandle是输入框失去焦点时触发event.detail { value, encryptedValue, encryptError }1.0.0bindconfirmeventhandle是点击完成按钮时触发event.detail { value }1.0.0bindkeyboardheightchangeeventhandle是键盘高度发生变化的时候触发此事件event.detail {height: height, duration: duration}2.7.0
view classpage-bodyview classpage-sectionview classweui-cells__title可以自动聚焦的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input focus{{focus}} placeholder将会获取焦点//view/view/viewview classpage-sectionview classweui-cells__title控制最大输入长度的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input maxlength10 placeholder最大输入长度为10 //view/view/viewview classpage-sectionview classweui-cells__title实时获取输入值{{inputValue}}/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input maxlength10 bindinputbindKeyInput placeholder输入同步到view中//view/view/viewview classpage-sectionview classweui-cells__title控制输入的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input bindinputbindReplaceInput placeholder连续的两个1会变成2 //view/view/viewview classpage-sectionview classweui-cells__title控制键盘的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input bindinputbindHideKeyboard placeholder输入123自动收起键盘 //view/view/viewview classpage-sectionview classweui-cells__title数字输入的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input typenumber placeholder这是一个数字输入框 //view/view/viewview classpage-sectionview classweui-cells__title密码输入的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input password typetext placeholder这是一个密码输入框 //view/view/viewview classpage-sectionview classweui-cells__title带小数点的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input typedigit placeholder带小数点的数字键盘//view/view/viewview classpage-sectionview classweui-cells__title身份证输入的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input typeidcard placeholder身份证输入键盘 //view/view/viewview classpage-sectionview classweui-cells__title控制占位符颜色的input/viewview classweui-cells weui-cells_after-titleview classweui-cell weui-cell_inputinput classweui-input placeholder-stylecolor:#F76260 placeholder占位符字体是红色的 //view/view/view
/viewPage({data: {focus: false,inputValue: },bindKeyInput: function (e) {this.setData({inputValue: e.detail.value})},// 连续输入两个1会编程一个2bindReplaceInput: function (e) {console.log(e.detail)// 获取当前输入框的值var value e.detail.value// 获取当前光标的位置console.log(e.detail)var pos e.detail.cursorreturn {value: value.replace(/11/g, 2),cursor: pos}},// 用户输入123触发事件bindHideKeyboard: function (e) {if (e.detail.value 123) {// 收起键盘wx.hideKeyboard()}}
})picker 从底部弹起的滚动选择器 picker/pickerpicker组件属性说明:
属性类型默认值必填说明最低版本header-textstring否选择器的标题仅安卓可用2.11.0modestringselector否选择器类型1.0.0 合法值说明selector普通选择器multiSelector多列选择器time时间选择器date日期选择器region省市区选择器disabledbooleanfalse否是否禁用1.0.0bindcanceleventhandle否取消选择时触发1.9.90
除了上述通用的属性对于不同的modepicker拥有不同的属性。
单列选择器 普通选择器mode selector 普通选择器常用属性
属性名类型默认值说明最低版本rangearray/object array[]mode 为 selector 或 multiSelector 时range 有效range-keystring当 range 是一个 Object Array 时通过 range-key 来指定 Object 中 key 的值作为选择器显示内容valuenumber0表示选择了 range 中的第几个下标从 0 开始bindchangeeventhandlevalue 改变时触发 change 事件event.detail {value}
viewpicker bindchangebindPickerChange value{{index}} range{{array}}view请选择序号{{array[index]}}/view/picker
/viewviewpicker bindchangebindPickerChange2 value{{index}} range{{objectArray}}range-keynameview当前选择的姓名{{name}}/view/picker
/viewPage({data: {array:[1,2,3,4,5],index:-1,objectArray:[{id:1,name:张三},{id:2,name:李四},{id:3,name:王五},{id:4,name:赵六}],name:请选择人名,},bindPickerChange:function(e){//获取选中的下标var index e.detail.value;//设置data中的indexthis.setData({index:index,});},bindPickerChange2:function(e){var index e.detail.value;//设置data中的indexthis.setData({name:this.data.objectArray[index].name,});}
})多列选择器 多列选择器mode multiSelector与普通选择器的区别在于,多列选择器要求数组必须是一个二维的数组 属性名类型默认值说明最低版本rangearray/object array[]mode 为 selector 或 multiSelector 时range 有效range-keystring当 range 是一个 Object Array 时通过 range-key 来指定 Object 中 key 的值作为选择器显示内容valuearray[]表示选择了 range 中的第几个下标从 0 开始bindchangeeventhandlevalue改变时触发change事件,event.detail {value: value}bindcolumnchangeeventhandle某一列的值改变时触发columnchange事件event.detail {column: column, value:value} , column的值表示改变了第几列(下标从0开始) , value 的值表示变更值的下标
viewview多列选择器/viewpicker bindchangebindPickerChange value{{index}} range{{array}} modemultiSelectorview当前选择{{num}}/view/picker
/viewviewview多列选择器2/viewpicker bindchangebindPickerChange2 value{{index}} range{{objectArray}} range-keyname modemultiSelectorview当前选择{{name}}/view/picker
/viewPage({data: {array:[[1,2,3,4,5],[6,7,8,9,10]],num:,objectArray:[[{id:1,name:张三},{id:2,name:李四},{id:3,name:王五},{id:4,name:赵六}],[{id:1,name:张三},{id:2,name:李四},{id:3,name:王五},{id:4,name:赵六}]],name:请选择人名,},bindPickerChange:function(e){//获取选中的下标var indexs e.detail.value;//设置data中的indexthis.setData({num:this.data.array[0][indexs[0]]--this.data.array[1][indexs[1]],});},bindPickerChange2:function(e){var indexs e.detail.value;//设置data中的indexthis.setData({name:this.data.objectArray[0][indexs[0]].name --this.data.objectArray[1][indexs[1]].name,});}
})时间选择器日期选择器地区选择器
时间选择器mode time
时间选择器常见属性
属性名类型默认值说明最低版本valuestring表示选中的时间格式为hh:mmstartstring表示有效时间范围的开始字符串格式为hh:mmendstring表示有效时间范围的结束字符串格式为hh:mmbindchangeeventhandlevalue 改变时触发 change 事件event.detail {value}
日期选择器mode date
日期选择器常见属性
属性名类型默认值说明最低版本valuestring当天表示选中的日期格式为YYYY-MM-DDstartstring表示有效日期范围的开始字符串格式为YYYY-MM-DDendstring表示有效日期范围的结束字符串格式为YYYY-MM-DDfieldsstringday有效值 year,month,day表示选择器的粒度bindchangeeventhandlevalue 改变时触发 change 事件event.detail {value}
fields 有效值
值说明year选择器粒度为年month选择器粒度为月份day选择器粒度为天
省市区选择器mode region
地区选择器常见属性
属性名类型默认值说明最低版本valuearray[]表示选中的省市区默认选中每一列的第一个值custom-itemstring可为每一列的顶部添加一个自定义的项1.5.0levelstringregion选择器层级2.21.1bindchangeeventhandlevalue 改变时触发 change 事件event.detail {value, code, postcode}其中字段 code 是统计用区划代码postcode 是邮政编码
level 的有效值
值说明province省级选择器city市级选择器region区级选择器sub-district街道选择器
viewview 时间选择器/viewpicker modetime value{{time}} start09:01 end21:01 bindchangebindTimeChangeview classpicker当前选择: {{time}}/view/picker
/viewviewview日期选择器/viewpicker modedate value{{date}} start2015-09-01 end2017-09-01 bindchangebindDateChangeview classpicker当前选择: {{date}}/view/picker
/viewviewview省市区选择器/viewpicker moderegion bindchangebindRegionChange custom-item{{customItem}}view classpicker当前选择{{region}}/view/picker
/view// pages/picker/picker.js
Page({data: {time:请选择时间,date:请选择日期,customItem:全部,region:,},bindTimeChange:function(e){//获取选中的下标//设置data中的indexthis.setData({time:e.detail.value,});},bindDateChange:function(e){this.setData({date:e.detail.value,});},bindRegionChange:function(e){console.log(e.detail.value);this.setData({region:e.detail.value,});}})picker-view 嵌入页面的滚动选择器。其中只可放置 picker-view-column组件 属性说明:
属性类型默认值必填说明最低版本valueArray.number否数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项下标从 0 开始数字大于 picker-view-column 可选项长度时选择最后一项。1.0.0indicator-stylestring否设置选择器中间选中框的样式1.0.0indicator-classstring否设置选择器中间选中框的类名1.1.0mask-stylestring否设置蒙层的样式1.5.0mask-classstring否设置蒙层的类名1.5.0immediate-changebooleanfalse否是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。2.21.1bindchangeeventhandle否滚动选择时触发 change 事件event.detail {value}value为数组表示 picker-view 内的 picker-view-column 当前选择的是第几项下标从 0 开始1.0.0bindpickstarteventhandle否当滚动选择开始时候触发事件2.3.1bindpickendeventhandle否当滚动选择结束时候触发事件2.3.1
picker-view stylewidth: 100%;height: 250px; bindchangechangevaluepicker-view-columnview wx:for{{year}}{{item}}/view/picker-view-columnpicker-view-columnview wx:for{{month}}{{item}}/view/picker-view-columnpicker-view-columnview wx:for{{day}}{{item}}/view/picker-view-column
/picker-view
view{{myvalue}}/view
Page({data: {year:[1990,1995,2000,2005,2010,2020,2025],month:[1,2,3,4,5,6,7,8,9,10,11,12],day:[1,5,10,15,20,25,30],myvalue:},changevalue:function(e){//获取选中的下标集合let indexs e.detail.value;var year this.data.year[indexs[0]];var month this.data.month[indexs[1]];var day this.data.day[indexs[2]];this.setData({myvalue: this.data.myvalue year-month-day,});}
})滑动有声音吓我一条 radio
属性说明:
属性类型默认值必填说明最低版本valuestring否radio 标识。当该radio 选中时radio-group 的 change 事件会携带radio的value1.0.0checkedbooleanfalse否当前是否选中1.0.0disabledbooleanfalse否是否禁用1.0.0colorstring#09BB07否radio的颜色同 css 的color1.0.0
radio-group bindchangechooseradio checked{{item.id 2?true:false}} wx:for{{array}} value{{item.name}}{{item.value}}/radio
/radio-group
view{{myvalue}}/viewPage({data: {array:[{id:1,name:male,value:男},{id:2,name:female,value:女}],myvalue:请选择性别},choose:function(e){var value e.detail.value;this.setData({myvalue:value});}
})slider 滑动选择器 属性说明:
属性类型默认值必填说明最低版本minnumber0否最小值1.0.0maxnumber100否最大值1.0.0stepnumber1否步长取值必须大于 0并且可被(max - min)整除1.0.0disabledbooleanfalse否是否禁用1.0.0valuenumber0否当前取值1.0.0colorcolor#e9e9e9否背景条的颜色请使用 backgroundColor1.0.0selected-colorcolor#1aad19否已选择的颜色请使用 activeColor1.0.0activeColorcolor#1aad19否已选择的颜色1.0.0backgroundColorcolor#e9e9e9否背景条的颜色1.0.0block-sizenumber28否滑块的大小取值范围为 12 - 281.9.0block-colorcolor#ffffff否滑块的颜色1.9.0show-valuebooleanfalse否是否显示当前 value1.0.0bindchangeeventhandle否完成一次拖动后触发的事件event.detail {value}1.0.0bindchangingeventhandle否拖动过程中触发的事件event.detail {value}1.7.0
slider min1 max100 show-value{{true}} bindchangingchangevalue/slider
view stylewidth:{{width}};height:100rpx;background-color: green;/viewPage({data: {width:10rpx,},changevalue:function(e){var value e.detail.value;this.setData({width:value*5rpx});}
})switch 开关选择器。 属性说明:
属性类型默认值必填说明最低版本checkedbooleanfalse否是否选中1.0.0disabledbooleanfalse否是否禁用1.0.0typestringswitch否样式有效值switch, checkbox1.0.0colorstring#04BE02否switch 的颜色同 css 的 color1.0.0bindchangeeventhandle否点击导致 checked 改变时会触发 change 事件event.detail{ value}1.0.0
switch checked{{false}} colorred这是一个开关选择器/switch
switch checked{{true}} bindchangechangevalue开关/switch
view stylebackground-color: {{color}};width: 100%;height: 500rpx;/viewPage({data: {color:#FFFFFF},changevalue:function(e){var flag e.detail.value;if(flag){this.setData({color:#FFFFFF });}else{this.setData({color:#000000 });}}
})表单综合练习
form bindsubmitsubmitForminput nameusername placeholder请输入用户名 /input namepassword password{{true}} placeholder请输入密码 /checkbox-group nameskill stylemargin-top: 25rpx;请选择技能view wx:for{{skills}}checkbox id{{item.id}} value{{item.name}}{{item.value}}/checkbox/view/checkbox-grouppicker namebirthday modedate start1970-01-01 end2000-12-31 bindchangechangeDate stylemargin-top: 25rpxview{{birthday}}/view/pickerpicker namecity moderegion bindchangechangeCity stylemargin-top: 25rpxview{{city}}/view/pickerradio-group namesex stylemargin-top: 25rpxradio value男 checked{{true}}男/radioradio value女女/radio/radio-groupview stylemargin-top: 25rpx请选择年龄:slider min15 max50 show-value{{true}} nameage/slider/viewswitch nameisOk stylemargin-top: 25rpx是否保密/switchtextarea nameremark stylemargin-top: 25rpx placeholder备注/textareabutton form-typesubmit typeprimary sizemini提交/buttonbutton stylemargin-left: 25rpx; form-typereset typewarnsizemini重置/button
/formPage({data: {skills:[{id:s01,name:Java,value:Java},{id:s02,name:SQL,value:SQL},{id:s03,name:HTML,value:HTML},{id:s04,name:JavaScript,value:JavaScript}],birthday:请选择出生日期,city:请选择你所在地},submitForm:function(e){console.log(e);},changeDate:function(e){this.setData({birthday:e.detail.value,});},changeCity:function(e){var values e.detail.value;this.setData({city:values[0],values[1],values[2],});console.log(e)}
})导航组件
navigator/navigator页面链接,类似html的超链接 属性说明:
属性类型默认值必填说明最低版本targetstringself否在哪个目标上发生跳转默认当前小程序2.0.7 合法值说明self当前小程序miniProgram其它小程序urlstring否当前小程序内的跳转链接1.0.0open-typestringnavigate否跳转方式1.0.0 合法值说明最低版本navigate对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能redirect对应 wx.redirectTo 的功能switchTab对应 wx.switchTab 的功能reLaunch对应 wx.reLaunch 的功能1.1.0navigateBack对应 wx.navigateBack 的功能1.1.0exit退出小程序targetminiProgram时生效2.1.0deltanumber1否当 open-type 为 navigateBack 时有效表示回退的层数1.0.0app-idstring否当targetminiProgram时有效要打开的小程序 appId2.0.7pathstring否当targetminiProgram时有效打开的页面路径如果为空则打开首页2.0.7extra-dataobject否当targetminiProgram时有效需要传递给目标小程序的数据目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。详情2.0.7versionstringrelease否当targetminiProgram时有效要打开的小程序版本2.0.7 合法值说明develop开发版trial体验版release正式版仅在当前小程序为开发版或体验版时此参数有效如果当前小程序是正式版则打开的小程序必定是正式版。short-linkstring否当targetminiProgram时有效当传递该参数后可以不传 app-id 和 path。链接可以通过【小程序菜单】-【复制链接】获取。2.18.1hover-classstringnavigator-hover否指定点击时的样式类当hover-classnone时没有点击态效果1.0.0hover-stop-propagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态1.5.0hover-start-timenumber50否按住后多久出现点击态单位毫秒1.0.0hover-stay-timenumber600否手指松开后点击态保留时间单位毫秒1.0.0bindsuccessstring否当targetminiProgram时有效跳转小程序成功2.0.7bindfailstring否当targetminiProgram时有效跳转小程序失败2.0.7bindcompletestring否当targetminiProgram时有效跳转小程序完成2.0.7
nav.wxml页面
view这是navigator页面/view
navigator open-typenavigate url../demo19-picker/index跳转到demo19/navigator
navigator open-typeredirect url../demo21-picker-view/index跳转到demo21/navigator
navigator open-typenavigate url../test-demo/index?name张三跳转到test/navigatortest-demo文件夹下的index.wxml页面
当前是test页面
text{{value}}/texttest-demo文件夹下的index.js文件
Page({data: {value:},/*** 生命周期函数--监听页面加载*/onLoad(options) {if(options){this.setData({value:hello:options.name,});}},
})媒体组件
image
image/image图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式 image组件默认宽度320px、高度240px 属性说明:
属性类型默认值必填说明最低版本srcstring否图片资源地址1.0.0modestringscaleToFill否图片裁剪、缩放的模式1.0.0 合法值说明最低版本scaleToFill缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素aspectFit缩放模式保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。aspectFill缩放模式保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取。widthFix缩放模式宽度不变高度自动变化保持原图宽高比不变heightFix缩放模式高度不变宽度自动变化保持原图宽高比不变2.10.3top裁剪模式不缩放图片只显示图片的顶部区域bottom裁剪模式不缩放图片只显示图片的底部区域center裁剪模式不缩放图片只显示图片的中间区域left裁剪模式不缩放图片只显示图片的左边区域right裁剪模式不缩放图片只显示图片的右边区域top left裁剪模式不缩放图片只显示图片的左上边区域top right裁剪模式不缩放图片只显示图片的右上边区域bottom left裁剪模式不缩放图片只显示图片的左下边区域bottom right裁剪模式不缩放图片只显示图片的右下边区域webpbooleanfalse否默认不解析 webP 格式只支持网络资源2.9.0lazy-loadbooleanfalse否图片懒加载在即将进入一定范围上下三屏时才开始加载1.5.0show-menu-by-longpressbooleanfalse否长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序若图片中包含对应二维码或小程序码的菜单。2.7.0binderroreventhandle否当错误发生时触发event.detail {errMsg}1.0.0bindloadeventhandle否当图片载入完毕时触发event.detail {height, width}1.0.0
image srchttps://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg/image
image src{{src}} stylewidth: 200px; height: 200px; modetop/image// pages/demo23-image/index.js
Page({data: {src:https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg}
})video
index.wxml
view classpage-bodyview classpage-section tcvideo idmyVideo srchttp://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400bizid1023hySHfileparam302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400 binderrorvideoErrorCallback danmu-list{{danmuList}} enable-danmu danmu-btn show-center-play-btn{{false}} show-play-btn{{true}} controlspicture-in-picture-mode{{[push, pop]}}bindenterpictureinpicturebindVideoEnterPictureInPicturebindleavepictureinpicturebindVideoLeavePictureInPicture/videoview stylemargin: 30rpx auto classweui-label弹幕内容/viewinput bindblurbindInputBlur classweui-input typetext placeholder在此处输入弹幕内容 /button stylemargin: 30rpx auto bindtapbindSendDanmu classpage-body-button typeprimary formTypesubmit发送弹幕/buttonnavigator stylemargin: 30rpx auto urlpicture-in-picture hover-classother-navigator-hoverbutton typeprimary classpage-body-button bindtapbindPlayVideo小窗模式/button/navigator/view
/viewindex.js
function getRandomColor() {const rgb []for (let i 0; i 3; i) {let color Math.floor(Math.random() * 256).toString(16)color color.length 1 ? 0 color : colorrgb.push(color)}return # rgb.join()
}Page({onShareAppMessage() {return {title: video,path: page/component/pages/video/video}},onReady() {this.videoContext wx.createVideoContext(myVideo)},onHide() {},inputValue: ,data: {src: ,danmuList:[{text: 第 1s 出现的弹幕,color: #ff0000,time: 1}, {text: 第 3s 出现的弹幕,color: #ff00ff,time: 3}],},bindInputBlur(e) {this.inputValue e.detail.value},bindButtonTap() {const that thiswx.chooseVideo({sourceType: [album, camera],maxDuration: 60,camera: [front, back],success(res) {that.setData({src: res.tempFilePath})}})},bindVideoEnterPictureInPicture() {console.log(进入小窗模式)},bindVideoLeavePictureInPicture() {console.log(退出小窗模式)},bindPlayVideo() {console.log(1)this.videoContext.play()},bindSendDanmu() {this.videoContext.sendDanmu({text: this.inputValue,color: getRandomColor()})},videoErrorCallback(e) {console.log(视频错误信息:)console.log(e.detail.errMsg)}
})
